{"id":21967,"date":"2022-01-23T22:08:08","date_gmt":"2022-01-23T21:08:08","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=21967"},"modified":"2023-08-06T21:39:41","modified_gmt":"2023-08-06T19:39:41","slug":"neue-bildformate-im-vergleich","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/01\/23\/neue-bildformate-im-vergleich\/","title":{"rendered":"Neue Bildformate im Vergleich"},"content":{"rendered":"\n

Bilder und andere Medienelemente gelten im Internet heute als selbstverst\u00e4ndlich. Wie aus dem HTTP Archive hervorgeht, generieren 99,9% aller Webseiten mindestens eine Anfrage f\u00fcr eine Bildressource und 95,9% enthalten mindestens ein <img>-<\/code>Element [1<\/a>]. Die restlichen 4% entfallen beispielsweise auf Favicons und Hintergrundbilder.<\/p>\n\n\n\n

F\u00fcr die breite Verwendung von Bildern gibt es gute Gr\u00fcnde: Sie transportieren Informationen schneller als Text, lockern das Layout auf und regen Nutzer zu mehr Interaktion an [2<\/a>]. Wie Abbildung 1 veranschaulicht, schl\u00e4gt sich dies auch im Anteil von Medienelementen an der gesamten Gr\u00f6\u00dfe einer Webseite (Page Weight) nieder [3<\/a>]. So machen Bilder, Animationen und Videos durchschnittlich zwei Drittel des gesamten Page Weights aus \u2013 und selbst im zehnten Perzentil nehmen sie noch einen Anteil von etwa 44% ein.<\/p>\n\n\n\n\n\n\n\n

\"\"<\/a>
Abbildung 1: <\/strong>Anteil von Medienelementen am gesamten Page Weight. Eigene Darstellung in Anlehnung an [4<\/a>].<\/figcaption><\/figure>\n\n\n\n

Folglich ist die Bedeutung von Bildern f\u00fcr Webseiten immens \u2013 doch sie bringen auch Herausforderungen mit sich [5<\/a>]. Zu diesen geh\u00f6rt, dass Bilder allein durch ihren gro\u00dfen Anteil am Page Weight einen negativen Einfluss auf die Performance haben k\u00f6nnen. Es ist demnach essenziell, Bildinhalte zu optimieren, die Dateigr\u00f6\u00dfe zu reduzieren und gleichzeitig ein gutes Nutzererlebnis zu gew\u00e4hrleisten [5<\/a>]. Es gibt mehrere Stellen, an denen angesetzt werden kann, um dies zu erreichen. Ein sehr zentraler Punkt ist dabei die Wahl des richtigen Dateiformats und des damit einhergehenden Kompressionsverfahrens.<\/p>\n\n\n\n

Allgemeine, verlustfreie Kompressionsverfahren wie Gzip, LZW und LZMA sind weit verbreitet [2<\/a>]. Sie basieren auf dem Prinzip, Wiederholungen zu finden und diese in einer kompakteren Form zu repr\u00e4sentieren. Damit eignen sie sich beispielsweise gut f\u00fcr Textdateien. Eine unver\u00e4nderte Anwendung dieser Kompressionsverfahren auf Bilder ist jedoch meist nicht zielf\u00fchrend. Um hier einen Erfolg, also eine Reduzierung der Dateigr\u00f6\u00dfe zu erzielen, m\u00fcssten sehr viele Pixel denselben Farbwert haben. Das ist aber insbesondere bei fotorealistischen Bildern nur sehr selten der Fall. Aus diesem Grund wurden f\u00fcr Bilder schon fr\u00fch eigene Verfahren und Formate entwickelt und standardisiert.<\/p>\n\n\n\n

Im ersten Teil des Artikels soll ein \u00dcberblick \u00fcber Bild- bzw. Grafikformate gegeben werden, die sich im Web schon seit vielen Jahren etabliert haben. Das bildet die Grundlage f\u00fcr den darauffolgenden Teil<\/a>, in dem f\u00fcnf moderne Grafikformate vorgestellt und erl\u00e4utert werden. Diese stehen im Fokus dieses Artikels und werden anschlie\u00dfend anhand diverser Kriterien verglichen<\/a>, bevor abschlie\u00dfend ein Fazit<\/a> gezogen wird.<\/p>\n\n\n\n

Etablierte Bildformate im Web<\/h2>\n\n\n\n

Bekannte Bildkompressionsverfahren bzw. Grafikformate sind etwa JPEG, PNG und GIF. Eine Statistik des HTTP Archive aus dem Jahr 2021 zeigt, dass diese auch im Web noch immer die am h\u00e4ufigsten verwendeten Formate sind. Wie in Abbildung 2 dargestellt, nehmen sie gemeinsam einen Anteil von \u00fcber 86% ein:<\/p>\n\n\n\n

\"\"<\/a>
Abbildung 2:<\/strong> Anteil der einzelnen Bildformate an den Bildern im Web. Eigene Darstellung in Anlehnung an [1<\/a>].<\/figcaption><\/figure>\n\n\n\n

Da sie nach wie vor eine gro\u00dfe Rolle spielen und zudem eine gute Grundlage f\u00fcr Vergleiche mit neueren Formaten sind, sollen JPEG, PNG, GIF und SVG im Folgenden kurz vorgestellt werden. Einen \u00dcberblick \u00fcber ihre wesentlichen Eigenschaften zeigt Tabelle 1:<\/p>\n\n\n\n

\"\"<\/a>
Tabelle 1: <\/strong>Vergleich der Formate JPEG, PNG, GIF und SVG. Eigene Darstellung in Anlehnung an [2<\/a>; 5<\/a>; 6<\/a>; 7<\/a>; 8<\/a>].<\/figcaption><\/figure>\n\n\n\n

Die drei Formate werden jeweils f\u00fcr unterschiedliche Zwecke eingesetzt [5<\/a>]. JPEG, das wohl meistverwendete Bildformat weltweit, ist ein verlustbehaftetes Format, das sich haupts\u00e4chlich f\u00fcr Fotos eignet. Es unterst\u00fctzt keine Transparenzen oder Animationen und nur wenige Decodierer sind in der Lage, Bilder mit einer Farbtiefe von \u00fcber 8 Bit pro Kanal zu verarbeiten.<\/p>\n\n\n\n

PNGs eignen sich durch ihre Kombination aus verlustfreier Kompression und hoher Farbtiefe gut f\u00fcr Grafiken, Illustrationen, Logos oder Screenshots. Sie k\u00f6nnen optional auch indiziert (mit max. 256 Farben) oder im Grayscale-Modus gespeichert werden.<\/p>\n\n\n\n

GIF dagegen ist haupts\u00e4chlich f\u00fcr Animationen bekannt und kommt eher selten f\u00fcr andere Dinge zum Einsatz [2<\/a>; 5<\/a>]. Jedes Frame der Animation wird dabei wie ein separates Bild behandelt und ist Teil der gesamten GIF-Datei. Dies hat den Nachteil, dass animierte GIFs oft zu gro\u00dfen Dateien f\u00fchren.<\/p>\n\n\n\n

Alle bislang vorgestellten Bildformate sind rasterbasiert. Sie haben den Nachteil, dass sie nur eingeschr\u00e4nkt skalierbar sind und die Dateigr\u00f6\u00dfe sp\u00fcrbar ansteigt, wenn die Bildgr\u00f6\u00dfe zunimmt [2<\/a>]. Diese Einschr\u00e4nkungen bestehen bei SVG nicht. SVG ist ein XML-basiertes Vektorbildformat, mit dem zweidimensionale Grafiken realisiert werden k\u00f6nnen. Durch mathematische Ausdr\u00fccke wird beschrieben, wie ein Bild bzw. eine Grafik aufgebaut ist. Zudem kann auf SVGs CSS und JavaScript angewendet werden, was das \u00c4ndern von Farben oder das Hinzuf\u00fcgen von Interaktivit\u00e4t und Animationen erm\u00f6glicht [5<\/a>; 7<\/a>]. Da das Format von allen modernen Browsern unterst\u00fctzt wird und selbst bei geringer Bandbreite scharfe Vektorgrafiken in beliebiger Gr\u00f6\u00dfe liefert, hat es sich f\u00fcr diesen Anwendungsfall zum De-Facto-Standard entwickelt. Es eignet sich jedoch nicht zum Speichern rein fotografischer Inhalte.<\/p>\n\n\n\n

Neue Bildformate<\/h2>\n\n\n\n

Obwohl die vier eben vorgestellten Bildformate im Web einen Anteil von 91,1% ausmachen und damit zweifellos eine gro\u00dfe Rolle spielen, sind sie oft nicht mehr die beste Wahl [1<\/a>; 2<\/a>]. Schon seit \u00fcber zehn Jahren gibt es eine Reihe neuer rasterbasierter Formate, die im Web sehr n\u00fctzlich sein k\u00f6nnen. Zu diesen geh\u00f6ren unter anderem WebP, HEIF\/HEIC, FLIF, AVIF und JPEG XL [2<\/a>; 5<\/a>]. Im Folgenden soll auf die Eigenschaften und St\u00e4rken der f\u00fcnf eben aufgez\u00e4hlten Bildformate eingegangen werden.<\/p>\n\n\n\n

WebP<\/h3>\n\n\n\n

Das meistverwendete neue Bildformat im Web ist WebP \u2013 im Jahr 2021 nahm es einen Anteil von 6,9% ein [1<\/a>]. WebP wurde von Google entwickelt und erstmals 2010 ver\u00f6ffentlicht \u2013 es ist damit das \u00e4lteste der vorgestellten neuen Bildformate [9<\/a>]. Neben verlustbehafteter unterst\u00fctzt das Format auch verlustfreie Kompression und Animationen [5<\/a>; 10<\/a>].<\/p>\n\n\n\n

Die verlustbehaftete Kompression basiert auf dem VP8-Videocodec [10<\/a>]. Durch diverse Unterschiede und Vorteile im Vergleich zur JPEG-Kompression erm\u00f6glicht sie durchschnittlich 25\u201334% kleinere Dateien als JPEG bei gleicher oder besserer Qualit\u00e4t. Beim Speichern von Bildern in niedriger Qualit\u00e4t hat WebP zudem den Vorteil, dass keine oder deutlich weniger starke Blockartefakte zu erkennen sind als bei JPEG [5<\/a>].<\/p>\n\n\n\n

Auch die verlustfreie Speicherung mit WebP f\u00fchrt zur Dateneinsparung gegen\u00fcber herk\u00f6mmlichen Formaten. So ist ein WebP-Bild durchschnittlich 26% kleiner als ein PNG und auch die Ladezeit ist k\u00fcrzer [5<\/a>; 10<\/a>]. Dennoch ist die verlustbehaftete Variante im Web meist die bessere Wahl.<\/p>\n\n\n\n

WebP unterst\u00fctzt 8-Bit-Transparenzen und ist auch eine gute Alternative zu animierten GIFs [10<\/a>]. Konvertiert man letztere in WebP-Dateien, k\u00f6nnen bei der verlustbehafteten Variante 64% und bei der verlustfreien Variante 19% der urspr\u00fcnglichen Dateigr\u00f6\u00dfe eingespart werden.<\/p>\n\n\n\n

Seit einiger Zeit ist mit WebP 2 auch eine Nachfolgeversion des Formats in Arbeit [11<\/a>]. Bislang befindet es sich allerdings in der Entwicklungsphase und ist deshalb noch nicht f\u00fcr den allgemeinen Gebrauch bereit.<\/p>\n\n\n\n

HEIF und HEIC<\/h3>\n\n\n\n

HEIF steht f\u00fcr High Efficiency Image File Format <\/em>und wurde von der Moving Picture Experts Group (MPEG) entwickelt [12<\/a>]. Die technische Spezifikation wurde 2015 fertiggestellt; zwei Jahre sp\u00e4ter wurde das Format in iOS integriert [5<\/a>]. HEIF ist ein Containerformat \u2013 eine Art Wrapper, die eine Vielzahl an Datentypen enthalten kann, welche von standardisierten Codierern komprimiert werden. Beispiele daf\u00fcr sind etwa AVC und HEVC.<\/p>\n\n\n\n

HEVC, auch bekannt als H.265, ist ein leistungsstarker, patentierter Videocodierungsstandard [5<\/a>; 12<\/a>]. HEIF-Dateien, die HEVC-codierte Bilder enthalten, werden auch als HEIC-Dateien bezeichnet. Sie sind nur etwa halb so gro\u00df wie JPEGs \u2013 und das bei gleicher oder besserer Qualit\u00e4t.<\/p>\n\n\n\n

HEIC-Dateien unterst\u00fctzen Transparenzen, eine maximale Farbtiefe von 16 Bit pro Kanal sowie verlustbehaftetes und verlustfreies Speichern von Bildern [5<\/a>]. Dar\u00fcber hinaus k\u00f6nnen sie unter anderem folgende Daten beinhalten:<\/p>\n\n\n\n