Optimale Bilder für Webseiten

Bilder, da sie aus unzähligen Pixeln mit Farb und Lichtwerten bestehen, sind ein mächtiges Werkzeug für die Nachrichtenvermittlung auf einer Webseite. Gleichzeitig aber auch eine Belastung für die Geschwindigkeit beim Laden einer Webseite und kein Besucher wartet gerne. Bei Google’s Speed Matters Vol. 3 werten Benutzer die Geschwindigkeit einer Seite mit 75% als wichtigstes Merkmal. 

Für das schnelle Laden von (grossen und qualitativ hochwertigen) Bildern gibt es verschieden Punkte zu beachten:

1. Das richtige Bildformat wählen. Heutzutage sind folgende Formate fast uneingeschränkt unterstützt (Aber es sind möglicherweise nicht die besten. Bessere Alternative werden weiter unten beschrieben.)
   • JPEG für Photographien ohne Transparenz
   • PNG für transparente Bilder, welche die Qualität auch beim Verkleinern nicht verlieren, dafür auch beim Komprimieren/Verkleinern grösser sind als z.B. JPEG
   • SVG für Grafiken, da sie beliebig skaliert werden können. Siehe diesen Artikel für das richtige SVG Format zum Einbau in die Webseite. Diese sind nicht für photographischen oder anderen Raster basierten Inhalt gedacht.
2. Die Bilder im richtigen Moment laden. Sobald der Besucher die Webseite aufruft, müssen nicht gleich alle Bilder geladen werden, da die meisten noch (lange) nicht in Sichtweite sind. Um nicht relevante Bilder erst später zu laden, und damit Zeit zu sparen, braucht es das sogenannte “lazy-loading”, auf Deutsch langsames oder faules Laden: Das sagt dem Browser, dass er Bilder, die weiter unten sind, erst später laden soll, um die Webseite bzw. die sichtbaren Inhalte dem Besucher schneller zeigen zu können. 

Um die Leistung und speziell die Schnelligkeit zu messen, gibt es verschiedene Werkzeuge und Webseiten wie z.B. web.dev bei welchen für den Test nur die URL einer Webseite nötig ist.

Die meisten, so auch web.dev, sind auf Lighthouse, ein frei verfügbares Werkzeug, aufgebaut. Darum werde ich mich bei den Erklärungen unten auf Lighthouse und dessen Funktionalitäten konzentrieren.

Neben anderen Messwerten zur Geschwindigkeit, SEO und Benutzerfreundlichkeit von Webseiten möchte ich hier speziell darauf eingehen, wie Bilder gewertet werden:

• Wenn das Bild ein JPEG ist, wird das gelieferte Bild, welches als 100% Qualität angenommen wird, mit dem 85 prozentigen davon verglichen.
• Es vergleicht die Grösse der gelieferten Bilder mit der Grösse der angezeigten Bilder.
• Zudem werden die Bilder in neuere Formate wie WebP umgewandelt, verglichen und die Einsparung(en) angezeigt.
• Die Bilder bzw. die Webseite werden/wird zudem darauf “getestet”, ob sie “lazy-loading” haben/hat. Das fällt vor allem ins Gewicht, wenn es darum geht, nach welcher Zeit, die Seite interaktiv ist und ab wann sie das erste Mal für den Besucher geladen wurde (d.h. das Raster “erstellt” wurde, ohne bereits alle Inhalte geladen zu haben).

Bei (grösseren) Einsparungen werden Verbesserungsmöglichkeiten vorgeschlagen.

Die neuen Bildformate sind leider noch in einigen populären Browsern nicht unterstützt, haben aber in Zukunft grosses Potenzial und können heute schon für spezifische Zwecke und in manchen Browsern Anwendung finden. Für Browser, welche ein Format nicht unterstützen, können Ausweichlösungen eingebaut werden, die ich hier vorstelle. Mit diesen Formaten ist es teilweise möglich, die Bildgrösse um mehr oder weniger die Hälfte zu reduzieren! Schauen wir sie uns einmal an:

