Viele Besucher öffnen deine Seite mit begrenztem mobilem Datenvolumen oder schwachem Empfang, in der Bahn, im Funkloch auf dem Land oder in einem Einkaufszentrum. Eine Seite mit mehreren riesigen Fotos wirkt auf sie kaputt, und sie gehen, bevor sie fertig geladen ist.
Die gute Nachricht: Bildprobleme sind die am leichtesten zu behebenden Geschwindigkeitsprobleme, und du kannst sie im Chat lösen.
Bilder sind meist der schwerste Teil einer Seite. Skaliere sie auf die Größe, in der sie angezeigt werden, nutze WebP oder ein anderes modernes Format und lade Bilder unterhalb des ersten Bildschirms verzögert.
Vor dem Hochladen verkleinern
Ein Foto direkt aus der Handykamera kann mehrere Megabyte groß und Tausende Pixel breit sein, wird aber in einem Feld von wenigen hundert Pixeln Breite angezeigt. Eine gute Faustregel: Die Datei sollte etwa doppelt so breit sein wie die Anzeige, für scharfe Bildschirme, und nicht mehr.
- Vollbreites Titelbild: etwa 1600 bis 2000 Pixel Breite reichen völlig.
- Karten und Produktvorschauen: 600 bis 800 Pixel Breite.
- Logos und Symbole: nutze SVG, das scharf bleibt und winzig ist.
Das richtige Format wählen
WebP (und AVIF, wo unterstützt) liefert bei ähnlicher Qualität meist viel kleinere Dateien als JPEG oder PNG. Behalte JPEG für Fotos als Rückfalllösung und vermeide PNG für Fotos, weil es groß ist. Eine Qualität von etwa 75 bis 80 Prozent fällt dem Auge normalerweise nicht auf.
Intelligent laden
Bilder unterhalb des ersten Bildschirms sollten erst laden, wenn der Besucher in ihre Nähe scrollt (Lazy Loading). Das Hauptbild oben sollte sofort laden, nicht verzögert, weil es als Erstes gesehen wird.
Lege außerdem bei jedem Bild Breite und Höhe oder ein festes Seitenverhältnis fest, damit die Seite nicht springt, während Bilder eintreffen.
Ein Prompt zum Kopieren
„Optimiere alle Bilder dieser Website für mobile Daten. Wandle Fotos in WebP um, skaliere jedes auf höchstens die doppelte Anzeigegröße, lade alles unterhalb des ersten Bildschirms verzögert, aber nicht das Titelbild, setze feste Seitenverhältnisse, damit nichts springt, und ergänze kurze, beschreibende Alt-Texte.“
Öffne die Seite nach der Änderung auf deinem Handy mit ausgeschaltetem WLAN und vergleiche, wie schnell der erste Bildschirm erscheint.