Wenn Du Deine Webseite auf Core Web Vitals optimierst, kommst Du um das Thema Bildoptimierung meist nicht drum herum. Denn die Ladegeschwindigkeit hängt oft (auch) von der Bildgröße, der Anzahl an Bilder, dem Bilder-Layout und der Ladereihenfolge ab. Wusstest Du, dass Bilder tatsächlich rund 42% des Largest Contentful Paints (LCP) ausmachen?
Nun steht uns eine ganze Menge an Bildformaten zur Auswahl. Welches das richtige Bildformat ist, hängt ganz von Deinen Anforderungen ab. Der Artikel über moderne Bildformate AVIF und WEBP von Addy Osmani (Google Chrome) hilft bei dieser Fragestellung ganz gut weiter. Schauen wir einmal genauer rein:
Bildformate unterscheiden sich grundsätzlich in dem Bild-Codec, der ein Bild auf eine bestimmte Art und Weise bei der Komprimierung kodiert und beim Rendern dekodiert. Hier die wichtigsten Parameter, die Du Dir grundsätzlich anschauen solltest, wenn Du das passende Bildformat für Dich bestimmen möchtest:
-
Kompression: Je nach Bild-Codec kann eine gewisse Kompression erreicht werden, welche die Verkleinerung der Bildgröße für eine schnellere Übertragung der Daten bestimmt (beeinflusst den LCP also direkt).
-
Qualität: Prüfe, ob der Qualitätsverlust durch die Bildkompression akzeptabel ist!
-
Dekodierungsgeschwindigkeit: Starke Komprimierungen können zu höherem Aufwand bei Dekodierung und somit langsameren Rendering des Bildes führen.
-
Kodierungsgeschwindigkeit: Die Bilder müssen auch erstmal komprimiert werden. AVIF ist beispielsweise bekannt dafür, dass das Erstellen der Dateien teilweise mehrere Minuten pro Bild braucht.
Dazu gibt es spezielle Anforderungen, welche die Auswahl des passenden Bildformats beeinflussen, wie zum Beispiel
-
die Unterstützung des CDNs und Browsers,
-
verwendete Deckkraft-Stufen,
-
High Dynamic Range (HDR-) Bildgebung,
-
genutzter Farbraum,
-
Bildvorschauen
und viele weitere.
Die seit langer Zeit etablierten Bildformate JPEG und PNG werden je nach benötigtem Bildtyp häufig verwendet. Die Vor- und Nachteile im Überblick:
-
JPEG: geringe Komprimierung, möglicher Datenverlust bei der Komprimierung, keine moderne Features, aber schnelle Dekodierung.
-
PNG: geringe Komprimierung, aber dafür kein Datenverlust.
Für bessere Komprimierungen und spezielleren Anforderungen gibt es moderne Bildformate wie AVIF und WEBP. Beide Bildformate bieten sich für Stand- und Animationsbilder an und können Bilder mit und ohne Datenverlust deutlich stärker komprimieren als JPEG und PNG.
Ob WEBP oder AVIF bei der Komprimierung Deines Bildes ohne Datenverlust besser ist, solltest Du am besten manuell checken, wenn Du auf Nummer sicher gehen möchtest. Du kennst bestimmt das Tool Squoosh, welches Dir dabei hilft, ein Bild in unterschiedlichen Bildformaten optisch direkt zu vergleichen.
Addy Osmani hat mehrere Vergleiche unterschiedlicher Formate anschaulich zusammengestellt - die Bilder sehen optisch meist im AVIF am besten aus. Aber Achtung: Während WEBP von so gut wie allen Browsern unterstützt wird, gibt es bei AVIF mit Safari und Edge noch zwei klaffende Lücken.
Um sicherzustellen, dass Dein Bild von jedem Browser, in dem es geladen wird, auch gerendert werden kann, gibt es drei Möglichkeiten, den Browser entscheiden zu lassen, das passende Bildformat zu nutzen:
-
Das <picture>-Element erlaubt es Dir, das Bild in mehreren Formaten in Deiner präferierten Reihenfolge zur Verfügung zu stellen und der Browser wird das erste unterstützte Bildformat auswählen.
-
Mit einer Content-Negotiation im Hypertext Transfer Protocol kann ein angefragtes Bildformat zwischen Browser und Server abgestimmt werden. Ein Browser hat hierfür die unterstützten Bildformate im Accept Request Header hinterlegt.
-
Beim srcset-Attribut in einem <img>- oder <picture>-Element bietet es sich an, die modernen Bildformate einzusetzen und dazu ein althergebrachtes Bildformat in voller Auflösung als Fallback im src-Attribut. Damit verlieren Nutzer veralteter Browser aber natürlich doppelt...
Wenn Du besondere Anforderungen mit Special Effects oder Ähnlichem an Deine Bilder hast, dann solltest du Dich auf jeden Fall WEBP oder AVIF nutzen. Je nach Bild kann ein anderes Bildformat am Geeignetsten sein - bleib also auf der Hut!
Welche Bildformate nutzt Du am meisten? Und nutzt Du eher das <picture> Element, Content-Negotiation mit Accept Request Header oder lässt Du IE11-Nutzer auf das Fallback-JPEG warten?
Apropos Bilder - hast Du auch schon davon gehört, dass Google wohl aktuell überlegt, Instagram und TikTok zu indexieren? Das könnte dann dazu führen, dass Kurzvideos und Bilder von diesen beiden Plattformen dann in der Google-Suche angezeigt werden könnten, wie man es aktuell schon von Tweets gewohnt ist. Genaueres dazu ist noch nicht weiter festgelegt, die Gespräche laufen... Wir sind also gespannt!