Das Web ist voller wilder Bilder

torpedo motor gibt eine kurze Einführung in den illustren Teil des Internets.

Tausend Bildformate - Tausend Einstellungsmöglichkeiten... Da ist man schnell überfordert. Welches Bildformat ist das richtige, welche Komprimierung ist sinnvoll? Man fühlt sich schnell überfordert. Was bringt die Bildoptimerung überhaupt und im Prinzip kann ich doch Bild gleich Bild, oder?

Zuerst einmal: Bildoptimierung könnte fast eine Wissenschaft für sich sein, deshalb fällt der Einstieg vielen daher schwer. Wir haben ein paar wichtige Grundlagen zusammengetragen, um ein bisschen Licht ins Dunkel zu bringen.

Welche Vorteile bringt es, die Bilder für eine Webseite zu optimieren?

Die Wahl des geeigneten Formates ist wichtig, weil erhebliche Ressourcen gespart werden können und sich somit sowohl die Ladezeiten verkürzen, als auch die Darstellung der Bilder verbessert werden kann. Dabei befindet man sich stets auf der Suche nach dem besten Kompromiss zwischen der geringsten Dateigröße und der höchstmöglichen Qualität. Wenn man den Spagat schafft, liegen die Vorteile auf der Hand. Wird die Seite schnell geladen, verringert sich die Absprungrate der Nutzer, denn Bilder sind der zentrale Bestandteil des Nutzererlebnisses auf jeder Webseite. Zusätzlich spart die gezielte Anwendung von Optimierungsverfahren jede Menge Kosten, denn Bandbreite kostet Geld. Durch die Optimierung der Bilder verbrauchen Websites weniger Traffic und verbrauchen somit weniger Kosten für das Hosting und die Bereitstellung von Inhalten. Die Ladezeit und Leistung einer Seite ist ein wichtiger Rankingfaktor bei Google und anderen Suchmaschinen. Die Optimierung von Bildern kann deshalb direkt zur besseren Platzierungen und mehr Traffic beitragen.

Welches Dateiformat sollte man nehmen?

Man sollte sich vergewissern, dass der richtigen Dateityp für das Endformat zur Anwendung kommt, bevor mit der Optimierung des Bildes begonnen wird. Für die Darstellung auf Webseiten haben sich vier Dateiformate etabliert:

JPEG - Klein aber fein, der solide Standard

JPEGs sind ideal geeignet, um ein Gleichgewicht zwischen Qualität und Dateigröße herzustellen. Man kann nach Bedarf die JPEG-Qualitätsstufe zwischen 1 und 100 % einstellen. Für gutes Ausgangsmaterial reicht oft eine Qualitätsstufe von 30% aus, um ein optimales Ergebnis zu erzielen. Die Dateigröße bewegt sich dann oft nur im angenehmen Kilobyte-Bereich. Man sollte jedoch dabei beachten, dann JPEGs verlustbehaftet komprimiert werden. Das heißt, bei jedem Abspeichern geht ein Teil des Bildes verloren und es wird schlechter.

PNG – Wenn es mal richtig gut werden muss

PNGs sind qualitativ hochwertige Bilder, was natürlich auch die Dateigröße erheblich erhöht. PNGs sind standardgemäß verlustfrei komprimiert, dass heißt, die Qualität beim Abspeichern bleibt vollständig erhalten. Es kann zwar auch so konfiguriert werden, dass eine verlustbehaftete Komprimierung entsteht, jedoch sollte man abwägen, ob dann nicht ein JPEG mehr Sinn macht. Für die Verwendung von PNG spricht in vielen Fällen, dass transparente Bildteile möglich sind, was JPEG nicht leisten kann.

GIF - Das hippe Kultformat

GIF ist eines der ältesten Bildformate. Die Fähigkeit Transparenzen abzuspeichern und die Möglichkeit, Ebenen als Animation zu speichern, haben das Bildformat als Retro-Kult wieder aufleben lassen. GIF unterstützt zwar nur 256 Farben, bietet damit aber eine verlustfreie Komprimierung. Heutzutage wird es selten für statische Bilder verwendet, da es für eine geeignete Qualität sehr viel Speicherplatz benötigt. Wenn man Animationen ohne große Anforderungen braucht, kleine Bildelemente mit Bewegungsabläufen darstellt oder einen bestimmten Trash- oder Retro-Look erreichen will, ist GIF die geeignete Wahl. Für umfangreichere Animationen sollte man jedoch SVG, Transitions über CSS und Javascript, oder Videoformate in Erwägung ziehen.

SVG - Das nerdige Vektorformat

