Bildoptimierung für das Web

Zu einem ansprechenden Internetauftritt gehören ansprechende Bilder. Bilder und Grafiken sind jedoch richtige Datenschwergewichte, welche die Ladezeit einer Webseite enorm verlangsamen können. Und eine langsame Webseite ist nicht nur nervig, sondern auch mit üblen Folgen verbunden, die vom schlechten Google Ranking bis hin zu echten Umsatzeinbußen durch Besuchsabbrüche reichen.

Um das zu verhindern, müssen Bilder und Grafiken für das Web optimiert werden. Bildoptimierung bedeutet hier, einen idealen Kompromiss zwischen einer möglichst geringen Datenmenge und der bestmöglichen Darstellungsqualität zu finden.

Methoden für die manuelle Bildoptimierung

Bild-Format
Zunächst ist es wichtig, das richtige Format zu wählen. Für das Web haben sich hauptsächlich drei Bild-Formate durchgesetzt : JPG, GIF und PNG(8/24bit).

• JPG Dateien sind ideal, wenn es um Fotos mit vielen verschiedenen Farben und Verläufen geht, da sie extrem stark komprimiert werden können. In der Regel ist eine Bildqualität von 60-70% für dass Web völlig ausreichend. Leider entstehen bei einer zu hohen Komprimierungsrate starke Qualitätsverluste (Artefakte), die sich vor allem bei Schriften oder harten Farbkanten bemerkbar machen. Zudem unterstützt das JPG-Format weder Transparenz noch Animationen.
• GIF ist besonders dann geeignet, wenn wenig verschiedene Farben verwendet werden, wie z.B. bei individuellen Logos oder bei diversen Websiteelementen. Die Dateigröße bei GIF wird hauptsächlich durch die Anzahl der verwendeten Farben (maximal 256 Farben) sowie die Größe der zusammengesetzten Farbflächen beeinflusst. Animationen und Transparenzen (komplett durchsichtige oder farbige Pixel) sind auch möglich.
• PNG-Dateien verbinden die Vorteile beider vorherigen Formate und setzen sich im Web immer mehr als Standard durch. Sie heben sich zudem durch den zusätzlichen Alpha-Kanal (graduelle Transparenz) hervor. Leider wird es immer noch nicht von allen Browsern unterstützt. Manche Browser stellen PNG-Bilder mit transparenten Bereichen falsch dar.

  UPDATE 05. Februar 2016: Der Internet Explorer 6 spielt im Web kaum noch eine Rolle, Kompatibilität ist damit kein Thema mehr. Die Dateigröße ist jedoch in jedem Fall höher als bei JPEG und GIF. Onlinetools wie kraken.io oder tinypng.com können die Dateigröße dennoch reduzieren, indem sie bei PNG24 Dateien wie bei PNG8 eine Farbpalette der verwendeten Farben erstellen, die jedoch auch mehr als 256 Farben sowie einen Alphakanal unterstützt. Mit diesen Dateien kommen alle Browser zurecht jedoch zum Beispiel ältere Photoshop Versionen nicht.

Viele Grafikprogramme wie Paint Shop Pro oder Adobe Photoshop speichern zusätzlich zu den eigentlichen Bilddaten noch einiges an Metainformationen, die für die Darstellung im Web nicht benötigt werden. Verhindern lässt sich das, indem man Bilder immer über die Option “Für Web und Geräte speichern” speichert.

Bild-Größen
Im Normalfall möchte kein Betrachter ein Bild scrollen müssen, daher ergibt sich die optimale Bildgröße in der Regel aus der Darstellungshöhe des sichtbaren Bereichs im Browser. Grundsätzlich sollten Bilder jedoch nicht größer abgespeichert werden, als sie tatsächlich verwendet werden, da die Qualität in der Originalgröße immer am besten ist. Wenn möglich sollte also auf eine HTML-Skalierung von Bildern verzichtet werden, da das Originalbild zwar verkleinert dargestellt, aber dennoch vom Browser in der vollen Größe herunter geladen wird. Die Ladezeit verringert sich dadurch also trotz Bildoptimierung nicht. Seit Google die neue Bildersuche eingeführt hat (Januar 2013), scheint es einen klaren Vorteil für Bilder im 4:3-Querformat zu geben, da dieses Format in der Bildersuche gegenüber hochformatigen Bildern mehr Platz einnehmen und somit die Klickwahrscheinlichkeit deutlich erhöhen.

Fazit

An Bildoptimierung kommt heutzutage keine Internetseite mehr vorbei. Allein schon wegen des massiven Zuwachses der mobilen Surfer, sollte man sich die Mühe der Bildoptimierung machen und die Datenmenge von Bildern reduzieren. Schon mit der Photoshop Option “Für Web und Geräte speichern”, lassen sich sehr gute Ergebnisse erzielen und man kann so einiges für eine schnellere Internetseite tun.

Von Diana Lazaru

Diana prägt die kreative Ausrichtung von Machart Studios vor allem im Bereich Illustration. Sie ist unser Chamäleon, das seinen Stil den Anforderungen der Kunden stets mit verblüffender Leichtigkeit anpasst. Diana liebt Farben und ist mit einem Blatt Papier und einem Stift in der Hand überglücklich. Nach ihrem Studium der Kunstgeschichte und einem sechsmonatigen Auslandsstudium in Bologna arbeitete sie freiberuflich als Illustratorin und Zeichnerin der Fix und Foxi-Comics für New Ground Publishing. Außerdem war sie Viertplatzierte beim bundesweiten Comicstars-Talentwettbewerb.