Bilddatenformate: JPG, AVIF, PNG, WebP

Dateiformate und Komprimierung von Bildern / Fotos

Hans Dampf für Fotos auf Webseiten ist immer noch JPG – seit nahezu 30 Jahren. AVIF ist ein neues Komprimierungsverfahren, das Fotos bei gleicher Qualität besser komprimiert. Ladezeit ist Trumpf.

18-12-15 SITEMAP

AVIF wurde zuerst von Netflix eingesetzt, aber AVIF ist ein Open-Source-Format. Seit August 2020 wird AVIF von Chrome unterstützt, aber es ist absehbar, dass auch Firefox nicht lang hinterher stehen wird, und auch Apple sich anschließen will (echt jetzt?). Zurzeit setzt Apple allerdings im iPhone auf HEIF. Auch Canon und Sony bringen HEIF in ihre Flaggschiffe als neues Bildformat.

Das AVIF-Bildformat basiert auf dem AV1-Video-Codec, unterstützt Bilder mit mehr als 8 Bit Farbtiefe und speichert HDR.

JPG zu AVIF umwandeln

squoosh.app wandelt JPG mit vielen Einstellungen unter Sichtkontrolle in AVIF um. Mit dem HTML picture-Tag können wir AVIF bereits einsetzen und Google-Usern ein Stück Bandbreite ersparen.

Natürlich kann man nicht die Werte aus dem squoosh.app-Screenshot zu Rate ziehen: Das Original mit 600 KB ist das in höchster Qualität verkleinerte Foto aus der Kamera. Wäre das Foto bereits komprimiert worden, würde eine erneute Komprimierung die Verluste unweigerlich verstärken.

Für Adobe Photoshop gibt es ein AVIF-Plugin, allerdings zurzeit nur für Windows.

Und eine weitere Anwendung für die Umwandlung von Bildformaten in AVIF ist auf dem Weg: https://avif.io von Justin Schmitz & Niksa Sporin.

JPG 74KB bei 35% Qualität
JPG 980 x 735 25% Bildgröße 74KB

Links JPEG , rechts AVIF:
Auflösung 980 x 735
Bildgröße JPEG 126 KB | AVIF 74 KB

Große Fotos, feine Details

Für Fotografen ist eine Ersparnis von rd. 30% gegenüber JPG bei etwa gleicher Qualität noch kein Grund für einen großen Freudentanz, für die Webseite wiegt der Vorteil deutlich stärker. Einen relevanten Vorteil hat AVIF bei feinen Details in hoch auflösenden Bildern. Wie gut ein Foto komprimiert werden kann, hängt auch von der Feinheit der Details und der Schärfe des Fotos ab. Links JPEG , rechts AVIF

Auflösung 1680 x 1052
Bildgröße JPEG 276 KB | AVIF 144 KB

JPG 1680 x 1052 35% Bildgröße JPEG 276KB AVIF 144kb

Die Darstellung im Browser allein darf nicht als Grundlage für den Qualitätsvergleich herangezogen werden: Da spielen die verschiedenen Bildgrößen, die WordPress hier einsetzt, mit ihren eigenen Komprimierungen ebenfalls eine Rolle.

JPEG 1680 x 1052 Komprimierung 35% Progressive
AVIF 1680 x 1052 Komprimierung 35%

WebP hat’s geschafft

Chrome hat schon vor rund 10 Jahren WebP ins Rennen geworfen, das bei Freistellern und Grafik dreifach punktet. Safari hat sich lange geziert und unterstützt WebP erst seit Version 14.
Links JPG 414 KB,
Rechts WebP 216 KB.

Gegenüber PNG spielt WebP seinen Vorteil sichtbar aus, wenn ein transparenter Hintergrund gefordert ist. PNG24 beherrscht zwar einen transparenten Hintergrund – den Freisteller –, aber das Bild wird dabei nicht komprimiert. PNG hat mit Farbmanagement nichts am Hut, während WebP das ICC-Profil des Bildes speichert. Unwichtig? Nein, die Ära das schlichten sRGB geht dem Ende entgegen.

Für Adobe Photoshop gibt es das Plugin WebPShop, um Bilder im webp-Format zu speichern.

Der WordPress-Gutenberg-Editor lädt WebP ohne Murren. Und statt einen Freisteller als PNG24 mit rund 500KB auszuliefern, kommt WebP mit 34KB aus und bringt es auf einwandfreie Farbverläufe. Viele gute Gründe, WebP für Webseiten einzusetzen.