Wenn man es einmal richtig verstanden hat, muss man es einfach mögen. SVG ein XML-basiertes Dateiformat. Das heißt, es wird kein Pixelraster als Bildinformation gespeichert, wie bei den anderen genannten Formaten, stattdessen wird das Bild als geometrische Formen und Kurven dargestellt, die bei jeder Abbildung neu berechnet werden. Dadurch ist nicht nur eine verlustfreie und minimale Speicherung möglich, sondern es wird auch eine beliebig große Skalierung ohne Artefakte möglich, da das Bild jedes mal neu berechnet (sprich: gerendert) wird. Es wird noch verrückter: SVGs können zudem im Texteditor bearbeitet werden und mittels Skripting animiert und manipuliert werden. Das macht Animationen und Veränderungen in Echtzeit möglich. Das Format fügt sich zudem perfekt in die Struktur von HTML5 ein. Verwendet wird dieses Format vor allem für Logos und Darstellungen, die nur auf Farben und Formen beruhen. Das können Zeichnungen, Schriften und Animationen sein, die früher z.B. mit Flash gemacht wurden.

Komprimierung – Wie klein ist klein genug?

Komprimierungstechniken werden eingesetzt, um die Größe eines Bildes zu verringern. Dabei gibt es zwei gängige Komprimierungsarten:

Verlustbehaftete Komprimierung

Die Form der Komprimierung verringert die Dateigröße, indem Datenredundanzen entfernt werden. Diese Art der Komprimierung kann die Größe von Bilddateien effektiv verringern, führt aber auch zu Qualitätseinbußen. Sobald eine Datei komprimiert ist, kann man die entfernten Informationen nicht mehr herstellen. Um Dateiverluste zu vermeiden, sollte deshalb immer das Ausgangsmaterial mit der höchstmöglichen Qualität aufbewahrt und jede neue Komprimierung aus dem ursprüngliche Bild vorgenommen werden.

Verlustfreie Komprimierung

Hier hat die Qualität Vorrang vor der Dateigröße. Bei dieser Technik wird eine hohe Qualität beibehalten, so dass die Datei später bei Bedarf wiederhergestellt werden kann. Diese Technik kann jedoch nicht verwendet werden, um die Dateigröße erheblich zu reduzieren.

Achtung bei Größenänderungen!

Wird das Bild in seiner Auflösung verkleinert, ändert sich trotz verlustfreier Komprimierung natürlich auch die Qualität, da Informationen verloren gehen. Wird ein Bild hochskaliert, so verbessert sich die Qualität nicht. Es werden lediglich Zwischenpixel errechnet, die für Artefakte oder eine ungewohnte Unschärfe sorgen. Deshalb muss stets ein Gleichgewicht zwischen Größe und Auflösung hergestellt werden. Je höher die Auflösung, desto größer ist die Datei. Im Internet verlangsamt die Verwendung hochauflösender Bilder das Laden der Seite. Wenn ein Besucher z.B. über ein Mobiltelefon auf eine Website zugreift, ist die Bandbreite wahrscheinlich begrenzt und große Bilder brauchen länger zum Laden.

Optimieren der Bildauslieferung

Auch wenn ein Bild durch die oben genannten Schritte optimiert wurde, kann man noch mehr tun, um die Leistung zu verbessern. Die Servergeschwindigkeit und die Netzwerkleistung sind ebenfalls wichtige Faktoren, die sich darauf auswirken, wie schnell die Bilder für den Nutzer geladen werden und die Vollständigkeit der Metainformationen spielt für das Ranking in Suchmaschinen (Search Engine Optimization - SEO) eine wichtige Rolle.

Man kann z.B. bei guten Hostern die Besuchszeiten einer Webseite abschätzen und sicherstellen, dass der Bildserver dann ein Vielfaches der Ressourcen zur Verfügung bekommt, um die gestiegene Verkehrslast zu bewältigen. Bilder sollten immer mit einem entsprechenden Cache-Header versehen werden, damit lokale Geräte eine im Cache gespeicherte Version des Bildes verwenden können und das Bild nicht bei jedem Besuch der Webseite neu laden müssen. Zusätzlich können Versionen einer Webseite erstellt werden, die von Endgerät abhängig sind, sodass z.B. für eine mobile Version die Bilder nur in halber Qualität geladen werden müssen.

Für sehr große internationale Projekte und Webshops kann die Nutzung eines Content Delivery Networks (CDN) hilfreich sein. Ein CDN ist ein Netzwerk von Servern, das Bilder an Benutzer in der Nähe des physischen Standorts ausliefert. Je näher sich der Server befindet, desto schneller ist die Antwortzeit. CDNs sind weit verbreitet, einfach zu implementieren und stellen eine hervorragende Lösung zur Verbesserung der Ladezeiten dar.

Zum Thema SEO gibt es im nächsten Artikel mehr Informationen.

Da die Optimierungsmöglichkeiten umfangreich und zahlreich sind, gibt es also nicht den Königsweg zum Ziel. Man sollte deshalb immer sorgfältig abwägen, für welchen Zweck welches Bildoptimierungsverfahren geeignet ist, um die bestmögliche Performance zu erreichen. Im Zweifelsfall hilft es immer, eine paar Testszenarien für die bevorzugten Endgeräte zu entwickeln, einige Verfahren auszuprobieren und die Leistung zu messen, um eine geeignete Lösung zu finden. Wer unsicher ist, sollte sich dabei am Besten von einem Experten helfen lassen. Für Rückfragen oder eine umfassende Beratung stehen wir deshalb natürlich jederzeit tatkräftig zur Seite.