Infografik: Fotos und Grafik optimieren

JPEG für Webseiten optimieren

Fotos und Grafiken werden immer für das Internet optimiert. Früher wurden Bilder so klein wie Briefmarken in die Webseite gesetzt, um die Ladezeiten kurz zu halten.

Heute wollen wir vollformatige Fotos und große Grafiken und kämpfen weiterhin gegen die Dateigröße für JPG und PNG: Fotos und Grafiken sind die Bremse für die Ladezeit der Webseite.

Plakative Grafik speichern wir vorzugsweise als PNG. GIF und PNG lassen sich durch eine Farbpalette verkleinern, ohne die Qualität der Grafik in Mitleidenschaft zu ziehen. Fotos werden als JPG komprimiert – fast immer verlustbehaftet (d.h. mit weniger Details als das Original, aber möglichst ohne sichtbare Einbußen).

Das sind die Eckpfeiler für das Speichern von Bildern fürs Internet. Erst die Optionen der Dateiformate optimieren die Dateigröße bei angemessener Qualität.

JPEG für große Fotos optimieren

JPEG komprimiert die Bildinformationen nicht nur, sondern reduziert die Dateigröße durch Neuberechnung. Für einfache Schriftzüge oder Logos ist JPEG kaum geeignet, da die gleichbleibend hohe Farbtiefe zu größeren Dateien oder zu Artefakten an scharfen Farbkanten und bei feinen Verläufen führt.

Große Fotos – hoher Komprimierungsfaktor

Der JPEG-Komprimierung dürfen wir viel zumuten: Bei großen Bildern – etwa ab 400 x 300 px – zeigt JPEG selbst bei 50% Qualität noch brillante Farben und kaum sichtbare Artefakte (früher galt noch 75% als Qualitätsfaktor für JPEG).

Baseline vs. Progressiv

JPG wird in zwei Varianten gerendert:

  1. 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.
  2. Progressive ist heute die bessere Wahl. Der Browser kann große Bilder in einem Schwung in geringerer Qualität (ohne Blocksprünge) darstellen und die Qualität nachladen.

Früher galt Baseline als die bessere Wahl, weil Bilder mit Progressiv insgesamt größer waren. Heute ist Progressiv fast immer spürbar kleiner als ein Baseline.

Farbraum für Fotos auf Webseiten

Fotografen müssen Bilder nicht mehr aus dem AdobeRGB-Farbraum in den sRGB-Farbraum umrechnen. Alle modernen Browser interpretieren heute das ICC-Profil des Bildes. Kleine Bilder würde ich aber eher in sRGB umrechnen und ohne Profil speichern. Das Profil macht locker 2KB bei der Dateigröße.

  • Große Fotos in mittlerer Qualität (~50%) komprimieren, sehr kleine Fotos in 60 bis 70%.
  • JPG mit der Option Progressiv speichern. Bei kleinen Bildern lohnt sich JPEG Progressiv kaum, schadet aber auch nicht.
  • Große JPEG-Bilder mit Profil speichern, kleine Fotos in sRGB umwandeln und ohne Profil speichern.

Kleine Fotos – großer Qualitätsfaktor

In Hinsicht auf die Retina-Displays der kleinen und großen Monitore lohnt es sich nicht, Fotos auf eine geringe Größe zu verkleinern und sie mit einem hohen Qualitätsfaktor zu komprimieren. Besser ist ein großes Bild mit einem geringeren Qualitätsfaktor, denn die Dateigröße wächst exponentiell mit dem Qualitätsfaktor.

Für die mobilen Geräte mit den kleinen Monitoren bringt Progressiv einen weiteren Vorteil: Wenn ein großes Bild für kleine Monitore ausgezoomt ist, sieht es schon beim ersten Scan-Durchlauf gut aus.

Freisteller – Fotos mit Transparenz – fürs Web optimieren

Im Laufe der Zeit sind mehr als 40 Variationen von JPEG entstanden, aber Transparenz blieb immer außen vor. Hier springt PNG-24 (nur PNG-24 beherrscht Semitransparenz) in die Bresche und macht sich dick.

Transparentes JPEG: WebP

Google propagiert WebP als weiteres JPEG-Format. Zwar gibt es WebP-Support nur von Chrome und Opera, aber das sind immerhin 30% bis 50% der Besucher. Während WebP bei JPEG bei weitem nicht die angepeilten 30% Ersparnis bei der Dateigröße bringt, reduziert es ein Foto mit Transparenz um 50% und mehr gegenüber PNG-24. Hier lohnt sich das HTML picture-Tag mit WebP und PNG-24 als Alternative für die übrige Browserwelt.

