Das Zusammenspiel von Dateigrösse und Bildqualität beim Export von Bildern / Grafiken

Der richtige Export von Bildern und Grafiken für den Einsatz im Web ist anspruchsvoller als man annimmt. Die Datei soll optisch einwandfrei sein und darf nicht zu schwer sein, sonst beeinträchtigt sie die Ladezeit der Website.
Heute stehen diverse Bildformate für das Web bereit:

  • Das Vektor Format SVG ist ohne Qualitätsverlust skalierbar
  • Pixel Formate wie JPG, PNG oder GIF verlieren beim Skalieren an Qualität.

 

Dateigrösse

Die Dateigrössen unterscheiden sich etwas, je nachdem mit welchem Programm man arbeitet und in welches Format exportiert wird. Die Faustregel ist: PNG nur für Bilder mit Transparenz, JPG für Fotografien und SVG für Vector basierte Grafiken. Exportiert man z.B. ein normals Foto als PNG kann diese um ein vielfaches mehr KB aufweisen als wenn es als JPG exportiert wird.

 

JPG richtig komprimieren (Bilder und Fotografien)

Ein JPEG muss nicht immer mit einer 100-prozentigen Qualität exportiert werden. Oftmals reichen schon 60-70 % für eine optimale Bildqualität aus. Dabei können bis zu 60 % (in meinem Test) von der Dateigrösse ohne optische Einbussen eingespart werden, was wiederum zu einer schnelleren Ladezeit der Website führt.

PNG richtig komprimieren (Bilder mit Transparenz)

Viele Einstellungen kann man beim PNG Export nicht vornehmen. Deshalb gibt es zwei Tools, welche ich jeweils nutze, um die Dateigrösse zu minimieren: ImageAlpha und ImageOptim. Mit diesen beiden Tools lässt sich die Dateigrösse eines gewöhnlichen PNG-24 noch einmal um 56 % reduzieren (ohne oder mit kaum erkennbaren optische Einbussen).

 

Fazit

Am Anfang steht die richtige Wahl in welches Format exportiert werden soll:

  • JPG für Fotos
  • PNG Grafiken und Fotos mit Transparenz
  • SVG für Grafiken mit Vektoren