JPG, PNG, WebP: Fotos und Grafik optimieren

Fotos und Grafiken optimieren

Fotos und Grafiken werden immer für die Webseite optimiert. Nachdem JPEG über Jahrzehnte das Königsformat für Fotos war und Motive mit transparentem Hintergrund die Ladezeit ausdehnt, ist WebP das neue JPEG + PNG.

18-12-15 SITEMAP

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 weiter 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.

JPEG optimieren

Einstellungen für optimiertes JPEG

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

Einstellung für Grafik mit reduzierter Farbpalette

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

Google propagiert WebP als weiteres JPEG-Format. Da liegt jetzt alles in einem Dateiformat: WebP kann sowohl Fotos effizient komprimieren und freigestellte Motive mit Alphakanal (Maske oder Schablone) mit einem durchsichtigen Hintergrund speichern. Apple hat die Abwehrhaltung aufgegeben und wenn wir auf IE11 verzichten können, ist WebP das neue JPEG + PNG24.

Bei WebP reicht eine Entscheidung für die Optimierung: 30, 40% oder eine noch höhere Qualität. Lohnt sich der Umstieg von PNG oder JPG auf WebP?

Gegenüber PNG ist WebP immer der Schmalhans. Gegenüber JPG bringt WebP i.d.R. eine Reduzierung der Dateigröße um 30 bis 50% bei gleicher Qualität.

Original gespeichert mit Photoshop als JPG: 1960 x 1103 px, 136 KB
Foto als WebP gespeichert
Original gespeichert als WebP mit Photoshop-WebP-Plugin: 1960 x 1103 px, 67 KB

Grafik als SVG

SVG in Inkscape erstellen

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

2022-04-15 SITEMAP BLOG