Ladezeiten großer Fotos
Früher wurden Bilder auf die Größe von Briefmarken geschrumpft, um die Dateigröße klein zu halten. Heute wollen wir vollformatige Fotos und große Grafiken und kämpfen weiterhin gegen die Dateigröße: Fotos und Grafiken sind die Bremse der Ladezeit und knabbern an der Bandbreite der mobilen Geräte.
Plakative Grafik haben wir viele Jahre lang vorzugsweise als PNG gespeichert, Fotos als JPG. Heute stehen uns zusätzlich WebP und SVG zur Verfügung.
JPEG optimieren
Schon bei moderaten Auflösungen – etwa ab 400 x 300 px – zeigt JPEG selbst bei 40% Qualität noch brillante Farben und kaum sichtbare Artefakte (früher galt noch 75% als Qualitätsfaktor für JPEG). Wenn wir das ICC-Farbprofil speichern, müssen wir AdobeRGB nicht mehr in sRGB transformieren.
Und noch eins oben drauf: JPG wird in zwei Varianten gerendert:
- Baseline oder Grundlinie ist seit Jahr und Tag der Standard. Baseline ist ein Scan des kompletten Fotos von oben nach unten. Bei sehr großen Bildern sehen wir beim Laden der Seite, wie das Bild Block, Block, Block von oben nach unten in Sprüngen geladen wird.
- Progressive ist heute die bessere Wahl. Der Browser kann große Bilder in einem Schwung zuerst in geringerer Qualität (ohne Blocksprünge) darstellen und die Qualität nachladen.
Freisteller – Fotos mit Transparenz – durchsichtigem Hintergrund
Im Laufe der Zeit sind mehr als 40 Variationen von JPEG entstanden, aber Transparenz blieb immer außen vor. Da musste PNG-24 in die Bresche springen. Aber Semitransparenz macht die Datei dick.
PNG-24 mit Transparenz ist eigentlich PNG-32 (nämlich ein verlustfreies Bild mit einem vierten Kanal, dem Alphakanal). Also greifen wir zu image-mask: Foto und Maske getrennt speichern und die Maske per CSS ins Bild setzen.
WebP = JPG + PNG24
WebP kann sowohl Fotos effizient komprimieren und freigestellte Motive mit Alphakanal (Maske oder Schablone) mit einem durchsichtigen Hintergrund speichern. Content Management Systeme wie WordPress unterstützen WebP bereits out-of-the-box, die Social Media haben WebP gnädig aufgenommen. Ja, Photoshop und Open Source-Programme wie Darktable machen bei WebP auch mit.
WebP komprimiert effizienter als JPG und erzielt i.d.R. um 30% kleinere Dateigrößen als JPG bei gleicher Kompressionsstärke. Einen großen Unterschied beobachtet man vor allem bei gleichmäßigen Flächen und Texturen.
Bei mehrfachem Neu-Speichern ist WebP dank einer besseren Prädiktion und variablen Blöcken länger robust, während bei JPG schnell ein Generationsverlust sichtbar wird: Nach zwei drei-maligem Speichern stellt sich eine Kästchenbildung ein – JPG-Artefakte.
Lohnt sich der Umstieg von PNG oder JPG auf WebP?
Gegenüber PNG ist WebP immer der Schmalhans und reduziert i.d.R. die Dateigröße um 30 – 50% bei gleicher Qualität. Dazu speichert WebP auch einen transparenten Hintergrund und ebenfalls das Farbprofil des Bildes.
| jpg | 75% | 44 KB |
| jpg | 40% | 26 KB |
| webp | 75% | 125 KB |
| webp | 30% | 93 KB |
Bei den Vergleichsbildern der Beispiele für JPG und WebP auf dieser Seite werden die WebP-Bilder deutlich größer als die JPG-Varianten. Das liegt am zusätzlichen Alpha-Kanal für die Transparenz, der 33% an Größenzuwachs bringt. Semi-Transparenz – die weichen Schatten im WebP-Bild – lässt sich zudem kaum komprimieren.
- JPG kann ohne sichtbaren Qualitätsverlust stark komprimiert werden, unterstützt aber keine Transparenz
- WebP ohne Transparenz wird meistens kleiner als JPG bei gleicher Qualität
- WebP mit Transparenz wird größer als JPG, aber deutlich kleiner als PNG
Die Wirkung von Mehrfachkomprimierungen
Wer Fotos, Bilder oder Grafiken zu Beiträgen in WordPress oder anderen Content Management System lädt, muss natürlich damit rechnen, dass seine Fotos zweifach und dreifach komprimiert werden: Von der Kamera schon als JPG gespeichert, im Bildbearbeitungsprogramm bearbeitet und erneut beim Speichern komprimiert, in die Mediathek des CMS geladen und wieder dort ein weiteres mal komprimiert.
JPG leider aufgrund seiner Natur stärker unter dem Generationsverlust: Jedes erneute Speichern verschlechtert die Qualität, da immer neu quantisiert wird. Schon nach 2–3 Durchgängen fallen deutliche Artefakte ins Gesicht, besonders in feinen Details wie Blättern, Fell und Haaren oder bei Schrift.
WebP ist etwas robuster. Auch hier gibt es Qualitätsverluste, die aber dank der moderneren Kompression (bessere Prädiktion, variable Blöcke, bessere Farbwiedergabe) weniger ins Auge fallen.
WebP kann auch verlustfrei gespeichert werden. Für den Einsatz auf der Webseite werden die Dateien dabei natürlich zu groß. Aber wir können der Mediathek die verlustfreie Version übergeben – damit fällt ein weiterer Kompressionsgang weg.
| jpg … 2 x mit jeweils 40% Komprimierung | 46 KB |
| webp … 2 x mit jeweils 30 % Komprimierung | 21 KB |
Grafik als SVG
Wenn die Grafik in einem Programm mit SVG-Export angelegt wird, ist SVG (Scalable Vector Graphic) das passende Format. Die meisten Zeichen- und Illustrationsprogramme wie Adobe Illustrator, Inkscape oder Corel exportieren Grafiken als SVG. SVG ist aber auch Klartext wie HTML und kann mit CSS animiert werden.
Mehr zu Bilder in HTML-Seiten
- SVG für Webseiten optimieren – SVG aus dem Grafikbearbeitungsprogramm wie Illustrator oder Inkscape bringt überflüssige Elemente mit, die für die Darstellung auf der Seite nicht gebraucht werden.
- CSS mask-image kann Motive mit harter / weicher Kanten »nicht-destruktiv« freistellen – so können auch JPG-Fotos als Freisteller eingesetzt werden.
- srcset und sizes für HTML img – Bilder in unterschiedlichen Größen responsive ausliefern