<picture>
   <source srcset="picture.webp" type="image/webp">
   <img src="picture.png" alt=" … " />
</picture>
  • Kein Interlaced für PNG oder GIF!
  • Wenn die Farben wichtig sind, kann man auch bei PNG-24 das Profil einbetten.

Grafik, Charts und Logos

Von den web-tauglichen Formaten sind nur PNG und GIF auf weniger Farben begrenzt, als unser Auge unterscheiden kann. 256 Farben – oder acht Bit Farbtiefe – ist die magische Grenze. Das beschränkt den Einsatz von PNG und GIF auf Bilder mit hohem Abstraktionsgrad, etwa Schriftzüge oder grafische Indizes und Symbole. Dafür kann man eine beliebige Farbe als transparent definieren.

PNG-8, PNG-24 und GIF werden als verlustfrei bezeichnet, denn ein PNG oder GIF darf bearbeitet und erneut gespeichert werden. Die erneute Komprimierung führt dank der Farbpaletten nicht zu Verlusten.

PNG gibt es in zwei Ausprägungen:

  1. PNG-8 lässt sich auf eine kleine Farbpalette begrenzen (z.B. 128 oder 32 Farben), aber unterstützt keine Semitransparenz für weiche Schatten, sondern nur eine Transparenz-Farbe.
  2. PNG-24 beherrscht Transparenz und Semitransparenz, aber erlaubt keine Einschränkung der Farbtiefe auf weniger als 256 Farben.

GIF war über Jahrzehnte DAS Grafikformat des Internets, aber jetzt stirbt GIF aus. PNG 8 Bit liefert bei gleicher Qualität fast immer bessere Ergebnisse als GIF. Animationen können wir mit CSS, SVG und Javascript aufstellen, so dass die liebenswerten GIF-Animationen zu Exoten werden.

  • PNG-8 ist das bevorzugte Format für plakative Grafik, Logos, Charts und Illustrationen.
  • Bilder in sRGB umwandeln und ohne Profil speichern.
  • Kein Interlaced – also zeilenweises Laden. Kostet viel und bringt nichts bei Grafiken.

Grafik als SVG

Wenn die Grafik in einem Programm mit SVG-Export angelegt wird, ist SVG fast immer die bessere Wahl gegenüber PNG, GIF oder JPEG.

Adobe Illustrator, Inkscape, Corel, Photoshop – sie alle exportieren Grafiken auch als SVG.

Grafik mit Verlauf

Problematisch werden indizierte Farben, wenn das Ausgangsbild zu viele Farben enthält – das passiert bei Fotos, aber auch bei Verläufen in Grafiken.

  • Grafiken mit Verläufen und Drop Shadow sind meist bei JPG besser aufgehoben als bei PNG.
  • Verläufe brauchen nur einen geringen Qualitätsfaktor, denn die JPEG-Artefakte entstehen in erster Linie um harte diagonale Kanten.
  • Progressiv aktivieren!

Bilder fürs Internet optimieren – auf einen Blick

Bilder fürs Internet optimieren6Grafik mit Verlauf (Gradient)Format-OptionenGrundlinie (Standard)Grundlinie optimiertProgressivDurchgängeJPEG-Optionen6Mittel3Farbprofil einbettenin sRGB umwandeln5Grafik als SVGAus Illustrator: Datei > Exportieren und Format „SVG (svg)“.Aus Inkscape: Datei Speichern unter „Normales SVG“Aus Photoshop: Datei Exportieren > Exportieren als > SVG4Grafik Charts, Karten, IllustrationenPNG-Optionen32FarbenTransparenzFarbtabelleFarbprofil einbettenInterlacedFarbtabellePNG-8in sRGB konvertieren3Foto mit TransparenzPNG-OptionenTransparenzInterlacedFarbprofil einbettenPNG-24in sRGB konvertieren>cwebp -q 50 beast.png -o beast.webpPLUS: webP3aChrome & Opera2Kleine FotosFormat-OptionenGrundlinie (Standard)Grundlinie optimiertProgressivDurchgänge3Farbprofil einbettenin sRGB umwandelnJPEG-Optionen (Bild < 400 x 300 px)Qualität9Kleine DateiGroße DateiHoch1Große FotosJPEG-Optionen (Bild > 400 x 300 px)QualitätKleine DateiGroße DateiMittel6Format-OptionenGrundlinie (Standard)Grundlinie optimiertProgressivDurchgänge3Farbprofil einbettenin sRGB umwandeln

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.