Webseiten leben durch Bilder. Sie sprechen den Besucher direkt emotional an. Sie illustrieren Zusammenhänge und sagen bekanntlich mehr als Tausend Worte. Sie machen eine Text lebendig und lockern auf. Der Einsatz von schönen Bildern kann eine Website und damit das Image des betreibenden Unternehmens enorm aufwerten.
Besucher mit Bildern anziehen – nicht verprellen
Auf der anderen Seite sind die Website-Besucher mittlerweile anspruchsvoll bei den Ladezeiten einer Website. Baut sich eine Website nicht innerhalb von 2-3 Sekunden auf, klicken die Interessenten oft auf das nächste Suchergebnis. Von daher gilt es, die Bilder für den Einsatz im Web zu optimieren.
Bilder für Web optimieren: Die unterschiedlichen Bildformate
Für den Einsatz im Web kommen primär drei Bildformate in Frage: JPEG, PNG und GIF. Was sind die Unterschiede zwischen diesen Formaten? Wann setze ich welches Format ein? In unserer dreiteiligen Serie stellen wir Ihnen die Vorteile und Nachteile dieser unterschiedlichen Bildformate vor. In unserem ersten Teil beschäftigen wir uns dabei zunächst mit dem Bildformat JPEG.
Bilder für Web optimieren: Das Bildformat JPEG
Dieses Bildformat erkennt man an der Dateieindung *.jpg oder *.jpeg. Speichern Sie Ihre Fotos in diesem Format, werden die Bilder komprimiert. Leider passiert dies nicht verlustfrei. Das bedeutet: Je stärker Sie die Bilder komprimieren, desto mehr Informationen gehen verloren.
Schon beim Fotografieren kann man die Qualität der Speicherung beeinflussen. Einfache digitale Kompaktkameras geben häufig bestimmte Qualitätsstufen vor. Bei höherwertigen Kameras können Sie die Komprimierungsstufe einstellen. So wird die höchste Qualitätsstufe oft nur benötigt, um Fotos später ausdrucken oder als Poster vergrößern zu können. Für die Veröffentlichung von Bildern im Web reicht häufig eine mittlere Komprimierung aus.
Bilder für Web optimieren: Die Vorbereitung
Werden nun die Bilder für die Veröffentlichung auf einer Website vorbereitet, ist es zunächst einmal grundlegend, die spätere Ausgabegröße auf der Website zu wissen. Soll das Bild in einem großen Slider oder als kleine Ergänzung eines Textes dargestellt werden? Die spätere Ausgabegröße kann – und sollte – pixelgenau im Voraus festgelegt werden. Soll ein Bild beispielsweise im Format 800 x 600 px auf der Website publiziert werden, bereitet man ein Bild exakt auf diese Maße vor. Jedes Bild, dass mit größeren Maßen in die Website eingebettet wird, bedeutet eine Verschwendung von Ressourcen und eine unnötige Verlangsamung der Ladezeit.
Daher sollte man das Bild exakt auf diese Maße einstellen. Dazu gilt es, das Foto in Ihrem bevorzugten Bildbearbeitungsprogramm zu öffnen. Stellen Sie das Schneidewerkzeug auf die Maße 800 x 600 px bei einer Auflösung von 72 dpi ein. Wählen Sie den gewünschten Bildausschnitt und beschneiden Sie das Foto.
Bilder für Web optimieren: Detaileinstellungen beim JPEG
Nun sichern Sie das Foto im JPEG-Format. In Adobe Photoshop® (ab der Version Elements) etwa gibt es speziell für die Optimierung von Bildern fürs Web die Option ‚Für Web speichern‘. Wenn Sie diese Option wählen, können Sie noch einmal kontrollieren, ob Ihr Bild in der gewünschten Ausgabegröße gespeichert wird. Darüber hinaus können Sie die Qualitätsstufe der JPEG-Speicherung festlegen.
In den meisten Fällen können Sie ein Bild mit 60-80 % Informationsdichte ohne einen für den Betrachter auf den ersten Blick erkennbaren Qualitätsverlust speichern. Dennoch stellt dies einen Verlust von 20 bis 40 % der ursprünglichen Bildinformation dar. Die Dateigröße reduziert sich damit deutlich, was später einen erheblichen Geschwindigkeitsvorteil beim Laden der Website ergibt. In den meisten Bildbearbeitungsprogrammen wird die Dateigröße in kB angegeben, so dass Sie die physikalische Komprimierung besser einschätzen können.
Gerade Dateien in hoher Auflösung sollten Sie als sogenanntes „Progressive JPEG“ codieren. Dabei werden die Bilder in mehreren Qualitätsstufen innerhalb einer Datei abgespeichert. Gerade bei langsamen Internetverbindungen kann damit eine erste, grobe Ansicht der Datei eingelesen werden, während eine höhere Auflösung im Hintergrund nachgeladen wird.
In welchen Fällen wählt man JPEGs?
JPEGs eignen sich gut für Fotos und komplizierte Grafiken. Gerade bei Bildern mit Farbverläufen spielt dieses Format seine Stärke aus, denn es kann bis zu 16 Millionen Farben darstellen. Ein Nachteil von JPEGs dahingegen ist, dass keine Transparenz unterstützt wird. Damit eignet sich das Format weniger für die Einbettung von Logos in eine Webseite. Auch Animationen werden können mit JPEGs nicht dargestellt werden. Dazu sind andere Formate besser geeignet, die wir in unserer nächsten Folge vorstellen.