<img loading="lazy" width="600" height="462" src="https://www.mediaevent.de/wp-content/uploads/2021/08/chamaeleon.webp" alt="" class="wp-image-7081" srcset="https://www.mediaevent.de/wp-content/uploads/2021/08/chamaeleon.webp 600w, https://www.mediaevent.de/wp-content/uploads/2021/08/chamaeleon-300x231.webp 300w" sizes="(max-width: 600px) 100vw, 600px">

Wird AVIF akzeptiert werden?

Und wie wird AVIF aufgenommen? Ich werfe mal einen Blick in die Glaskugel: WebP hat sich lange Zeit nur in Nischen gezeigt (neue Bildformate brauchen einfach viele Jahre), alle verbesserten JPEG-Variationen sind dem Vergessen anheim gefallen. Der von Google promotete OGG-Container für Video und Audio hat keine Spuren hinterlassen. Heute wird WebP von WordPress und Twitter unterstützt, die immergrünen Browser spielen mit.

Aber AVIF hat als JPEG-Nachfolger viele Merkmale im Gepäck, auf die Fotografen bei JPEG vergebens gehofft haben:

  • HDR – High Dynamic Range mit 10, 12 und mehr Bit Farbtiefe
  • Verlustfreie und verlustbehaftete Komprimierung
  • Transparenz
  • Farbmanagement: Wide Color Gamut und ICC-Profile

Und da AVIF ähnlich wie das RAW-Format DNG (Digital NeGativ) ein Open Source-Format ist, kann es langfristig gefahrlos eingesetzt werden, um digitale Fotos zu archivieren.

Eine breite Basis wird AVIF finden, wenn die Bildbearbeitungs- und Archivprogramme mitziehen. Darktable, das Open Source-Pendant zu Adobe Lightroom, hat mit der Version 3.2.1 im August AVIF angekündigt.

Nimm zwei: HTML picture-Element

Das HTML picture-Tag bringt unterschiedliche Bildformate unter einen Hut.

<picture>
<source srcset="LEFFE.avif" type="image/avif">
<img loading="lazy" src="LEFFE-no-avif.jpg" width="980" height="735" alt="JPG 980 x 735 25% Bildgröße 74KB">
</picture>

In die WordPress-Mediathek hochladen gehts bislang nur mit WebP, für AVIF gibt es aber schon die ersten Plugins. Ein HTML-Block mit einem picture-Element kann Browsern, die das WebP- / AVIF-Format unterstützen, WebP / AVIF anbieten und allen anderen (IE11 und Safari) mit PNG / JPEG bedienen. HTML picture nimmt auch die Auswahl an alternativen Bildgrößen für die responsive Auslieferung auf.

Oder den einfachen Weg wählen: WebP. AVIF vs WebP auf avif.io

Apple und das iPhone HEIC,Sony und Canon und das Format HEIC

Safari unterstützt AVIF nicht und hat für das iPhone einen eigenen Kopf – sprich ein eigenes Bilddatenformat: HEIC / HEIF. HEIC ist bei gleicher Qualität ebenfalls etwa 40% kleiner als JPEG, beherrscht Transparenz, bis zu 16 Bit Farbtiefe und das Containerformat HEIC für Animationen. Neben dem iPhone können auch die  Canon EOS 1D X Mark III und Sonys R7III das HEIF-Format als Alternative zur bewährten JPG/RAW-Paarung speichern, Samsung-Handys lassen sich in den Kamera-Einstellungen auf das HEIC-Format umgestellt. HEIC / HEIF verspricht dem Fotografen eine verbesserte Dynamik und einen größeren Tonwertumfang.

Anders als bei AVIF fällt für das Encoding eine Lizenzgebühr an, für das Decoding nicht.

iPhones lassen sich in den Einstellungen davon überzeugen, doch lieber JPG zu speichern – ein Konverter ist nicht gefordert (Einstellungen – Kamera – Formate und dann von High Efficiency umstellen auf Maximale Kompatibilität).

HEIC / HEIF hat jetzt bereits eine höhere Reichweite als AVIF und WebP: Es wird von Anwendungen wie Adobe Lightroom unterstützt und kann in Dropbox geladen und dargestellt werden.

Mehr zu Fotos / Grafik auf Webseiten

Externe Quellen

2019-11-16 SITEMAP BLOG