Stellen Sie sich das vor: das beste Bildformat für das Web im Jahr 2019

JPEG, WEBP, HEIC, AVIF? Dieser Leitfaden hilft Ihnen bei der Auswahl.

Nach Jahrzehnten der unübertroffenen Dominanz von JPEG sind in den letzten Jahren neue Formate aufgetaucht - WebP und HEIC -, die diese Position in Frage stellen. Sie werden von den Hauptakteuren von Webbrowsern und mobilen Betriebssystemen nur teilweise, aber erheblich unterstützt. Ein weiteres neues Bildformat - AVIF - wird voraussichtlich 2019 in die Szene eintreten und verspricht, das gesamte Web zu durchsuchen.

In diesem Artikel beginnen wir mit einer kurzen Überarbeitung der klassischen Formate, gefolgt von einer Beschreibung von WebP und HEIC / HEIF. Wir werden uns dann mit AVIF befassen und mit einer Zusammenfassung enden, in der alle wichtigen Punkte zusammengefasst sind.

Kommentare zu Vor- und Nachteilen basieren sowohl auf der Überprüfung der verfügbaren maßgeblichen Berichte als auch auf Beobachtungen aus erster Hand bei der Entwicklung und Bereitstellung von Tools für Pipelines zur Bildoptimierung in E-Commerce-Workflows.

Klassische Bildformate für das Web mit universeller Unterstützung

Erinnern wir uns in chronologischer Reihenfolge an die drei wichtigsten klassischen Formate für Webbilder.

GIF

GIF unterstützt verlustfreie LZW-Komprimierung und mehrere Frames, mit denen wir einfache Animationen erstellen können.

Die Hauptbeschränkung dieses Formats besteht darin, dass es auf 256 Farben beschränkt ist. Dies war schon in den späten 80er Jahren sinnvoll, da die gleiche Einschränkung für vorhandene Displays galt. Mit der Verbesserung der Anzeigetechnologie wurde jedoch deutlich, dass es nicht geeignet war, glatte Farbverläufe zu reproduzieren, wie sie in fotografischen Bildern zu finden sind. Wir können die Farbstreifen, die es erzeugt, leicht erkennen.

GIF ermöglicht jedoch eine leichte Animation mit universeller Unterstützung. Diese Funktion hat das Format bis heute in Anwendungsfällen am Leben erhalten, die nicht empfindlich auf Qualitätsprobleme reagieren. Am typischsten sind kleine animierte Bilder mit wenigen oder keinen Farben.

JPEG

Der König der Bildformate für das Web wurde entwickelt, um Workflows für die digitale Fotografie zu unterstützen.

Mit einer üblichen Tiefe von 24 Bit bietet es eine weitaus höhere Farbauflösung (nicht zu verwechseln mit Reichweite oder Farbumfang), als das menschliche Auge erkennen kann. Es unterstützt die verlustbehaftete Komprimierung, indem bekannte Mechanismen des menschlichen Sehens ausgenutzt werden.

Unsere Augen reagieren empfindlicher auf mittlere Schuppen als auf feine Details. Infolgedessen können wir mit JPEG feine Details (hohe Ortsfrequenzen) um einen Betrag verwerfen, der durch einen Qualitätsfaktor gesteuert wird. Weniger Qualität bedeutet, dass weniger Details erhalten bleiben. Außerdem reagieren wir viel empfindlicher auf Details mit hohem Luminanzkontrast als auf Details mit nur chromatischem Kontrast.

Daher codiert JPEG RGB-Bilder (Rot, Grün und Blau) intern in einer Luminanz und zwei Chroma-Kanälen neu. Dies ermöglicht es uns, die Chroma-Unterabtastung zu verwenden, um mehr Details nur in den Chroma-Kanälen zu verwerfen. Es ist erwähnenswert, dass JPEG Bilder in Blöcken von 8 x 8 Pixel codiert.

Wenn wir den Qualitätsfaktor reduzieren und / oder eine aggressivere Chroma-Unterabtastung anwenden, treten zunehmend Artefakte wie Klingeln, Lichthöfe, Blockieren oder Unschärfe auf. Ein Problem mit JPEG ist, dass Artefakte je nach Bildinhalt bei unterschiedlichen Qualitätsfaktorwerten auftreten können. Der wildeste Unterschied zeigt sich beim Vergleich der Auswirkungen auf die natürliche Fotografie mit den Auswirkungen auf die Grafik. Da Kunstwerke (Formen, Schriftarten) normalerweise auf scharfen Kanten beruhen, entstehen Artefakte, selbst wenn kleine Detailmengen verworfen werden.

Bei Fotos reduziert JPEG das Dateigewicht leicht um den Faktor 10 mit kaum wahrnehmbaren Artefakten im Vergleich zur verlustfreien Komprimierung.

PNG

Dieses verlustfreie Grafikformat wurde entwickelt, um GIF zu ersetzen und die Probleme mit Farbstreifen (und Lizenzen) zu lösen. Es wurde für Bilder mit einer beträchtlichen Menge an Grafiken benötigt, für die JPEG selbst bei minimalen Komprimierungsraten große Artefakte erzeugte.

