Bilder und Grafiken für das Web: JPG, PNG, SVG, GIF?

Nicht selten stelle ich fest, dass Kunden in Einzelfällen falsche Dateiformate für Bilder und Grafiken verwenden. Einer der häufigsten Fehler ist sicherlich, das PNG-Format für Fotos zu nutzen. Dadurch entstehen unnötig hohe Dateigrößen und dementsprechend längere Ladezeiten.

Dass man Bilder und Grafiken möglichst nicht größer einbinden sollte, als sie auf der Website auch angezeigt werden, ist allgemein bekannt. WordPress und oftmals auch Themes erstellen beim Hochladen mehrere Formate, die man sinnvoll nutzen kann. Aber: Das ist im Zeitalter von hohen Auflösungen / Retina schon wieder überholt. Die kristallklare Darstellung hat ihren Preis, Bilder und Grafiken sollten etwas größer eingebunden werden.

Oftmals kommt die Frage auf, wie groß man Bilder in Fullwidth-Slidern maximal einbinden sollte. Ich empfehle in der Regel nicht mehr als 1.500-2.000 Pixel Breite. Sollten Bilder dann unschön aussehen, kann man einen Pixel-Overlay darüber legen. Das kennt man von Fotografie-Websites im Vollbildmodus.

Kommen wir nun zu den verschiedenen Dateiformaten:

JPG / JPEG

Das Dateiformat für Fotos. JPGs sind gut komprimierbar, am bekanntesten ist die JPG-Qualitätsoption in Photoshop von 1-12 (maximale Qualität). Das Foto oben in einer Größe von 1500 x 1000 Pixeln hat in der maximalen Qualitätsstufe 12 eine Dateigröße von 1.300 KB. Komprimiert man das Foto auf Qualitätsstufe 9, ist das Foto nur noch 430 KB groß. Die Stufen unter 9 führen meist zu unschönen Artefakten. Eine umfangreichere Komprimierungsfunktion ist das „Für Web speichern“ in Photoshop. Damit lässt sich noch mehr herausholen.

Wichtig zu sagen ist noch, dass eine JPG-Datei bei jedem Öffnen und Speichern in einem Bildbearbeitungsprogramm neu komprimiert wird. Die Qualität nimmt also bei jeder Bearbeitung weiter ab.

Auch erwähnenswert ist, dass die Dateigröße von der Menge an Details abhängig ist. Ein Foto von blauem Himmel ist viel kleiner als ein Foto von einer herbstlichen Wiese voller Laub.

PNG

Das Dateiformat für (simple) Grafiken wie zum Beispiel Logos. Gute Qualität, verhältnismäßig kleine Dateigröße, und vor allem: PNG können transparent sein, was im Webdesign in einigen Fällen benötigt wird. Auch bei PNG gilt: je detailreicher, desto höher ist die Dateigröße.

Auf keinen Fall sollte man den Fehler machen, Fotos als PNG einzufügen: Aus dem oben genannten JPG-Foto mit 430 KB werden beim Speichern als PNG gleich 2.200 KB.

SVG

SVG sind verlustfrei skalierbare, schlanke Vektordateien, die für Grafiken wie Logos und Icons gut geeignet, aber dennoch (noch) nicht stark verbreitet sind.

GIF

GIF-Dateien können simple Animationen beinhalten, aber nur 256 Farben darstellen. Das führt zu dem punktierten Aussehen. Auf Websites sind GIFs kaum noch anzutreffen, in sozialen Netzwerken schon eher.