Website-Bilder erfüllen weitaus mehr als nur einen dekorativen Zweck! Zum einen sind sie ein wichtiges Instrument, um Website-Besucher emotional anzusprechen und zum anderen sind Bilder ein starker Ranking-Faktor, denn sie helfen Suchmaschinen dabei, die Seiteninhalte noch besser einzuordnen.
Aber Vorsicht: Zu große, speicherintensive Bilder zählen zu den größten Performance-Killern. Dagegen wirken schlecht fotografierte oder verpixelte Bilder unprofessionell und werfen kein gutes Bild auf den eigenen Qualitätsanspruch.
In diesem Beitrag geht es um die richtige Optimierung von Bildern für das Web und darum was beim Speichern und Hochladen zu beachten ist. Der Artikel soll ein grundlegendes Verständnis vermitteln und richtet sich an die „normalen User“ – wie WordPress-Redakteure und -Autoren.
Bildformate
Es gibt zahlreiche Dateiformate für Bilder – für das Web sind jedoch nur die folgenden Formate *.jpg, *.png und *.gif relevant:
JPG (Joint Photographic Experts Group)
JPG (oder auch JPEG) ist das kompatibelste und bekannteste Bildformat für digitale Bilder und unterstützt das volle Farbspektrum. Die Vorzüge des *.jpg-Formats liegen in der Komprimierung, die zu deutlich kleineren Dateigrößen führt und trotzdem die bestmögliche Qualität beibehält – was wiederum zu kürzeren Ladezeiten der Website führt.
PNG (Portable Network Graphic)
PNG-Bilder können mit transparentem Hintergrund gespeichert werden. Das Format wird meist für Icons oder Logos verwendet und unterstützt auch – wie das JPEG – die Bildkompression. In manchen Fällen ist jedoch die verlustbehaftete JPEG-Kompression besser geeignet.
GIF (Grapics Interchange Format)
GIF-Bilder können im Gegensatz zu *.jpg und *.png-Bildern animiert werden. GIFs haben jedoch den Nachteil, dass sie nur 256 Farben darstellen können. Das ist jedoch oftmals zu wenig, kann aber für manche Website-Elemente (simple Animationen) völlig ausreichend sein.
Bildgröße
Fotos dürfen niemals in der Originalgröße (z. B. 5039 x 3358 Px) ins Web hochgeladen werden, denn zu große Bilder bremsen die Performance (Ladegeschwindigkeit) einer Website enorm! Ein Fehler, der gerne von Anfängern gemacht wird.
Bilder müssen das richtige Format haben und unbedingt schon vor dem Upload komprimiert bzw. angepasst werden. Aber wie groß darf ein Bild überhaupt sein? Um die Frage beantworten zu können, sollte man wissen, wie die Größe eines Bildes gemessen wird. Die Maßeinheit nennt sich Pixel und ist ein Bildpunkt aus dem sich mosaikförmig eine Rastergrafik zusammensetzt.
Die Grafik links zeigt beispielhaft, wie groß ein Bild mit den Maßen 280x80px ist und wie es dementsprechend auf einer Website angezeigt wird. Damit erhalten Sie ein Gefühl für die Maßeinheit „Pixel“.
Der Contentbereich oder auch Inhaltsbereich einer Website ist in der Regel um die 1000 Pixel breit. Dagegen haben so genannte Full-Width Bilder (für Slider und Header) eine Breite von etwa 1920 Pixel. Daraus lässt sich schon ableiten, wie groß ein Bild maximal sein muss, d. h. ein Bild sollte also nur so breit sein, wie es auf der Website dargestellt werden kann.
Full-Width Bilder (Slider/Header): ca. 1920px (Breite)
Content Bilder (Inhaltsbereich): 600 bis 800px (Breite)
Dateigröße
Bei der Bildoptimierung wird die kleinstmögliche Dateigröße bei einer bestmöglichen Bildqualität angestrebt. Eine 80-Prozent-Qualität und 72dpi sind dabei völlig ausreichend, denn eine bessere Qualität kann vom Web-Browser ohnehin nicht dargestellt werden!
Die Bilder des Erdmännchens wurden skaliert und haben jetzt eine Bildgröße von 400 x 300 Pixel. Die Größen sind also identisch, allerdings wurden die Bilder in unterschiedlichen Kompressionsstufen abgespeichert.
Bild 1: Keine Komprimierung 100% Qualität (127KB)
Bild 2: JPEG-Komprimierung 80% Qualität (66KB)
Bild 3: JPEG-Komprimierung: 5% Qualität (12KB)
Auf den ersten Blick ist fast kein Qualitätsunterschied zu erkennen. Aber eben nur fast. Beim genaueren Hinsehen fällt nämlich auf, dass das dritte Bild – durch die starke Kompression – deutlich sichtbare Artefakte aufweist: die Konturen wirken verschwommen und auch die Schärfe und Details gingen verloren. Dagegen hat die minimale Komprimierung des zweiten Bildes fast keine Kompressionsspuren hinterlassen – es ist immer noch von guter optischer Qualität. Zudem konnte die Dateigröße, im Vergleich zum ersten Bild (ohne Komprimierung), fast um die Hälfte reduziert werden.
Tools zur Komprimierung
Sollten Sie kein Grafikprogramm haben, mit welchem sie Bilder verkleinern bzw. komprimieren können, dann empfehlen wir Ihnen das kostenlose Online-Tool TinyPNG, welches sowohl PNG- als auch JPG-Bilder optimieren kann.
