Was bedeutet es, wenn Bilder mehr als die Hälfte der Übertragung ausmachen?

Lazy Loading spart, solange das Startbild sofort lädt

Mit loading="lazy" lädt der Browser ein Bild erst, wenn es sich dem sichtbaren Bereich nähert. Wer nur den ersten Bildschirm ansieht, überträgt die Galerie weiter unten dann gar nicht. Das Attribut kam 2020 in die Browser; im Juni 2024 nutzten es knapp 35 % der Websites. Falsch eingesetzt bremst es die Seite: Im Web Almanac 2024 war am Telefon fast jedes zehnte Bild verzögert geladen, das als größtes sichtbares Element den Aufbau der Seite abschließt (Largest Contentful Paint, LCP). Die Autoren nennen das ein Muster, das Seiten deutlich langsamer macht. Das Startbild lädt deshalb sofort, alles darunter mit loading="lazy".

Weniger Bildbytes, kürzere Wartezeit im Shop

Bilder sind oft der größte Posten unter den Bytes einer Seite, und jedes Byte muss am Telefon erst durch die Leitung. Was Wartezeit kostet, hat Deloitte 2020 im Auftrag von Google an mobilen Seiten von Marken in Europa und den USA ausgewertet: Wurde eine Seite um eine Zehntelsekunde schneller, stiegen im Handel die Abschlüsse um 8,4 % und der durchschnittliche Bestellwert um 9,2 %, bei Reiseanbietern die Abschlüsse um 10,1 %. Das ist ein Zusammenhang aus vier Wochen Daten, den Google bezahlt hat, und keine Zusage für Ihre Website. Für einen Shop mit vielen Produktfotos setzt die Arbeit deshalb dort an, wo die meisten Bytes liegen: bei den Bildern.

Woher der Bildanteil kommt

Der Anteil zeigt, dass die Bilder das Gewicht der Seite bestimmen. Die Ursachen nennen die Befunde daneben: Bilder in JPEG oder PNG statt WebP oder AVIF, Bilder, die breiter geliefert werden, als die Anzeige verlangt, und Rasterbilder in SVG-Grafiken. In der Prüfakte zum Herunterladen steht die Bildtabelle der Startseite; sie listet jedes img-Element mit Rolle, Größe, Format und Bytes. Hintergrundbilder aus dem CSS zählen allein im Anteil.

Was ein Bild leicht macht

Ein Bild ist leicht, wenn es in der angezeigten Breite geliefert wird und in einem modernen Format komprimiert ist. Für hochauflösende Bildschirme steht die doppelte Breite als zweite Fassung im srcset. Bilder unterhalb des ersten Bildschirms laden erst, wenn sie in die Nähe des sichtbaren Bereichs kommen. Mit diesen Mitteln wird aus einem Kamerafoto mit mehreren Megabyte meist eine Datei mit wenigen hundert Kilobyte in derselben sichtbaren Qualität.

Tipps aus der Praxis

• Animierte GIFs sind die schwersten Bilder je Pixel. Im Web Almanac 2024 brauchte ein animiertes GIF im Median 32,6 Bit je Pixel, ein JPEG 2,0 Bit. Die Entwicklerwerkzeuge von Chrome schlagen für GIFs über 100 KiB ein Video vor.
• Beginnen Sie bei den Bildern, die auf jeder Seite laden: Logo, Kopfbild, Hintergrund der Fußzeile. Eine Einsparung dort wirkt bei jedem Aufruf jeder Seite.
• Bietet Ihre Bilddatenbank mehrere Größen zum Herunterladen an, nehmen Sie die Fassung, die Ihre Seite braucht. Die größte Fassung bleibt im Archiv.