Heutzutage unvorstellbar: eine Webseite ohne visuelle Elemente. Bilder haben sich zu einem wesentlichen Bestandteil so ziemlich aller Internetseiten entwickelt – sie ziehen die Aufmerksamkeit der Nutzer auf die Seite und halten sie, außerdem ist es durch Infografiken möglich, komplexe Sachverhalte und Informationen gebündelt sowie vereinfacht darzustellen. Doch da Bilder mehr sagen als 1000 Worte, benötigen sie auch entsprechend mehr Speicherplatz.
Daten werden generell immer größer, da sie immer mehr Informationen beinhalten - bei Bildern ist das nicht anders: höhere Auflösung mit mehr Bildpunkten, höhere Farbtiefe sowie detailreiche Darstellungen. War ein Bild im JPG-Format vor ca. 20 Jahren noch 10 – 100 KB groß, sind es heute, je nach Auflösung, meist mehrere MB.
Warum ist Bildkompression wichtig?
Durchschnittlich liegt die Größe einer Website heutzutage bei 2 bis 3 MB. Über 4 MB hinaus sollten sie im besten Fall nicht sein. Nicht-komprimierte Bilder können jedoch bereits dieses Gesamtvolumen ausmachen und sich negativ auf die Seitenladezeit auswirken. Die Performance ist dabei nicht wichtig für die Nutzererfahrung der Seitenbesucher, sondern auch ein kritischer Faktor für SEO und das Google Ranking. Eine schnelle Ladezeit verbessert nicht nur das Nutzererlebnis, sondern wird auch von Suchmaschinen positiv bewertet, was zu einer höheren Position in den SERPs (Search Engine Result Pages) führt.
Sind die Bilder unverhältnismäßig groß, können sie die Seitenladezeit von Webseiten jedoch merklich negativ beeinflussen. Viele Webseitenbetreiben sehen sich vor dem Problem zwischen Qualität und Performance entscheiden zu müssen. Es gibt jedoch ein paar Stellschrauben, mit Hilfe derer der Spagat gelingt.
Stellschrauben
Dateiformat
Mittlerweile gibt es eine Vielzahl an Dateiformaten, die für die verschiedensten Anwendungsfälle geeignet sind.
JPEG / JPG
Gut geeignet für Fotos und Bilder mit vielen Farben und Farbverläufen, da sich bis zu 16,8 Millionen Farben darstellen lassen ohne dass die Datei zu groß ist. Die Kompression ist allerdings Verlustbehaftet und kann die Qualität schmälern.
PNG
Ideal für Bilder mit transparenten Hintergründen oder solche, die eine hohe Detailgenauigkeit erfordern, wie Logos und Grafiken. PNG-Dateien sind durch den Detailreichtum größer als JPEGs, lassen sich jedoch verlustfrei Komprimieren.
Bei PNG sowie JPG handelt es sich um pixelbasierte Rastergrafiken – haben also eine feste Pixelanzahl, was die Skalierung beschränkt.
WebP
Ein modernes Format, das sowohl verlustfreie als auch verlustbehaftete Komprimierung unterstützt. WebP-Dateien sind oft kleiner als JPEGs und PNGs bei vergleichbarer Qualität. Auch dieses Format unterstützt transparente Hintergründe.
SVG
SVG ist ein Vektorformat, das sich besonders für Logos, Icons und einfache Grafiken eignet. Solche Dateien sind sind skalierbar und verlieren auch bei Vergrößerung nicht an Qualität.
Skalierung & Kompression
In der Regel werden Webseiten auf Bildschirmen von bis zu.2000 Pixeln Breite betrachtet. So müssen die Bilder meist auch nicht breiter sein als 1.000 Pixel – ausgenommen ein Header Bild, was die ganze Breite des Bildschirms einnimmt.
Zusätzlich zur Reduzierung der Bildgröße ist es empfehlenswert PNG und JPG Dateien zusätzlich zu komprimieren. Hierfür gibt es zahlreiche Online-Tools wie beispielsweise tinypng.com
Ladeverhalten
In der Webentwicklung gibt es außerdem die Möglichkeit nicht alle Bilder sofort zu laden, sondern erst, wenn sie in den Sichtbereich des Nutzers kommen. Dies nennt sich Lazy Loading und reduziert die initiale Ladezeit der Seite.
Um die Bildgröße den Geräte-Größe, auf denen die Seite gerade aufgerufen wird anzupassen, wird gern das srcset-Attribut genutzt, um je nach Bildschirmgröße unterschiedliche Bildversionen auszuliefern, sodass auf mobilen Geräten kleinere Bilder geladen werden.
Weiterhin kann mit passenden Caching-Einstellungen einiges erreicht werden.
