Moderne Bildformate und Best Practices für schnelle Ladezeiten

Was Sie bei Bildformaten beachten sollten

Bei Bildformaten geht es in erster Linie um die Kompatibilität und Komprimierung der Inhalte. Das bekannte GIF stammt noch aus dem Jahr 1989 und JPEG aus den frühen 90ern. Die Formate kommen quasi aus der digitalen Steinzeit, als das Internet noch in den Kinderschuhen steckte. 

Dabei unterlag das Internet in den letzten Jahren und Jahrzehnten einem großen Wandel und es gibt eine Vielzahl an vielversprechenden Alternativen zu den gängigen Modellen auf dem Markt.

Das Problem? Bei der Wahl des richtigen Bildformates sieht man schnell den Wald vor Bäumen nicht mehr. Viele Formate beanspruchen für sich, das perfekte Bildformat zu sein und es stellt sich die Frage, für welche visuelle Darstellung und welche Intention Sie welches Bildformat wählen. Versuchen Sie, Platz zu sparen und die Ladezeiten so zu verbessern? Oder möchten Sie eine Animation haben?

Bildformate mit Zukunftspotenzial 

Einige Bildformate zeigten bereits ihr Potenzial, von dem sie jedoch nicht jeden überzeugen konnten. So sträubte sich Apple beispielsweise lange gegen das von Google stammende WebP und setzte stattdessen auf HEIC, welches jedoch nur von Apple genutzt wurde. Gleichzeitig sah sich Apple unter Druck gesetzt, WebP zu nutzen, das sich über die Jahre immer weiter durchsetzt.
AVIF bietet zum Beispiel einen noch geringen Qualitätsverlust, bei gleichzeitiger Reduzierung des Speicherplatzes. Die Erfolge des Formates brachten zuletzt sogar Netflix dazu, seine Vorschaubilder etc. auf AVIF umzustellen.

In diesem Artikel möchten wir Ihnen einzelne Formate vorstellen und darauf eingehen, welche Sie in Zukunft auf dem Schirm haben sollten. Anschließend geben wir Ihnen ein paar Tipps, wie Sie Ihre Bilder richtig optimieren.

WebP - Der aktuelle Star unter den Bildformaten

Das Bildformat WebP wurde ins Leben gerufen, um sich mit einer modernen Komprimierung von anderen Formaten abzuheben. Das Ziel von Google bestand darin, ein Format zu entwickeln, das eine hohe Qualität bei gleichzeitig niedrigem Speicherplatzverbrauch gewährleistet. 

Dabei setzten die Gründer auf eine besonders starke Komprimierung, die eine bessere Bildqualität als JPEG liefert und das in zwei Varianten. Mit verlustfreier und verlustbehafteter Kompression. Bei der verlustfreien Kompression handelt es sich um einen Typ der Datenkomprimierung, bei denen die Originaldaten exakt aus den komprimierten Daten wiederhergestellt werden und keine Informationen verloren gehen. Bei der verlustbehafteten Kompression hingegen geht ein Teil der Informationen verloren, was zur Folge hat, dass die Originaldaten aus den komprimierten Daten meist nicht mehr zurückgewonnen werden können.

Gegenüber PNG spart das verlustfreie Format laut Googles Angaben rund 26 Prozent seiner Dateigröße bei gleichbleibender Qualität ein. Im Vergleich zu JPEG sind es bei der verlustbehafteten Variante sogar bis zu 34 Prozent.

WebP wird von allen Browsern (außer IE11) unterstützt. Wir selbst verwenden WebP in einigen Projekten als Standard/Fallback-Format und rechnen damit, perspektivisch PNG und JPEG über Bord zu werfen.

Damit man ein Bild in das WebP-Format umwandeln kann, ist eine Installation von Tools und Plugins notwendig, wie Photoshop mit WebP-Addon, Optimus API, Pixelmator, IrfanView und GIMP WebP-Plugin. Für alle, die auf WordPress schwören, bietet sich WebP Express an. Es erstellt automatisch WebP und komprimiert JPEG Dateien automatisch verlustfrei.

