Im Web findet man viel zu häufig schlecht oder falsch komprimierte und gespeicherte Grafiken. Auch in Zeiten von DSL kosten das Platz und sorgt für längere Ladezeiten – viel wichtiger allerdings ist die Optik.

Als Faustregel gilt: JPEG ist ein gutes Format für Fotos, Farbverläufe und Bilder, die mehr als 256 Farben benötigen. GIF ist ideal für größere Farbflächen, zum Beispiel Screenshots. PNG, das dritte Format im Bunde, wird immer noch nicht mit allen Funktionen von allen Browsern unterstützt, sollte deshalb nur mit Bedacht genutzt werden.

Farbverlauf als JPEG, 0,70kb

Farbverlauf als GIF mit Farbkanten, 4,9kb

Zwar lassen sich beim Speichern von GIF-Bildern mit dem Einsatz eines Dithers mehr Farben simulieren, als tatsächlich zur Verfügung stehen, für Verläufe und Fotos werden die Bilder trotzdem viel größer und qualitativ schlechter als JPEGs.

Farbverlauf als GIF mit Dithering für bessere Ergebnisse

Dither-Einstellungen für das GIF-Format in Photoshop

Soll ein Bild mit großen Flächen gezeigt werden, etwa Text auf eintönigem Hintergrund, ist hingegen das JPEG-Format denkbar ungeeignet. Hier sorgt dessen Kompressionsverfahren nämlich an den oft starken Kontrasten an Buchstabenrändern für unschöne Artefakte. Diese fallen bei Fotos gar nicht auf, bei Texten ist es aber besonders schlimm.

Text ist im GIF Format am besten aufgehoben

Vergrößert zeigen sich die unschönen Artefakte

Eine einmal durchgeführte JPEG-Komprmierung lässt sich auch nicht wieder rückgängig machen, hier ist dann Handarbeit gefragt, wenn nachträglich das Format geändert werden muss. In unserem Beispiel würde das GIF-Format weniger als die Hälfte selbst der schlechtesten JPEG-Qualitätseinstellung an Speicherplatz verbrauchen.

Buttons, Icons, Symbole und fast alle Bilder, die Text enthalten, sind ideal für das GIF- oder PNG-Format, das ebenso verlustfrei komprimiert. Um mehr als die tatsächlichen 256 Farben des GIF-Formates zu simulieren, helfen Variationen an den Dither-Einstellungen.

Besteht ein sehr großes Bild aus Text und Fotos, ist das Aufteilen („Slicen“) in einzelne Bilder hilfreich. Programme wie Photoshop, Imageready oder Fireworks erzeugen zu den Bildabschnitten gleich den fertigen HTML-Code, der sie wieder in der richtigen Reihenfolge neben- und untereinander platziert.