Vergleich von neuartigen und bewährten Bildformaten

Beliebte Bildformate wie JPG, PNG und GIF gibt es schon lange. Sie sind relativ effizient und Webentwickler haben viele Optimierungslösungen eingeführt, um ihre Größe weiter zu komprimieren. Die Ära der JPGs, PNGs und GIFs könnte jedoch zu Ende gehen, da neuere, effizientere Bildformate ihren Platz einnehmen wollen.

Wir werden diese neueren Dateiformate in diesem Beitrag untersuchen und analysieren, wie sie im Vergleich zueinander und zu den bisherigen Formaten abschneiden. Wir werden auch Optimierungstechniken behandeln, um die Auslieferung Ihrer Bilder zu verbessern.

Warum brauchen wir überhaupt neue Bildformate?

Abgesehen von der Bildqualität ist der spürbarste Unterschied zwischen älteren und neueren Bildformaten die Dateigröße. Neue Formate verwenden Algorithmen, die Daten effizienter komprimieren, sodass die Dateigrößen viel kleiner sein können. Im Kontext der Webentwicklung bedeuten kleinere Dateien schnellere Ladezeiten, was sich in niedrigeren Absprungraten, mehr Traffic und mehr Konversionen niederschlägt. Alles gute Dinge, die wir oft predigen.

Wie bei den meisten technologischen Innovationen wird die Einführung neuer Bildformate schrittweise erfolgen, da Browser ihre Standards prüfen und übernehmen. In der Zwischenzeit müssen wir als Webentwickler Benutzer mit unterschiedlichem Unterstützungsgrad berücksichtigen. Glücklicherweise ist Can I Use bereits auf dem neuesten Stand und berichtet über die Browserunterstützung für spezifische Bildformate.

Die neuen Sachen

Wenn wir uns in eine neue Ära der Bildformate begeben, werden wir viele Formatoptionen haben. Hier sind einige Kandidaten, die bereits auftauchen und sich als Ersatz für die bestehenden Standardträger positionieren.

WebP

WebP wurde von Google als Alternative zu JPG entwickelt und kann bis zu 80 Prozent kleiner sein als JPGs, die das gleiche Bild enthalten.

Die Browserunterstützung für WebP verbessert sich ständig. Opera und Chrome unterstützen es derzeit. Firefox hat Pläne zur Implementierung angekündigt. Vorerst halten sich Internet Explorer und Safari zurück. Große Unternehmen mit viel Einfluss wie Google und Facebook experimentieren derzeit mit dem Format, und es macht bereits etwa 95 Prozent der Bilder auf der eBay-Homepage aus. YouTube verwendet WebP auch für große Thumbnails.

Wenn Sie ein CMS wie WordPress oder Joomla verwenden, gibt es Erweiterungen, die Ihnen helfen, die Unterstützung für WebP einfach zu implementieren, wie z.B. Optimus und Cache Enabler für WordPress und Joomlas eigene unterstützte Erweiterung. Diese werden Ihre Website für Browser, die das Format nicht unterstützen, nicht beeinträchtigen, solange Sie PNG- oder JPG-Fallbacks bereitstellen. Infolgedessen werden Browser, die die neueren Formate unterstützen, eine Leistungssteigerung erfahren, während andere die Standarderfahrung erhalten. Angesichts der wachsenden Browserunterstützung für WebP ist dies eine großartige Gelegenheit, Latenz zu sparen.

HEIF

High efficiency image files (oder HEIF) tragen eigentlich die Erweiterung HEIC (.heic), was für High Efficiency Image Container steht, aber die beiden Akronyme werden austauschbar verwendet. Anfang dieses Jahres kündigte Apple an, dass seine neuesten Produkte HEIF-Format standardmäßig unterstützen werden.

Neben kleineren Dateigrößen bietet HEIF mehr Vielseitigkeit als andere Formate, da es sowohl Standbilder als auch Bildsequenzen unterstützen kann. Daher ist es möglich, Burst-Fotos, Fokusstapel, Belichtungsstapel, aus Videos aufgenommene Bilder und andere Bildsammlungen in einer einzigen Datei zu speichern. HEIF unterstützt auch Transparenz, 3D und 4K.

Zusätzlich zu Bildern können HEIF-Dateien Bildeigenschaften, Thumbnails, Metadaten und Hilfsdaten wie Tiefenkarten und Audio enthalten. Bildableitungen können dank nicht-destruktiver Bearbeitungsvorgänge ebenfalls gespeichert werden. Das bedeutet, dass Zuschneiden, Drehen und andere Änderungen jederzeit rückgängig gemacht werden können. Stellen Sie sich all Ihre Bildvarianten in einer einzigen Datei vor!

