Webseitenoptimierung – Bilder und Grafiken optimieren
Vor der eigentlichen Optimierung von Grafiken und Bildern steht die Auswahl des richtigen Grafikformats. Websichere Formate sind JPG, GIF und PNG. Auf andere Formate sollte auf Grund von Darstellungsproblemen in verschiedenen Browsern nicht zurückgegriffen werden
JPG (auch JPEG / Joint Photographic Expert Group) eignet sich besonders für Fotos und Bilder mit vielen Farben und Farbverläufen, da bis zu 16,7 Millionen Farben gespeichert werden können. JPG ermöglich eine Komprimierung, die allerdings zu Qualitätsverlusten führt. Bei detailreichen Fotos mit vielen ähnlichen Farben ergeben sich allerdings verhältnismäßig hohe Einsparmöglichkeiten, die einen kaum sichtbaren Qualitätsverlust nach sich ziehen. Der Komprimierungsfaktor wird von 1-100 angegeben, wobei 100 die beste Qualität ohne Komprimierung entspricht. Ein Bild mit 1,4 MB wird bei Komprimierungsfaktor 80 zum Beispiel auf 600kB reduziert (abhängig vom dargestellten Inhalt des Fotos). Als Progressive-JPG gespeicherte Grafiken zeigen, wenn ca. 15% des Gesamtbildes geladen ist, bereits eine Vorschau in verringerter Bildqualität. Für Grafiken mit gleichmäßigen Flächen ist JPG weniger geeignet, da die Komprimierung hier zu auffallend starken Verzerrungen führt. Ungeeignet ist das Format für Einsätze, bei denen eine Farbtransparenz benötigt wird.
Das GIF-Format verfügt zwar über eine verlustfreie Komprimierung, kann allerdings nur max. 256 Farben darstellen. Aufgrund der begrenzten Farbanzahl ist dieses Grafikformat eher weniger für Fotos geeignet und prädestiniert für Grafiken, mit gleichmäßigen Flächen. Auch das GIF-Format verfügt über einen Vorschaumodus, Interlaced-GIF genannt. Außerdem kann im GIF-Format eine Farbe transparent geschaltet werden, das heißt, die Grafik wird an den Stellen, wo diese Farbe verwendet wird, durchsichtig. Darüber hinaus kann durch das Abspeichern mehrerer Einzelbilder in einen Gif eine Animation erzeugt werden, das sogenannte animierte Gif.
PNG (Portable Network Grapchic) schlussendlich vereint die Vorteile von JPG und GIF. PNG verfügt über eine verlustfreie Komprimierung und kann 16,7 Millionen Farben darstellen. PNG kann zwar auch eine Farbtransparenz darstellen, diese ist allerdings auf den 8- bzw. 16-Bit-Modus beschränkt und kann somit auch nur 256 bzw. 65536 Farben darstellen. Animationen sind leider nicht möglich. PNG eignet sich, wie das GIF-Format eher weniger für Fotos und mehr für Grafiken mit gleichmäßigen Flächen.
Grundsätzlich sollten Bilder und Grafiken immer in der richtigen Größe vorliegen und nicht im Browser skaliert werden, denn naturgemäß benötigen größere Bilder immer mehr Speicherplatz und demzufolge auch eine höhere Ladezeit.
Die eigentliche Optimierung beschränkt sich je nach Grafikformat auf die Komprimierung bzw. die Begrenzung der Farbanzahl sowie die Nachbearbeitung mit einem entsprechenden Tool wie z.B. smush.it . Optimieren lassen sich Bilder und Grafiken eigentlich mit jedem Grafikprogramm, das Größenänderungen erlaubt und die 3 Grafikformate unterstützt wie z.B. IrvanView . Nach jedem Arbeitsschritt sollte eine visuelle Kontrolle erfolgen. Wird die Farbanzahl zu stark reduziert, gehen Details verloren oder es erscheinen unschönen Flecken. Eine zu starke Komprimierung im JPG-Format lässt Kanten verschwimmen und das Bild wird undeutlich, bei noch stärkerer Komprimierung wird auch hier das Bild pixelig. Wie weit eine Grafik optimiert werden soll, hängt stark davon ab, wie die Grafik beschaffen ist (Anzahl der Details, Farben etc.) und welche Qualität gewünscht ist. Abschließend empfiehlt sich immer noch mal eine Kontrolle mit smush.it (einfach anzuwenden über das Firefox-Plugin YSlow).
Tipp: Wer bei der Wahl des Grafikformats und der Optimierung unsicher ist, kann sich seine Grafik versuchsweise in allen 3 Grafikformaten abspeichern, vorzugsweise in verschiedenen Komprimierungsstufen bzw. mit geringerer Farbanzahl. Die Entscheidung sollte dann nach einem visuellen Vergleich und einem Blick auf den benötigten Speicherplatz erfolgen. Beim JPG-Format hat sich zum Beispiel ein Komprimierungsfaktor von 80 als sehr vorteilhaft erwiesen, da hierdurch die Grafik zwar deutliche reduziert wird, ohne das die Qualität zu stark leidet.
Tags: bilder, geschwindigkeit, grafik, optimieren, optimierung