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.

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 schnell anschließen will.

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.

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 zu jubeln, 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 für Grafik

Chrome hat schon vor rund 10 Jahren WebP ins Rennen geworfen, das allerdings eher bei Bildern mit flachen Farben – sprich Grafik – punktet:
Links PNG 14 KB, WebP 9 KB.

JPG 980 x 588 25% Bildgröße 14KB, WebP 9KB

Wird AVIF akzeptiert werden?

Und wie wird AVIF aufgenommen? Ich werfe mal einen Blick in die Glaskugel: Anders als WebP wird AVIF sich schnell durchsetzen, denn dieser JPEG-Nachfolger hat viele Merkmale im Gepäck, auf die Fotografen bei JPEG vergebens gehofft haben:

  • HDR – High Dynamic Range
  • 8, 10, 12 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 geht bei beiden Formaten noch nicht. Nur 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.

Apple und das iPhone HEIC Format HEIC

Safari unterstützt AVIF nicht und hat für das iPhone mal wieder einen eigenen Kopf – sprich ein eigenes Bilddatenformat: HEIC. HEIC ist bei gleicher Qualität ebenfalls etwa 40% kleiner als JPEG, beherrscht Transparenz und Animationen. Neben dem iPhone kann auch die  Canon EOS 1D X Mark III als erste Kamera neben JPEG und Raw auch im HEIC-Format aufnehmen. Für das Encoding fällt 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. Im Gegenteil: Die Konvertierung ist eine erneute Komprimierung und führt zu einer Reduzierung der Bildqualität.

Einstellungen – Kamera – Formate und dann von High Efficiency umstellen auf Maximale Kompatibilität.

Mehr zu Fotos / Grafik auf Webseiten

Externe Quellen

2019-11-16 SITEMAP BLOG