Moderne Bildformate kurz erklärt

14. Juli 2021

Als die Bilder laufen lernten, war noch nicht von Bandbreite die Rede: das Einzige, was zählte, war die bestmögliche Qualität. Inzwischen hat sich das natürlich geändert, und bei der Erstellung von Webseiten wird ein guter Kompromiss zwischen Qualität und Bildgröße gewählt. Doch eine geringe Datenübertragungsrate kann trotzdem dazu führen, dass Bilder die Ladezeit der gesamten Internetseite verzögern – es kommt zum cumulative layout shift: das Layout der Seite “springt”, wenn ein fehlendes Bild geladen wurde; im schlimmsten Fall sogar mehrmals. Das Problem lässt sich umgehen, indem man für die Bilder auf einer Webseite moderne Bildformate nutzt.

Moderne Bildformate – und die Webseite lernt fliegen

Zwei verschiedene Standards wurden dafür entwickelt: Progressive JPEG und WebP. Sie bieten beide eine bessere Bildqualität bei geringerer Dateigröße als die Formate JPEG und PNG. Es gibt aber auch Unterschiede.

Progressives JPEG: jetzt wird’s scharf

Ein progressives JPEG ist kleiner als ein weboptimiertes JPEG. Außerdem laden die Bilder zunächst nicht in der maximalen Auflösung, sondern werden immer wieder "nachgeschärft", was aber bei einer normal schnellen Datenübertragung nicht sichtbar ist. Dabei kann man die Unschärfe zu Beginn des Seitenaufbaus einstellen. Der Nachteil: wie das ursprüngliche JPEG kann in diesem Format kein transparenter Hintergrund verwendet werden. Mit Adobe Photoshop ist die Umwandlung aus einem anderen Bildformat möglich. Falls der verwendete Browser progressive JPEGs nicht unterstützt, wird einfach wie bisher das Bild in maximaler Auflösung geladen – die Darstellung funktioniert also garantiert. Mit JPEG XL ist inzwischen ein weiteres Nachfolgeformat in Entwicklung.

WebP: der Alleskönner von Google

Das von Google entwickelte Format WebP bietet um ca. 25 % kleinere Bilddateien als das PNG-Format, ermöglicht aber wie Letzteres einen transparenten Hintergrund. Auch Animationen können als WebP dargestellt werden. Bei hoher Komprimierung bietet es eine bessere Bildqualität als JPEG-Bilder und wird inzwischen von den gängigen Browsern in ihrer aktuellsten Version unterstützt. Der Nachteil: wird ein veralteter Browser verwendet, klappt die Darstellung nicht. Daher sollte als fallback immer noch ein anderes Format vorhanden sein, was natürlich zu einem Mehraufwand bei der Programmierung von Seiten führt. Die Erstellung erfolgt z.B. über ein Add-on mit Adobe Photoshop oder Online-Konverter, ist also vor allem für Profis möglich. Auch für WordPress gibt es Plug-ins für die automatische Umwandlung in WebP. Die hohe Geschwindigkeit beim Seitenaufbau, die zu einer guten User Experience (UX) beiträgt, sorgt auch für eine bessere Bewertung im Google Ranking – die Seite wird bei Google-Suchergebnissen weiter vorne angezeigt. Übrigens: um WebP-Bilder zu betrachten, muss man immer einen Browser benutzen.

Besser, aber was ist das Bestesteste?

Beide Bildformate haben ihre Stärken, aber auch ein, zwei Häkchen, deswegen hat sich auch noch keines durchgesetzt, bzw. werden schon die Nachfolger entwickelt. Welches Format für Ihr Webprojekt am besten geeignet ist, entscheiden wir daher individuell zusammen mit Ihnen. Sprechen Sie uns gerne an!