Es unterstützt Transparenz und eine verbesserte Komprimierung im Vergleich zu GIF. Da keine Informationen verworfen werden, erzeugt PNG keine Artefakte. Dies geht natürlich zu Lasten eines höheren Bildgewichts bei Vorhandensein vieler verschiedener Farbverläufe im Vergleich zu einer verlustbehafteten Komprimierung.

Es gelingt ihm, ein häufiges Merkmal von Kunstwerken auszunutzen: Im Gegensatz zur Fotografie - die ein Kontinuum von Farben mit subtilen Variationen aufweist - weisen Kunstwerke normalerweise nur wenige genau definierte Farben auf.

PNG komprimiert Bilder, indem große Pixelmengen einer einfachen diskreten Palette zugeordnet werden und dadurch viele Bits gespeichert werden. Im Vergleich zu GIF bietet es eine viel höhere Qualität mit normalerweise weitaus weniger Bytes.

Newcomer mit teilweiser Unterstützung: WEBP und HEIC basierend auf HEVC

Mechanismen, die von Video-Codecs zum Komprimieren von Streams verwendet werden, können in zwei Haupttypen eingeteilt werden: Inter-Frame und Intra-Frame. Während der erste die Redundanzen im Laufe der Zeit ausnutzt, konzentrieren sich Intra-Frame-Mechanismen darauf, die Redundanz innerhalb eines bestimmten Frames zu reduzieren, ohne vom Rest abhängig zu sein. Dieser Komprimierungsmechanismus kann auf Standbilder angewendet werden.

Die Explosion des Video-Sharing - mit Mobilfunknetzen im Mittelpunkt - und die stetig steigende Bildschirmauflösung haben die Bemühungen um neue Codierungsstandards vorangetrieben, um die höchstmögliche Effizienz bei der Komprimierung zu erreichen.

Daher entstehen neue Bildformate als Ableitungen der neuen Videokodierungsstandards. Diese neuen Bildformate bieten größere Funktionen als JPEG und versprechen relevante Einsparungen beim Dateigewicht bei verbesserter visueller Qualität.

WEBP

Google hat dieses Format mit dem Ziel entwickelt, ein einziges webfähiges Bildformat bereitzustellen, das alle typischen Anwendungsfälle abdeckt.

Wichtig ist, dass hellere Bilder als JPEG erzielt werden sollen, ohne dass die visuelle Qualität beeinträchtigt wird. Es verwendet komplexere Operationen - wie die Blockvorhersage - und ist eine Ableitung des VP8-Videocodecs. Es unterstützt verlustfreie Komprimierung und ermöglicht im Gegensatz zu JPEG Transparenz und Animationen, die Bilder kombinieren können, die sowohl mit verlustfreier als auch mit verlustbehafteter Komprimierung codiert sind.

Grundsätzlich sollte es als Ersatz für JPEG, PNG und GIF dienen. Ein wichtiger Nachteil war der Mangel an universeller Unterstützung. Bis vor kurzem war WebP auf von Google unterstützte Software wie den Chrome-Browser und Android-native Anwendungen beschränkt.

Mit der Ankündigung, dass Edge und Firefox (ohne iOS Firefox) 2019 die WebP-Unterstützung einführen sollen, gewinnt sie offensichtlich an Bedeutung. Es ist auch erwähnenswert, dass Apple - Safari und iOS - WebP noch nicht unterstützt.

HEIC / HEIF

Dieses Format bringt eine signifikante Entwicklung in zweierlei Hinsicht.

Erstens unterstützt der Dateicontainer den größten Funktionsumfang unter den verfügbaren Bildformaten. Es unterstützt beispielsweise Multi-Frame-Bilder mit Multi-Frame-Komprimierung - eine wichtige Funktion für effiziente HDR-, Multi-Focus- oder Multi-View-Bilder.

Zweitens unterstützt es viele Arten von Nichtbilddaten mit einer bemerkenswerten Flexibilität. Derzeit werden die meisten Bilder, die diesen Container verwenden, mit einer Ableitung für Bilder aus dem H265 / HEVC-Videocodec komprimiert, der entwickelt wurde, um die 4k- und 8k-Auflösungen der Displays der neuesten Generation effizient zu bewältigen. Die HEVC-Codierung umfasst komplexere Vorgänge mit weniger Einschränkungen als JPEG. Es erzielt eine viel höhere Komprimierungseffizienz auf Kosten etwas höherer Codierungszeiten - in Web-Workflows überhaupt kein Problem.

HEIC auf HEVC-Basis wird wie H265 von Apple unterstützt. Es bietet native Unterstützung für iOS und MacOS, wird jedoch - hauptsächlich aufgrund von Patent- und Lizenzproblemen - von den übrigen Plattformen (Android, Windows) nicht unterstützt. Selbst unter MacOS wird dies von Safari nicht unterstützt. iOS-Apps scheinen der einzige brauchbare Anwendungsfall für HEIC im Web zu sein.

