Bildoptimierung im Web
Bilder sind ein wichtiges Medium um Emotionen zu übermitteln. Im Webdesign nehmen sie einen immer wichtigeren Platz ein. Werden die Bilder jedoch nicht für das Internet optimiert, kann die Ladezeit der Webseite stark darunter leiden. Durch einfache Tipps zur Bildoptimierung kann die Performance deiner Webseite verbessert werden, ohne die Qualität der Bilder zu beeinträchtigen.
Ob im Header oder als Fullscreen Hintergrund – großflächige Bilder und Grafiken sind für ein erfolgreiches Webdesign nicht mehr wegzudenken. Besonders bei sogenannten “Single-Page” -Designs werden Texte stark reduziert, um stattdessen durch vollflächige Bilder zu kommunizieren.
Dieser Trend bringt jedoch auch Nachteile mit sich. Da die Dateigröße einer Website zum Großteil aus den Grafikdateien besteht, kann die Performance darunter sehr leiden. Besonders wenn Bilddateien falsch abgespeichert oder eingefügt werden, kann dies die Ladezeit der Website erheblich verlängern. Dies beeinflusst auch die Userinnen und User, denn durch lange Ladezeiten sind diese weniger aktiv auf der Website bzw. verlassen sie früher. Selbst für das Google-Ranking spielt die Ladezeit einer Webseite eine Rolle.
Um dies zu vermeiden, sollten Grafiken so gut wie möglich komprimiert werden.
Die wichtigsten Schritte zum weboptimierten Bild
Unnötige Daten löschen
Da der Großteil der Dateigröße einer Website aus den Bilddateien besteht, sollten diese, soweit möglich, reduziert werden. Besonders simple Grafiken können alternativ als SVG oder CSS3 umgesetzt werden. Für Icons gibt es die Möglichkeit auf eigene Iconfonts zurückzugreifen, die speziell für das Web erstellt wurden. Texte sollten prinzipiell nie als Grafik, sondern als Webfont eingebaut werden.
Zusätzlich sollten keine unnötigen Bildpixel abgespeichert werden. Das sind beispielsweise transparente Pixel an den Rändern des Bildes. Oder Grafiken mit 1000px Breite, die auf der Website jedoch nur mit 10px Breite dargestellt werden. Hier ist es wichtig, die Grafiken zu skalieren bzw. zu beschneiden.
Das richtige Dateiformat wählen
JPG
JPG ist am besten geeignet für komplexe Grafiken wie Fotografien. Scharfe Kanten, große Farbflächen oder Texte können in einem JPG nicht optimal dargestellt werden. Transparenzen sind im JPG ebenfalls nicht vorhanden. Achtung: JPG selbst ist eine Kompression. Bei jedem Mal speichern gehen Bildinformationen und dadurch Qualität verloren.
PNG
Für große Farbflächen und scharfe Kanten ist PNG das geeignetste Format. Sobald Transparenzen verwendet werden, sollte ebenfalls PNG verwendet werden.
GIF
GIF kann auf wenige Farben reduziert werden. Sind in einer Grafik nur vollfarbige Flächen und keine Verläufe vorhanden lässt sich durch GIF ein kleine Dateigröße generieren. Ein weiterer Vorteil von GIF ist die Möglichkeit Transparenzen darzustellen sowie Animationen einzubauen.
Web P
Ein speziell für Web entwickeltes Bildformat von Google soll zukünftig eine Alternative darstellen. Jedoch ist es derzeit für uns noch nicht relevant, da es bisher nur von Google Chrome und Opera unterstützt wird.
Sinnvoll exportieren
Die meisten Bildbearbeitungsprogramme bieten die Option an, die Datei für das Web zu exportieren. Hier befinden sich zusätzliche hilfreiche Einstellungen für die verschiedenen Dateiformate, um die Dateigröße zu minimieren.
Besonders wichtig ist das für JPGs, deren Qualität soweit reduziert werden kann, soweit kein optischer Qualitätsverlust sichtbar wird. In der Regel lässt sich die Qualität auf ca. 70 % reduzieren, ohne eine sichtbare Veränderung festzustellen.
Linear vs Progressive
Für die Userinnen und User kommt es nicht nur darauf an, wie schnell eine Grafik lädt, sondern wie schnell die Grafik zu laden scheint. Prinzipiell gibt es 2 Möglichkeiten, ein Bild im Browser zu laden.
Linear
Hier lädt das Bild Zeile für Zeile von oben nach unten. Bei großen Dateien bzw. einer langsamen Internetverbindung ist der Ladevorgang sichtbar und wirkt schleppend.
Progressive
Hier wird das Bild Schritt für Schritt aufgebaut. Das Bild erscheint von Anfang an in voller Größe, jedoch in geringer Qualität. In jedem Schritt werden mehr Details geladen und die Qualität verbessert sich. Für die Userinnen und User wirkt dadurch der Ladevorgang deutlich schneller.
Damit eine Grafik im Browser progressive geladen wird, muss sie schon bei der Komprimierung richtig abgespeichert werden. In Adobe Photoshop lässt sich dies ganz einfach mittels einer Checkbox beim Exportieren einstellen.
Das Verhältnis von Pixelgröße, Dateigröße und Bildqualität
Durch die Vielfalt an Geräten und Auflösungen wird die Wahl der optimalen Bildkomprimierung nochmals erschwert – denn unsere Grafiken sollten nicht nur auf ein Gerät optimal abgestimmt sein, sondern auf Desktop, Tablet, Phone, Retina etc. gleichermaßen dargestellt werden. So erwartet sich zum Beispiel ein Retina Display die Grafik in einer doppelten Pixelgröße und Benutzerinnen und Benutzer eines Smartphones erhoffen sich unterwegs eine geringe Ladezeit sowie einen möglichst geringen Datentransfer.
Wir haben Bildqualität, Pixelgröße und Ladezeit anhand verschiedener Beispiele verglichen und dabei folgendes festgestellt:
Die besten Ergebnisse lassen sich erzielen, wenn die Abmessungen des Bildes möglichst groß bleiben, jedoch die Qualität stärker reduziert wird. Eine Qualitätsanpassung auf ca. 70 % ergibt dieselbe Dateigröße wie eine Größenanpassung auf 50 %. Jedoch ist das optische Ergebnis meist besser. Bei einem Bild mit sehr großen Abmessungen lässt sich hier auch die Qualität dementsprechend stark reduzieren, ohne optischen Qualitätsverlust.
Im folgendem Beispiel haben wir eine Fotografie mit 2000px Breite erst auf 1000px Breite reduziert und mit der Qualität 100 % abgespeichert. Ein weiteres Mal haben wir die Breite bei 2000px belassen und nur die Qualität auf 50 % runtergesetzt. Das Ergebnis spricht für sich:
| Pixelbreite | Qualität | Dateigröße | |
|---|---|---|---|
| Pixel reduziert / Qualität erhalten | 1000px | 100% | 237 KB |
| Qualität reduziert / Pixel reduziert | 2000px | 50% | 102 KB |
Für den Browser bedeutet das, dass er die Bilder größer angeliefert bekommt, als er sie anzeigt. Dies ist ein Vorteil für Retina Bildschirme, da diese eine sehr hohe Pixeldichte haben und normale Bilder unscharf darstellen. Auf Retina Bildschirmen müssen Bilder mit einer doppelten Bildgröße abgespeichert werden, um scharf dargestellt zu werden.
- Retina
- Breite des Bildes: 1700px
- Breite im Web: 850px
- Nicht Retina
- Breite des Bildes: 850px
- Breite im Web: 850px
Leider ist bei unseren Tests aufgefallen, dass nicht alle Desktop Browser Retina Bilder gleich anzeigen. Chrome und Firefox beispielsweise zeigen Retina Bilder ohne Qualitätsverlust, jedoch erscheinen die Bilder in Safari unscharf.
Fazit
Das perfekte Rezept für Bildkompression gibt es nicht, denn jedes Bild ist anders und sollte individuell behandelt werden. Ein interessantes Ergebnis unserer Recherche ist, dass die Qualität bei der Komprimierung viel mehr zur Dateigröße beiträgt, als die Pixelgröße. Da es vereinzelt Darstellungsprobleme mit Retina Bildern auf Nicht-Retina Bildschirmen gibt, ist es sinnvoll die Grafik in 2 verschiedenen Größen zu verwenden.
Für größere Projekte lohnt es sich in ein Automatisierungs-Tool zu investieren, welches die Grafiken komprimiert und in die verschiedenen Formate abspeichert.
Ein Blick in die Zukunft lässt auf spezielle Bildformate für das Web hoffen (siehe Web P). Oder auf ein eigenes
Hilfreiche Tools
Um die Performance Deines Blogs oder deiner Website zu testen gibt es bereits verschiedene Hilfsmittel, die Deine Seite analysieren und Tipps zur Verbesserung liefern.
Ein Beispiel dafür ist Pingdom, hier können Informationen wie Ladezeit und Größe der Website abgefragt werden. Zusätzlich bieten sie eine Auswertung der Performance der Website, mit einer sehr detaillierten Aufschlüsselung der Ergebnisse.
Ein weiterer beliebter Speedtest wird von Google angeboten. Dieser liefert eine Liste von “Should fix”, “Consider Fixing” und “Passed Rules” zurück. Sie bieten zusätzlich Lösungsansätze zu den aufgelisteten Problemen an.
Um Bilder bestmöglich für das Web zu optimieren gibt es Online Tools mit deren Hilfe Bilder ähnlich komprimiert werden können wie mit Adobe Photoshop: Beispiele sind: compressor.io, kraken.io und tinypng.com.
Jetzt weißt du, wie man Bilder für das Web optimiert. Ob du sie auch verwenden darfst, erfährst du in dem Blogbeitrag zum Urheberrecht.
Veröffentlicht am: 07.12.2016
Autorin
Christina Muhm
Wir haben noch mehr super interessante Blogartikel!