• WebP: Mit WebP können verlustfreie (wie PNG) und verlustbehaftete (wie JPEG) Dateien erstellt werden. Mit diesem Dateiformat können, bei gleicher Qualität, Einsparungen von bis zu 30% gegenüber JPEG erreicht werden. Am geeignetsten ist dieses Bildformat für qualitativ schlechtere Bilder, bei denen die Geschwindigkeit wichtiger als die Qualität ist. Das Format wird heute in fast allen aktualisierten Browsern unterstützt, welches es bereits heute recht attraktiv macht.
• AVIF: (image version of AV1 video format): Dieses Bildformat kann eine Grössenreduktion von bis zu 50% gegenüber JPEG erreichen. Es kann verlustfreie und verlustbehaftete Bilder erzeugen, sowie Animationen, graphische Elemente, HDR (hight densitiy resolution d.h. auch grosse Helligkeitsunterschiede sind kein Problem) und mehr enthalten. Das Dateiformat wird eingeschränkt von Firefox und chomium-basierten Browser, wie Chrom und Opera, unterstützt.
• JPEG XL:  Auch dieses Format unterstützt verlustfreie (16-22% Reduktion) und verlustbehaftete Bilder, wobei es bei verlustbehafteten Bilder die Dateigrösse bis zu 60% gegenüber JPEG bei gleicher Qualität vermindern kann. Dieses Format wurde mit dem Hintergedanken des “responsive design”, das meint für verschiedene Bildschirmgrössen und damit für verschiedene Geräte, entwickelt: Es kann, durch das automatische Speichern in mehreren Grössen, selbst ein Bild in verschiedenen Qualitäten liefern. Dafür braucht es bei herkömmlichen Bildformaten verschiedene Bilder(dateien), die für verschiedene Bildschirmgrössen bestimmt werden mussten. Sogar eine verlustfreie Umwandlung in JPEG ist eingebaut. Zudem kann es zu verschiedenen Bildbereichen, unterschiedliche Qualitäten bestimmen, um bei “weniger anspruchsvollen” Bereichen Einsparungen zu machen oder/und bei “anspruchsvollen” eine höhere Qualität zuzulassen. Unterstützung findet es nur eingeschränkt in Firefox und chromium-bariserten Browsern.

Die oben genannten Bildformate können teilweise nicht über das <img>-Element eingebunden werden, sondern brauchen das <picture>-Element.

Mit diesem Element können im gleichen Schritt auch mehrere Bilder und Bildformate, z.B. als Ausweichlösung, eingebaut werden. 

Hierbei ist wichtig zu beachten, Bildformate die zuerst benutzt werden sollen, und möglicherweise nicht von allen Browsern unterstützt werden, weiter oben einzubinden. Denn der Browser liest von oben nach unten und nimmt das erste Bild, dessen Dateityp er benutzen kann. 

Für den Internet Explorer braucht es zudem noch ein <img>-tag, welches sich problemlos im <picture>-Element einbauen lässt.

Und was benutzen wir momentan? Bei Pixmill benutzen wir für Bilder lazy-loading, Anpassungen, damit auch Einsparungen, an die verschiedenen Bildschirmgrössen und als neues Bildformat webP. Weitere neue Bildformate, AVIF und JPEG XL, bauen wir noch nicht ein, da diese trotz guten Aussichten noch zu schlecht komprimieren/verkleinern und nur in wenigen Browsern Unterstützung finden.

Quellen

Buch Image Optimization von Addy Osmani
Weitere Quellen sind bereits im Artikel an den jeweiligen Stellen verlinkt.

Anmerkungen:

kB steht für kilo Byte, das sind 1000 Bytes. Bytes, wie auch Bits, sind eine Speichereinheit der Digitaltechnik.