Apple tut alles, um den Übergang so nahtlos wie möglich zu gestalten. Wenn Benutzer beispielsweise HEIF-Dateien mit Apps teilen, die das Format nicht unterstützen, konvertiert Apple das Bild automatisch in ein kompatibleres Format wie JPG.

Zum Zeitpunkt des Schreibens gibt es keine Browserunterstützung für HEIF.

Das Dateiformat bietet dennoch beeindruckende Dateieinsparungen für Video und Bilder. Dies wird immer wichtiger, da unsere Geräte leistungsfähiger werden und höherwertige Bilder und Videos aufnehmen können, was zu einem größeren Bedarf an effizienten Mediendateien führt.

FLIF

Free Lossless Image Format (oder FLIF) verwendet einen Kompressionsalgorithmus, der zu Dateien führt, die 14-74 Prozent kleiner sind als ältere Formate, ohne die Qualität zu beeinträchtigen (d. h. verlustfrei). Daher ist FLIF für jede Art von Bild oder Animation bestens geeignet.

Die FLIF-Homepage behauptet, dass FLIF-Dateien im Durchschnitt 43 Prozent kleiner sind als typische PNG-Dateien. Die folgende Grafik zeigt, wie FLIF im Vergleich zu anderen Formaten in dieser Hinsicht abschneidet.

FLIF nutzt etwas namens meta-adaptive near-zero integer arithmetic coding, oder (passend) MANIAC. FLIF unterstützt auch progressives Interlacing, sodass Bilder sofort nach Beginn des Downloads vollständig erscheinen, was eine weitere Funktion ist, die nachweislich die Absprungrate von Webseiten reduziert hat.

Das Potenzial von FLIF ist sehr spannend, aber es gibt derzeit keine Browserunterstützung und es sieht auch nicht so aus, als ob Browser es derzeit in Erwägung ziehen würden. Während die Ersteller des Formats hart daran arbeiten, native Unterstützung für beliebte Webbrowser und Bildbearbeitungswerkzeuge zu erreichen, können Entwickler auf den FLIF-Quellcode zugreifen und eine Polyfill-Lösung finden, um ihn zu testen.

Die bestehenden Sachen

Wie bereits erwähnt, sind wir wahrscheinlich noch Jahre davon entfernt, dass sich neue Formate vollständig durchsetzen. In einigen Fällen ist es vielleicht besser, bei den bewährten Formaten zu bleiben. Lassen Sie uns die Formate, über die wir sprechen, noch einmal durchgehen und besprechen, warum sie so lange Bestand haben.

JPG

Als Standard für die meisten Digitalkameras und Geräte zum Teilen von Fotos ist JPG das am häufigsten verwendete Bildformat im Internet. W3Techs berichtet, dass fast drei Viertel aller Websites JPG-Dateien verwenden. Ebenso speichern die meisten beliebten Bildbearbeitungsprogramme Bilder standardmäßig als JPG-Dateien.

JPG ist benannt nach der Joint Photographic Experts Group, der Organisation, die die Technologie entwickelt hat; daher wird JPG auch als JPEG bezeichnet. Sie werden diese Akronyme möglicherweise austauschbar verwendet sehen.

Das Format stammt aus dem Jahr 1992 und wurde entwickelt, um die verlustbehaftete Komprimierung von Bitmap-Bildern zu ermöglichen. Verlustbehaftete Komprimierung ist ein irreversibler Prozess, der auf ungenauen Annäherungen beruht. Die Idee war, Entwicklern zu ermöglichen, Kompressionsraten anzupassen, um ihre gewünschte Balance zwischen Dateigröße und Bildqualität zu erreichen.

Das JPG-Format ist großartig für aufgenommene Fotos; wie der Name schon sagt, geht die verlustbehaftete Komprimierung jedoch mit einer Reduzierung der Bildqualität einher. Die Qualität verschlechtert sich jedes Mal weiter, wenn ein Bild bearbeitet und erneut gespeichert wird, weshalb Entwickler angewiesen werden, die mehrfache Größenänderung von Bildern zu vermeiden.

GIF