Es stellt sich also eine große Frage: Sollten wir WEBP / HEIC-Alternativen und JPEG mit PNG-Versionen als Fallback anbieten?

Schauen wir uns jeden Fall an ...

Soll ich WEBP-Derivate bedienen?

Google behauptet, dass dieses Format viel hellere Bilder als JPEG mit vergleichbarer Qualität erzeugt. Unabhängige Tests haben jedoch gezeigt, dass dieses Ergebnis nicht über verschiedene Qualitätsmaßstäbe hinweg konsistent ist und die Gewichtsreduzierung in den meisten Fällen durch zunehmende Unschärfe ausgeglichen wird.

In unseren eigenen Tests mit E-Commerce-Bildern haben wir Einsparungen bei den Dateien für WebP festgestellt, jedoch zum Preis von mehr Unschärfe und weniger Details. Wir sahen jedoch auch ein geringeres Risiko, Artefakte zu klingeln und zu blockieren, was wir visuell eher als störend als als unscharf betrachten würden.

As WebP lacks support by Apple browsers and operative systems, we do not generally recommend serving WebP derivatives competing with JPEG. Such moves would increase media management complexity with limited benefits.

This situation would change if Apple started supporting WebP.

If this were the case, then the extended feature set of WebP and the lighter images produced may be worth its use, effectively simplifying image management workflows.

To try WebP yourself, a classic tool like ImageMagick is a good option. It makes easy-to-compare image versions with different settings of quality and resolution for both WebP and JPEG. Results can be viewed with Chrome.

# Convert to WEBP quality 60 convert input.jpg -quality 60 output_60.webp # Convert to JPEG quality 60 convert input.jpg -quality 60 output_60.jpg # Convert to WEBP quality 60 and width 450px convert input.jpg -resize 450 -quality 60 output_450_60.webp

Different combinations of quality and resolution will have different effects in each case, as the compression algorithms work differently. So, check your relevant file sizes on several images to get a grasp of the potential savings and the best settings for a given use case.

Should I serve HEIC derivatives?

The advantage of HEIC (over JPEG) is clear. Weight reduction is consistently significant — about 50% — without loss of visual quality. The feature set supported is simply amazing.

The problem again is browser and operative system support.

Given the patent issues of HEVC and the hefty royalties associated, we can expect support to remain restricted to those in the Apple world. Since JPEG is already efficient in compressing images, the 50% of something small might not be worth enough to add complexity to our image processing workflow.

Certain cases using large images, with a major interest in visual quality AND with a large percentage of Apple devices in their user base should consider serving this format.

Performing tests with HEIC is very easy with a Mac. Preview allows us to export an image to HEIC and JPEG with different quality values and different resolutions. You won’t need to run many tests to see the clear and systematic difference between them.

If you want to try something more flexible that may be integrated in a web image processing workflow, GPAC is worth a look.

What about AVIF?

AVIF is the last of our contenders.

Like WebP and HEIC based on HEVC, AVIF is a derivative of the latest efforts in video standards. It also uses HEIF containers and so supports a complete feature set, encompassing all the main formats available. It brings much higher efficiency in compression inherited from the use of AV1 intra-frame coding mechanisms. These advantages make this format compelling.

Another significant advantage comes from the Alliance for Open Media, the large consortium behind its development as a fully open approach, with an open license, free of royalties. Big players like Google, Netflix, Adobe, Mozilla, Microsoft, Facebook and Amazon — major actors in the web graphics and video scene — are backing this new format and making a case for a fast and wide adoption, both in software and hardware. While the stream format was frozen in March 2018 with a reference code available, the first devices with hardware support for AV1 are expected by the end of 2019.

At the time of writing this article, the open source implementation of AV1 available may be still considered experimental and not suitable for production.

Summary

JPEG will remain the king format for general images for web in 2019, and PNG will remain as a default option for images with significant artwork.

The reason? Universal support.

Anything that opens an image will open JPEG or PNG in 2019, just like in previous years and decades! So no doubt that these universal formats will remain in place for some time yet.

The benefits of WebP remain controversial. A clear advantage of WebP is its ability to also replace PNG, potentially simplifying image processing workflows. However, without universal support this advantage vanishes. This may change only if Apple changes their mind and WebP finally gets universal adoption, then it could be used as a replacement for all JPEG, PNG and GIF images.

In contrast, HEIC images based on HEVC do offer clear benefits, especially for large resolutions. If traffic of iOS users is relevant for a website with large heavy images, it may be worth considering serving HEIC alternatives for them, with potential UX improvements, especially for slow mobile connections. Besides speeding up, HEIC assures quality, almost free of the annoying blocking and ringing artifacts that plague aggressive JPEG policies.

Although AVIF is expected for 2019, support and adoption will take time. But for sure, it is an image format to keep under your radar for the near future.

Of course, the use of a cloud service -through an image optimization API or an image optimization plugin- will always remain an easy and straightforward alternative for getting the job done.