WebP auf einen Blick:

• verlustfreie und verlustbehaftete Kompression
• Transparenz, Animation und Alpha-Kanal 
• Einsparungspotenzial bei GIF im Web Format
• nachdrückliche Empfehlung

HEIF/HEIC – Die Alternative von Apple 

HEIF steht für High Efficiency Image Format und ist den meisten erst seit Kurzem bekannt. Es handelt sich dabei um ein flexibles Container-Dateiformat für Bilder und Bildersequenzen, das ähnlich wie WebP ein Hybridformat ist und in dem sogar Audiodateien und Texte hinterlegt und mit Bildsequenzen synchronisiert werden können.

Ohne, dass eine erneute Codierung notwendig ist, können Änderungen an der Ausrichtung, Bildgrößenanpassungen oder Zuschnitte in ein und derselben Datei wie das Originalbild gespeichert werden. Die Zukunft des Bildformats scheint vielversprechend zu sein.

HEIF besitzt eine Bildausrichtungskorrektur von Hoch- zu Querformat und auch eine Beschneidung des Bildausschnittes (Crop) ohne eine Neuberechnung (Encoding) des Bildes, was zu einer guten Komprimierung der Daten und einer effizienten Bearbeitung führt. Bei mindestens gleichbleibender Qualität benötigen die gespeicherten Bilder so etwa 50 bis 60 Prozent weniger Speicherplatz als entsprechende JPEG Bilder. 

Durch die Integration mehrerer Bild- oder Datenformate in einer Datei, ist das Dateiformat auch ideal für einfaches Daten-Sharing geeignet. Das Bildformat bietet sich für eine Vielzahl an Einsätzen an und glänzt in mehreren Bereichen.

Fotos können mit Smartphones, Tablets oder der Digitalkamera aufgenommen werden. HEIF kann auch in der Webentwicklung sein Potenzial entfalten. Einerseits könnten Webprojekte künftig von der geringen Dateigröße von .heic-Bildern profitieren, was vor allem für kürzere Ladezeiten sorgen würde – vorausgesetzt, die Browser erhalten künftig HEIF-Viewer, um die Bilddateien wiedergeben zu können. HEIC ist Standard auf macOS und iOS, wird aber bislang von keinem anderen Browser unterstützt.

HEIF auf einen Blick:

• flexibles Container Dateiformat
• Bildgrößenanpassungen ohne erneute Codierung
• Bildausrichtungskorrektur von Hoch zu Querformat
• geeignet für Daten Sharing

AVIF - Der starke Herausforderer für WebP

Das Bildformat wurde erst 2019 ins Leben gerufen, entspricht modernen Standards und überzeugt mit einer extrem hohen Kompressionsrate, die bekannte Bildformate in den Schatten stellt. Deshalb wird es als Nachfolger von WebP gehandelt und soll das altbewährte JPEG als neues Standardformat ablösen. Wie bereits am Anfang des Artikels erwähnt, wird es inzwischen von Netflix genutzt und es bleibt abzuwarten, welche weiteren Global Player demnächst auf den Zug aufspringen.

Die Zeichen stehen gut, dass AVIF in Zukunft weitere Marktanteile an sich ziehen kann. Das Bildformat ist frei von Lizenzgebühren und wird außerdem von Google in Chrome und Android unterstützt. Obwohl es nur von neuen Chrome-Browsern unterstützt wird, lohnt sich dieses Format aufgrund seiner starken Ergebnisse in Lighthouse, dem Tool von Google für das Testen und Verbessern von Leistung, SEO, Sicherheit und Zugänglichkeit. Firefox hat ebenfalls die Implementierung angekündigt und auch von Apple ist zu erwarten, dass Sie nicht wie bei WebP zehn Jahre warten werden, ehe Sie die das Format unterstützen. 

AVIF auf einen Blick:

• hohe Kompressionsrate 
• bereits von Global Playern erprobt
• könnte neues Standardformat werden

SVG - Für sparsame Vektorgrafiken

Das Format Scalable Vector Graphics (SVG) ist ein Web-freundliches Vektorformat. Anders als pixelbasiertes Bildmaterial wie JPEG handelt es sich bei Vektorgrafiken um mathematisch definierte Bilder, die sich aus Punkten und Linien in einem Raster zusammensetzen.

Der Vorteil des Formats besteht jedoch darin, dass die Inhalte extrem klein sind und beliebig verlustfrei vergrößert werden können. Es handelt sich um ein verlustfreies Dateiformat. 

SVG ermöglicht Transparenz, Animationen und bietet eine beliebige Kombination von Farben oder Farbverläufen. Im Vergleich zu anderen Formaten für das Web ist die Dateigröße bei einfachen Grafiken (wie Icons) sehr gering.

Somit ist es sehr gut für einfache Grafiken im Web wie Logos und Icons geeignet und lässt sich optimal im responsiven Design darstellen. Der Nachteil ist leider, dass nicht jeder, jedes Content-Management-System oder jede Social-Media-Plattform mit Vektorgrafiken so einfach umgehen kann. Inzwischen nimmt die Verbreitung von SVG stark zu, sodass jeder moderne Webbrowser das Format bereits unterstützt. Ab Internet Explorer 9 können Sie SVG auf allen großen Browsern wie IE9, Mozilla Firefox, Safari, Google Chrome und Opera nutzen. Mobile Geräte und mit Webkit ausgestattete Browser bieten ebenfalls die Nutzung von SVG.

SVG auf einen Blick:

• verlustfreies Dateiformat
• Transparenz, Animation und Interaktion
• Vektorgrafiken statt Pixelgrafiken
• Flexibilität. Mit CSS können die Grafikeinstellungen auf der Website, wie z.B. die Hintergrundfarbe oder die Position des Logos auf der Seite, schnell ändern.

JPG - Der Klassiker für fotorealistische Bilder

JPEG-Dateien gehören neben PNG und GIF zu den am häufigsten verwendeten Bildformaten und können mit so gut wie jedem Programm geöffnet werden.

Obgleich das Bildformat bereits 1986 auf dem Markt erschien, benötigt es noch immer sehr wenig Speicherplatz und unterstützt Millionen von Farben, weshalb es der ideale Dateityp für Fotos ist. So bietet sich das Dateiformat gerade für die Darstellung Ihrer Inhalte in den sozialen Medien oder in Onlineshops an. Bei einem bekannten Onlineshop hat allein die Umstellung von PNG auf komprimierte JPEG-Bilder die durchschnittliche Ladezeit von 2,1 auf 0,6 Sekunden reduziert.

Das Format ist allerdings „verlustbehaftet“. Bei einer Komprimierung der Daten, werden unnötige Informationen dauerhaft aus der Datei gelöscht. Wenn die Datei zum Beispiel in ein JPEG konvertiert wird, büßt die Datei Qualität ein. Aufgrund der Qualitätsverluste, die mit einer starken Komprimierung Hand in Hand laufen, empfehlen wir eine Kompressionsrate von 75 bis 85 Prozent.

Außerdem erlauben JPEG-Dateien (in der Urform) keine Transparenz. Wenn Sie also mit durchsichtigen Bereichen arbeiten möchten, sind die Bildformate GIF und PNG besser geeignet. 

Mit einer besseren Komprimierungsrate bei gleichbleibender Qualität und bis zu 256 Farbkanälen, die verschiedene Farbprofile wie RGB ermöglichen, bringt JPEG 2000 gegenüber JPEG zwei hilfreiche Verbesserungen mit sich. Aufgrund der Inkompatibilität und der mangelnden Unterstützung seitens anderer Programme handelt es sich jedoch noch eher um ein Nischen- als ein Massenprodukt. JPEG 2000 funktioniert nur in Safari und auf Apple Geräten. Der Bruder JPEG XR ist auf Internet Explorer/Edge und auf Microsoft-Geräten beschränkt.

