Theoretischer Bilder-Exkurs

Einer der häufigsten Gründe für schlechte Performance sind zu große und schlecht optimierte Bilder. Das Problem wurde noch komplexer, durch Responsives Webdesign, mussten unterschiedliche Bildgrößen für die unterschiedlichen Devices bereit gestellt werden.

Am Anfang war das Pixel

Oft habe ich beobachtet wie 2 Megapixel Fotos als PNGs bereitgestellt oder schon in die Mediatheken des CMS hochgeladen wurden. Ich habe aber auch schon gesehen wie relativ einfache Infografiken mit vollflächigen Farben als JPG eingebunden wurden. Die Folge sind dann unnötig große Bilddateien.

Welches Bildformat ist also das beste? Das hängt vom Grad der Information im Bild ab. Prinzipiell gilt das jedes Pixel eines Bilds eine Information darstellt, im Falle eines JPG Bildes ist es das Mischungsverhältnis aus Rot, Grün und Blau. Das sind drei Farbkanäle mit je 8 Bit (das entspricht dann 256 Farbabstufungen, ergibt eine Farbtiefe von 16.777.216 Farben), in der Summe sind das dann 24 Bit pro Pixel (bei einem PNG mit Alpha-Transparenz addiert sich der Alpha Kanal dazu).

Nehmen wir jetzt einen Screenshot mit 1920 x 1080 Pixel, das macht dann 2.073.600 Pixel. Summiert mit den Bit pro Pixel ergibt, dass dann ca. 50 Millionen Bit, das 6 Megabytes entspricht. Die Menge der Daten, ist in dem Fall nur abhängig von der Anzahl der Pixel, nicht aber von der eigentlichen Bildinformation. Das ist nicht wirklich optimal, womit Kompressionsalgorithmen ins Spiel kommen (die waren vor allem in der Anfangszeit des WWW sehr wichtig). Die heute gebräuchlichsten sind JPEG und PNG.

Bildformate

Ein Kompressionsalgorithmus arbeitet grob gesagt, über die Gruppierung von gleichen Farbpixeln. Also Beispiel wir haben ein Bild mit einem vollflächigen Quadrat mit 200 gleichfarbigen Pixeln. Anstatt 200 Pixel mit je 24 Bit Farbe zu speichern, wird der Farbwert nur einmal gespeichert und dann 200 Pixeln zugewiesen. Im Detail ist das natürlich komplexer und unterscheidet sich je nach Bildformat.

PNG komprimiert im Gegensatz zu JPEG verlustfrei und verfügt über einen Alphakanal. Damit als grobe Faustformel, detailreiche Bilder eher als JPEG und eher simple Bilder oder Freisteller handelt dann PNG. Nur das gilt eben nicht immer, ein detailreiches Bild kann man als JPG kleiner komprimieren, nur kann es dabei sein das einem die ganzen Details verloren gehen. PNGs kann man auch weiter komprimieren, hier wird die Anzahl der möglichen Farben reduziert, also von 24 Bit auf 8 Bit.

Vergleich der Bilder

Erst ein einfaches Beispiel, ein Bild mit 1920 x 1080px, vollflächig mit einer Farbe ausgefüllt. Es macht keinen Unterschied, welche Farbe gewählt wird, die hat keinen Einfluss auf die Größe des Bilds, dafür die Wahl des Bildformats und der Kompression oder Bitrate.

Format	Qualität	Größe
PNG	24 Bit	39 KB
PNG	8 Bit	0,3 KB
JPEG	100%	59 KB
JPEG	80%	34 KB

Man muss JPG schon komprimieren, damit es auf das Niveau von PNG24 kommt, bis man auf PNG8 konvertiert. Erweitern wir das Beispiel um einige Elemente.

Format	Qualität	Größe
PNG	24 Bit	40 KB
PNG	8 Bit	1,3 KB
JPEG	100%	118 KB
JPEG	80%	67 KB

Sieger ist hier eindeutig PNG sowohl mit 24 wie 8 Bit, während JPEG das nachsehen hat. Machen wir das ganze etwas moderner mit Gradienten und Schatten.