GIF steht für Graphics Interchange Format. Es verwendet einen Kompressionsalgorithmus namens LZW, der die Bildqualität nicht beeinträchtigt. Das GIF-Format verfügt nicht über die Farbunterstützung von JPG und PNG, hat sich aber dank seiner Fähigkeit, Animationen zu rendern, indem es mehrere Bilder in einer einzigen Datei bündelt, trotzdem gehalten. Bilder, die in einer GIF-Datei gespeichert sind, können nacheinander gerendert werden, um einen kurzen filmähnlichen Effekt zu erzeugen. GIFs können so konfiguriert werden, dass sie Bildsequenzen eine bestimmte Anzahl von Malen anzeigen oder unendlich schleifen.

PNG

Das gute alte Portable Network Graphic (PNG) wurde ursprünglich als Nachfolger des GIF-Formats konzipiert und debütierte 1996. Es wurde speziell für die Darstellung von Bildern im Web entwickelt. In Bezug auf die Popularität ist PNG ein enger Zweiter nach JPG. W3Techs behauptet, dass 72 Prozent der Websites dieses Format verwenden. Im Gegensatz zu JPG sind PNG-Bilder in der Lage, verlustfrei zu komprimieren (was bedeutet, dass keine Bildqualität verloren geht).

Ein weiterer Vorteil gegenüber JPG ist, dass PNG Transparenz und Opazität unterstützt. Da große Fotos im JPG-Format tendenziell besser aussehen, wird das PNG-Format typischerweise für unkomplizierte Grafiken und Illustrationen verwendet.

Wege zur Verbesserung der Bildoptimierung und -lieferung

Es gibt ein paar wichtige Dinge zu beachten, wenn Sie Bilder für das Web optimieren, da jedes Dateiformat – einschließlich der neuen – eine weitere Komplexitätsebene hinzufügen kann. Bilder machen typischerweise den Großteil der Bytes auf einer Webseite aus, daher gilt die Bildoptimierung als leicht erreichbares Ziel zur Verbesserung der Leistung einer Website. Der Google Dev Guide bietet einen umfassenden Artikel zu diesem Thema, aber hier ist eine komprimierte Liste von Tipps zur Beschleunigung Ihrer Bildlieferung.

Unterstützung für neue Bildformate implementieren

Da neuere Formate wie WebP noch nicht universell unterstützt werden, müssen Sie Ihre Anwendungen so konfigurieren, dass sie die entsprechenden Ressourcen für Ihre Benutzer bereitstellen.

Sie müssen erkennen können, welche Formate der Client unterstützt und die beste Option liefern. Im Fall von WebP gibt es einige Möglichkeiten, dies zu tun.

Investieren Sie in ein CDN

Ein Content Delivery Network (CDN) beschleunigt die Auslieferung von Bildern, indem es sie in seinem Netzwerk von Edge-Servern zwischenspeichert. Wenn Besucher Ihre Website besuchen, werden sie zum nächstgelegenen Edge-Server anstatt zum Ursprungsserver geleitet. Dies kann erhebliche Zeitersparnis bringen, insbesondere wenn Ihre Benutzer weit von Ihrem Ursprungsserver entfernt sind.

Wir haben einen ganzen Beitrag zum Thema, um zu verstehen, wie CDNs funktionieren und wie Sie sie für Ihre Projekte nutzen können.

Verwenden Sie CSS anstelle von Bildern

Da ältere Browser keine Bildschatten und abgerundeten Ecken unterstützten, sind erfahrene Webentwickler es gewohnt, bestimmte Elemente wie Schaltflächen als Bilder anzuzeigen. Erinnern Sie sich an die Zeiten, als die Anzeige einer benutzerdefinierten Schriftart das Erstellen von Bildern für Überschriften erforderte? Diese Praktiken sind immer noch verbreitet, aber äußerst ineffizient. Verwenden Sie stattdessen wann immer möglich CSS.

Überprüfen Sie Ihre Bildeinstellungen für den Cache

Für Bilddateien, die sich nicht sehr oft ändern, können Sie HTTP-Caching-Direktiven verwenden, um die Ladezeiten für Ihre Stammbesucher zu verbessern. Auf diese Weise speichert der Browser des Besuchers das Bild beim ersten Besuch Ihrer Website, sodass es bei nachfolgenden Besuchen nicht erneut heruntergeladen werden muss. Diese Praxis kann auch Geld sparen, indem die Bandbreitenkosten reduziert werden.