JPEG auf einen Blick:

• am häufigsten verwendetes Bildformat
• benötigt wenig Speicherplatz
• unterstützt Millionen von Farben
• keine Transparenz und verlustbehaftet

PNG - Bekanntes Format für verlustfreie Grafiken

PNG steht für Portable Network Graphics und ist das meistverwendete verlustfreie Grafikformat im Internet. Wenn die Größe Ihrer Datei kein Problem darstellt und Sie mit einem komplexen Bild arbeiten, ist PNG wahrscheinlich die beste Wahl. PNG wird am häufigsten für statische Bilder verwendet.

Das Format PNG ist GIF recht ähnlich und kann in 256, PNG-24 und sogar bis zu 16 Millionen Farben, gespeichert werden. Deshalb eignet es sich ebenfalls gut zur Darstellung von Grafiken und einfachen Farbflächen. Ein wichtiger Vorteil des PNG-Dateiformats im Vergleich mit JPG ist die Unterstützung von Transparenz. PNG ist verlustfrei, sodass während der Komprimierung keine Daten verloren gehen.

Das Pixelgrafikformat ist vor allem bei Webdesignern verbreitet, weil es Grafiken mit transparenten oder halbtransparenten Hintergründen unterstützt. Sie können zum Beispiel einen transparenten Hintergrund um ein unregelmäßig geformtes Objekt legen. 

PNG auf einen Blick:

• sehr bekanntes Grafikformat
• unterstützt Transparenz
• geeignet für statische Bilder

GIF - Die Mutter aller Memes

GIF bedeutet Graphics Interchange Format und ist ein Dateiformat, in dem mehrere Einzelbilder gespeichert und anschließend als Animation automatisch hintereinander abgespielt werden. 

Das Dateiformat ist in der Lage, bewegte Bilder zu erzeugen und unterscheidet sich in dieser Hinsicht vom bekannten JPG-Format, welches nur starre Bilddarstellungen erlaubt. GIFs sind sozusagen die digitale Form eines Daumenkinosund werden vor allem auf Internetseiten eingesetzt, die Ihre Inhalte humorvoll vermitteln möchten.

GIF war zunächst für die Animation von einfachen grafischen Icons gedacht. Es gibt kein Audio im Zusammenhang mit einem GIF, aber sie sind immer noch eine leistungsfähige Möglichkeit, um Bewegung in Ihre Online-Kanäle zu bringen. GIF´s können 256 Farben darstellen. Mit Web-Apps wie Kraken.io oder Compressor.io können Bildverkleinerungen vorgenommen werden.

GIF auf einen Blick:

• gut geeignet für Facebook Twitter und Co.
• digitale Form des Daumenkinos
• können bis zu 256 Farben verlustfrei darstellen
• humorvolle Darstellung Ihrer Inhalte möglich

Best Practices für optimierte Bilder und schnelle Ladezeiten

Worauf Sie achten müssen:

• Load übers Netzwerk so klein wie möglich halten
• Vermeiden von Cumulative Layout Shifts
• Schnelle Verfügbarkeit von für den „Largest Contentful Paint“ wichtigen Bildern

In dieser Reihenfolge sollten Sie optimieren:

• Bilder korrekt zuschneiden
• Ladereihenfolge beachten
• Sinnvolle Bildformate und Kompressionsraten verwenden
• Richtig in HTML einbinden

Quick wins:

