WebP vs JPG und PNG : Fotos und Grafik 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.

Fotos für Webseite optimieren: WebP speichern

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. Heute stehen uns zusätzlich WebP und SVG zur Verfügung.

JPEG optimieren

Foto als JPG für Webseiten speichern
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

Grafik als PNG speichern für die Webseite
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. Content Management Systeme wie WordPress unterstützen WebP bereits out-of-the-box, die Social Media haben WebP gnädig aufgenommen und für ältere Photoshop-Versionen gibt es Plugins.

Photoshop-Plugin WebP speichern
Keep ICC – Farbprofil des Fotos mitspeichern

Apple hat die Abwehrhaltung aufgegeben und wenn wir auf IE11 verzichten können, ist WebP das neue JPEG + PNG24.

JPG WEBP
Hintergrundfarbe für WebP-Bild

Bei WebP reicht eine Entscheidung für die Optimierung: 40%, 50% 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 und reduziert i.d.R. die Dateigröße um 30 – 50% bei gleicher Qualität. Dazu speichert WebP auch einen transparenten Hintergrund und ebenfalls – wie in diesem Beispiel – das Farbprofil des Bildes.

Wer noch Rücksicht auf IE11 nehmen muss, kann seine Fotos und Grafiken mit dem HTML-picture-Tag absichern.

Grafik als SVG

Grafik als SVG speichern
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

2024-02-12 SITEMAP BLOG
Suchen auf mediaevent.de