Natürlich kann unsachgemäßes Caching Probleme verursachen. Das Hinzufügen eines Fingerabdrucks, wie z. B. eines Zeitstempels, zu Ihren Bildern kann helfen, Caching-Konflikte zu vermeiden. Glücklicherweise erledigen die meisten Webentwicklungsplattformen dies automatisch.

Bilder für verschiedene Geräte skalieren

Die Suche nach der besten Möglichkeit, mobile Geräte mit geringerer Bildschirmauflösung zu unterstützen, ist ein fortlaufender Prozess. Einige Entwickler machen sich nicht einmal die Mühe und bieten einfach die gleichen Bilddateien für alle Benutzer an, aber dieser Ansatz verschwendet Ihre Bandbreite und die Zeit Ihrer mobilen Besucher. Ziehen Sie die Verwendung von srcset in Betracht, damit der Browser bestimmt, welche Bildgröße er basierend auf den Abmessungen des Clients liefern soll.

Bildkomprimierungstests

Es ist immer interessant, die Größenunterschiede zu sehen, die jedes Bildformat bietet. Im Fall dieses Artikels vergleichen wir verlustfreie und verlustbehaftete Bildformate. Natürlich ist das keine gängige Praxis, da verlustbehaftete Formate oft kleiner sind als verlustfreie, da die Bildqualität leidet, um eine kleinere Bildgröße zu erzielen.

In jedem Fall sollte die Wahl zwischen verlustfreien und verlustbehafteten Bildformaten davon abhängen, wie bildlastig Ihre Website ist und wie schnell sie bereits läuft. Ein E-Commerce-Shop ist beispielsweise möglicherweise mit einem leicht degradierten Bild zugunsten schnellerer Ladezeiten zufrieden, während eine Fotografen-Website wahrscheinlich das Gegenteil tut, um Talente zu präsentieren.

Um die Größen der sechs in diesem Artikel genannten Bildformate zu vergleichen, begannen wir mit drei JPG-Bildern und konvertierten sie in jedes der anderen Formate. Hier sind die Leistungsergebnisse.

• Bild 1
• Bild 2
• Bild 3

Wie bereits erwähnt, variieren die folgenden Ergebnisse aufgrund von verlustfreien/verlustbehafteten Bildformaten erheblich. Zum Beispiel sind PNG- und FLIF-Bilder beide verlustfrei, was zu größeren Bilddateien führt.

	Größe von Bild 1	Größe von Bild 2	Größe von Bild 3
WebP	1,8 MB	293 KB	1,6 MB
HEIF	1,2 MB	342 KB	1,1 MB
FLIF	7,4 MB	2,5 MB	6,6 MB
JPG	3,9 MB	1,3 MB	3,5 MB
GIF	6,3 MB	3,9 MB	6,7 MB
PNG	13,2 MB	5 MB	12,5 MB

Laut den obigen Ergebnissen waren HEIF-Bilder insgesamt kleiner als jedes andere Format. Aufgrund ihrer mangelnden Unterstützung ist es derzeit jedoch nicht möglich, das HEIF-Format in Webanwendungen zu integrieren. WebP kam auf dem relativ guten zweiten Platz und bietet Möglichkeiten, die weniger als ideale Browserunterstützung zu umgehen. Für Benutzer von Chrome oder Opera beschleunigen WebP-Bilder sicherlich die Auslieferung.

Was die verlustfreien Bildformate betrifft, ist PNG deutlich größer als sein verlustbehaftetes JPG-Gegenstück. Bei Optimierung mit FLIF wurden jedoch Einsparungen von etwa 50 Prozent erzielt. Dies macht FLIF zu einer großartigen Alternative für diejenigen, die hochwertige Bilder mit kleinerer Dateigröße benötigen. Allerdings wird FLIF derzeit noch von keinem Webbrowser unterstützt, ähnlich wie HEIF.

---

Fazit

Die alten Bildformate werden wahrscheinlich noch viele Jahre bestehen, aber mehr Entwickler werden die neueren Formate übernehmen, sobald sie die Vorteile der Größenersparnis erkennen.

Kameras, Mobilgeräte und Gadgets im Allgemeinen werden immer ausgefeilter, was bedeutet, dass die aufgenommenen Bilder und Videos von höherer Qualität sind und mehr Speicherplatz einnehmen. Neue Formate müssen übernommen werden, um dies zu mildern, und es sieht so aus, als hätten wir einige äußerst vielversprechende Optionen vor uns, auch wenn es einige Zeit dauern wird, bis sie offiziell übernommen werden.