1. Stellen Sie für alle Varianten Ihres responsiven Designs sinnvolle Bildgrößen bereit! 
2. Verzichten Sie ggf. auf Varianten für Retina-Bildschirme. Die Bilddateien werden um ein vielfaches größer ohne, dass es einen sichtbaren Effekt für die meisten Ihrer Besucher:innen hat.
3. Achten Sie darauf, dass Ihre Bilder Cache-Buster im Dateinamen tragen und mit HTTP-Cache-Header über 30 Tage ausgeliefert werden. Der Browser soll kein Bild zweimal laden müssen!
4. Vermeiden Sie, dass Bilder geladen werden, solange sie sich nicht im sichtbaren Bereich befinden. Polyfills sind nicht mehr nötig: Das native Attribut loading=„lazy“ funktioniert überall.
5. Geben Sie den Webbrowsern Tipps, welche Bilder priorisiert geladen werden sollen. Bilder, die im „Largest Contentful Paint“ liegen, sollten per HTTP-Preload vorgeladen und nicht mit dem Lazy-Attribut ausgestattet werden.
6. Verwenden Sie immer height- und width-Attribute. So kann der Browser den erforderlichen Platz reservieren, auch wenn das Bild noch nicht geladen ist.
7. Schreiben Sie ruhig immer das neu decoding="async" an Ihre Bilder. Der Browser kann sich im Main-Thread auf wichtigere Aufgaben konzentrieren: Zum Beispiel das Layout aufbauen.
8. Der Internet-Explorer ist Ihnen egal? Werfen Sie PNG und JPEG aus Ihren Projekten und verwenden Sie stattdessen WebP. Spielen Sie ruhig auch mal mit den Kompressionsoptionen. Sie werden überrascht sein, wie viel Informationsverlust für das menschliche Auge nicht sichtbar ist.

Pro-Tipp 1:

Wenn ein Bild initial nicht sichtbar ist, kann es vom Browser ganz und gar ignoriert werden. Schauen Sie sich mal die CSS-Eigenschaft content-visibility an. Wenn der Browser die Dimensionen des Bildes ermitteln kann, dann können wir das Rendern des Elements gefahrlos unterdrücken. Dafür verwenden wir:

img[width]:not([width=""])[height]:not([height=""]) { 
    content-visibility: auto; 
}

Pro-Tipp 2:

Wenn Sie es auf die Spitze treiben wollen, können Sie Bildvarianten im AVIF-Format bereitstellen. Die können momentan zwar nur von neueren Chrome-Browsern verarbeitet werden, aber: Google Page Speed Insights verwendet intern die Version 90 und die kann mit AVIF umgehen. So sammeln Sie nebenbei ein paar SEO-Punkte.

Pro-Tipp 3:

Verwenden Sie das Picture-Tag, wenn sich die Bildformate (Ratios) in den unterschiedlichen Breakpoints Ihres responsiven Designs unterscheiden. Noch nicht in die offizielle Spec aufgenommen, aber von Browserherstellern schon weitgehend implementiert: Sie können die width- und height-Attribute nun an das Source-Tag schreiben und CLS vermeiden! 

Fazit

Die Ladegeschwindigkeit Ihrer Website spielt eine immer bedeutendere Rolle. Dabei stellt das richtige Bildformat ein wirkungsvolles Instrument dar, um die Ladezeit so niedrig wie möglich zu halten.

Je nach Bedarf gibt es verschiedene Bildformate, die ihre Vor- und Nachteile mit sich bringen. Ob Sie auf vielversprechende Formate wie AVIF vertrauen, nach denen bereits Global Player wie Netflix Ihre Fühler ausgestreckt haben, oder weiterhin auf die altbekannten Formate wie JPEG und PNG setzen, hängt jeweils vom Anwendungsbereich und Einsatzgebiet ab.

Während sich Logos und Icons mit SVG platzsparend im Responsive Design darstellen lassen, können Sie mit dem Format HEIC hohe Einsparungen bei Bildern vorweisen. GIF ist dagegen das ideale Format für Sie, wenn Sie mit wenig Aufwand Ihre Botschaft auf humorvolle Art nach außen tragen wollen.

Wir selbst setzen aktuell immer öfter in unseren Web-Projekten großflächig auf WebP und haben die Erfahrung gemacht, dass sich dieses Format gut auf die Performance der Websites auswirkt.