Format	Qualität	Größe
PNG	24 Bit	655 KB
PNG	8 Bit	71,3 KB
JPEG	100%	438 KB
JPEG	80%	82 KB

Solche Bild-Assets sind eindeutig die Stärke von JPEG, während PNG erst in der 8 Bit Variante punkten kann. Das war ein relativ einfaches Beispiel, sehen wir uns jetzt an wie sich ein Screenshot einer Web UI verhalten würde.

Format	Qualität	Größe
PNG	24 Bit	244 KB
PNG	8 Bit	72,6 KB
JPEG	100%	365 KB
JPEG	80%	170 KB

Im Gegensatz zum vorherigen Beispiel gewinnt hier wieder PNG. Bei der Menge an Bilddetails muss man bei JPEG die Kompression hochschrauben, um die Datenmenge annähernd auf das Niveau von PNG zu bringen. Mit dem Preis das die Bilddetails drunter leiden, schnell wirken solche Screenshots verwaschen oder unscharf. Im Gegensatz dazu ein Foto einer Landschaft.

Format	Qualität	Größe
PNG	24 Bit	4,1 MB
PNG	8 Bit	1,1 MB
JPEG	100%	2,5 MB
JPEG	80%	724 KB

In einem Foto befinden sich viele unterschiedliche Details, womit der PNG Kompressionsalgorithmus leichte Probleme hat, im Gegensatz zu JPEG. Einige dieser Details sind recht Kontrastarm und damit schwer mit dem menschlichen Auge zu erfassen und dort setzt die Kompression an. PNG8 könnte ein Ansatz sein, aber muss damit rechnen das die Farbtreue darunter leiden wird.

Andere Bildformate

Die oberen Beispiele sollten aufzeigen, das es sich schon lohnen kann, genauer hinzuschauen. Im Zweifel muss man einfach ausprobieren ob das Bild unter PNG oder JPG kleiner geworden ist, dabei aber nie den visuellen Eindruck im Auge behalten. Aber es muss nicht bei den beiden Formaten enden.

Für "einfache" Grafiken (z.B. Logos, Infografiken) die man sonst als PNG exportiert hat (z.b. Logos), kann es durchaus lohnenswert sein, SVG zu verwenden. Einer der Vorteile, das Asset ist unabhängig von der Auflösung und Pixeldichte des Displays. Es skaliert ohne Qualitätsverlust, die Dateigröße bleibt dabei immer die gleiche. Ein anderer Vorteil, man kann SVGs per CSS manipulieren. Statt eines Logos in mehreren Varianten zu exportieren (z.b. Mehrfarbig, dann Monochrom helle und dunkle Variante), existiert nur eine Version die nachträglich mit CSS modifiziert wird. Und ja man kann SVGs auch animieren.

Im Bereich JPEG hat sich in den letzten Jahren auch einige Alternativen herausgebildet, die aber vorwiegend an der Adaption gescheitert sind. Bis Google das WebP Format in Umlauf gebracht hat. WebP komprimiert in der Regel besser als JPEG (ca. 30%), bietet dabei aber die bessere Bildqualität. Von IE11 und Safari < 14 abgesehen, kann man das Format auf allen aktuellen Browsern verwenden.

Damit aber nicht genug, AVIF macht sich auf um WebP abzulösen. Forciert wurde das Open Source Bildformat diesmal nicht alleine von Google, sondern aus einer Allianz bestehend aus Branchengrößen wie Google, Netflix, Apple, Mozilla und vielen anderen. Das verspricht zumindestens eine breitere und schnellere Adaptionsrate. AVIF schafft im Gegensatz zu WebP bis zu 50% Kompression, bei bessere Bildqualität als JPEG. Dazu gesellt sich noch ein Alpha Kanal, Unterstützung von High-Dynamic-Range-Images (HDR) und Animationen. Aktuell Nutzbar mit Chrome 85+ und Firefox 77+ mit gesetzter Feature Flag.