Moderne Bildformate und Best Practices für schnelle Ladezeiten

Der durchschnittliche Besucher einer Website wartet maximal drei Sekunden, bevor er die Seite wieder verlässt. Obendrein haben Ihre Interessent:innen, die immer mehr auf Ihren Smartphones und Tablets nach Inhalten suchen, meist nur ein beschränktes Datenvolumen zur Verfügung. Das kann gerade bei großen Websites, die viele Bilder beinhalten, schnell zum Problem werden. Unter anderem aufgrund dieser Tatsachen gibt Google klare Hinweise, dass die Ladezeit Ihrer Webseite eine immer wichtigere Rolle spielen wird. Dabei stellt das richtige Bildformat eine echte Geheimwaffe dar, um die Ladezeit Ihrer Seite so niedrig wie möglich zu halten und die User-Experience Ihrer Nutzer:innen zu verbessern.

Frau sitzt am Laptop und tippt
Moderne Bildformate (Christin Hume - Unpslash)

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 JPG sind es bei der verlustbehafteten Variante sogar bis zu 34 Prozent.

Beide Versionen unterstützen verlustfreie Transparenz, Animationen und einen Alpha-Kanal, welcher ebenfalls deutlich weniger Speicherplatz benötigt als beispielsweise PNG. Beim Alpha-Kanal handelt sich um einen Kanal, der in Rastergrafiken die Durchsichtigkeit der einzelnen Pixel speichert und eine erhöhte Transparenz der Bilder gewährleistet. Durch eine bessere Transparenz und einer RGB-Farbpalette muss sich auch GIF dem neuen Format geschlagen geben. Bei einer Umwandlung von GIF-Bilder in das WebP-Format können bis zu 60 Prozent und mehr eingespart werden.

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
  • frei von Lizenzgebühren
  • bereits von Global Playern erprobt
  • könnte neues Standardformat werden

SVG - Für sparsame Vektorgrafiken

Anders als bei Pixelgrafiken, bei denen für jeden Bildpunkt ein Farbwert abgespeichert wird und die Kombination aller Punkte und Farben ein Bild ergibt, erfolgt dies bei SVG über Vektorgrafiken. 

Das bedeutet, dass die Bildpunkte nicht als Matrizen, sondern als Entfernungen berechnet werden. Ein Bild wird in SVG also aus deklarierten Formen und Kurven und nicht aus Pixeln gezeichnet.

Dadurch müssen nicht so viele Informationen gespeichert und beliebig skaliert werden. Jedoch sind die Grafiken in der Farb- und Schattendarstellung sowie im Detaillerungsgrad stark eingeschränkt. 

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, Interaktionen 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

JPG - Der Klassiker für fotorealistische Bilder

JPG-Dateien gehören neben PNG, TIF 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 JPG-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 JPG 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 JPG-Dateien (in der Urform) keine Transparenz. Wenn Sie also mit durchsichtigen Bereichen arbeiten möchten, sind die Bildformate TIF, GIF und PNG besser geeignet. 

Mit einer besseren Komprimierungsrate bei gleichbleibender Qualität und bis zu 256 Farbkanälen, die verschiedene Farbprofile wie RGB und CMYK 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.

JPG 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. Wie beim GIF-Format können aber auch Animationen damit umgesetzt werden.

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. Wie das GIF ist PNG verlustfrei, sodass während der Komprimierung keine Daten verloren gehen.

Das Rastergrafikformat 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:

  • eines der bekanntesten verlustfreien Grafikformate im Internet
  • unterstützt Transparenz
  • beliebtes Rastergrafikformat für Webdesigner
  • geeignet für statische Bilder und Animationen

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 Daumenkinos und 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. GIFs bieten in der ursprünglichen Version 256 Farben. 

Zudem sparen GIF-Dateien Speicherplatz. Sie ermöglichen eine verlustfreie Kompression der Bilder. Die maximale Bildgröße beträgt 65.535 x 65.535 Pixel.

GIF auf einen Blick:

  • verlustfreie Kompression
  • digitale Form des Daumenkinos
  • unterstützen bis zu 256 Farben
  • 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. 



 

Wir sind MOGIC,

eine Digitalagentur mit rund 30 Mitarbeiter*innen aus Leipzig. Wir lösen digitale Herausforderungen, seit über 20 Jahren - für Ihr Unternehmen, Startup oder Institution. Wir entwickeln und betreiben Websites, Online-Portale, Online-Shops, webbasierte Softwarelösungen und mobile Apps. Wir sind MOGIC - wir gestalten digital.

MOGIC Geschäftsleitung

Geschäftsleitung: Matthias Hennig, Stefan Berger und Gunter Schwarz

Bereit für eine kostenlose Erstberatung oder einfach einen ersten Kaffee?

Nehmen Sie ganz unverbindlich Kontakt zu uns auf.

Vielen Dank für Ihre E-Mail. In der Regel erhalten Sie innerhalb von 24 Stunden Rückantwort von uns.
Die E-Mail wurde nicht versendet. Bitte versuchen Sie es erneut.

Rufen Sie uns gern an unter +49 341 656797-0 oder vereinbaren Sie einen Termin direkt in unserem Kalender.

Wir verwenden Ihre persönlichen Daten ausschließlich zur Bearbeitung Ihrer Anfrage. Weitere Informationen finden Sie in der Datenschutzerklärung.
BVMW
TYPO3 Gold Member
Deutscher Mittelstands-Bund (DMB)