In Zeiten der Reiz- und Informationsüberflutung wird es schwieriger, den Webseitenbesucher für Inhalte zu begeistern bzw. seine Aufmerksamkeit für den Inhalt aufrecht zu erhalten. Da die Verweildauer auf der Webseite ein Suchmaschinen-Rankingfaktor ist, sollten Webmaster alles daran setzen, ihre Besucher auf der eigenen Internetpräsenz zu halten. Ein seit Ewigkeiten erfolgreiches Mittel ist die Auflockerung von Texten mit Bildern. Je nach Motiv verharrt der Leser einige Augenblicke und versucht das Bild mit dem gelesenen Text in einen Zusammenhang zu bringen. Sollte das nicht funktionieren, muss das Bild zumindest sexy sein ;-).
Nun sagt ein Bild zwar mehr als tausend Worte und leistet seinen Beitrag zur Verweildauer, jedoch ist es in den meisten Fällen zu groß, was das Datenvolumen betrifft. Dies wiederum bremst die Seitenladegeschwindigkeit aus, wodurch der Rankingfaktor Geschwindigkeit (PageSpeed) ausgehebelt wird. Nachfolgend erklären wir, wie man Bilder und deren Ladegeschwindigkeit unter einen Hut bekommt.
- Es darf auch etwas weniger sein!
In den seltensten Fällen wird auf einer Internetseite ein Bild mit den Maßen 3840×2160 benötigt. Diese Bildgröße entspricht aber in etwa dem, was ein aktuelles Smartphone bei einer Dateigröße von ca. 3MB produziert. Wer solch ein Bild auf seiner Internetpräsenz einbindet, hat sowohl beim Besucher, als auch bei den Suchmaschinen schlechte Karten. “Es lädt einfach zu lange”. Selbst wenn im Hintergrund der Webseite ein Content-Management-System wirkt und sich um eine gute Bildkompression bemüht, wird das nie so gut, wie es sein könnte.
- Bildausschnitt erstellen
Oft hat ein Bild mehr Inhalt, als eigentlich benötigt wird. Da insbesondere beim Smartphone mit den Füßen gezoomt wird (näher ans Objekt ran gehen), dies aber nicht immer möglich ist, könnte man bei der Nachbearbeitung nur den gewünschten Teil aus dem Bild herausschneiden. Hier ein Beispiel:
Ziel sollte sein, den Petersberg in Königswinter zu fotografieren. Durch die Entfernung und den heute inaktiven (Fuß) Zoom, sind noch allerlei andere Gebäude zu sehen. Reduziert man das Bild auf das Wesentliche wie in folgendem Bild…
…ändert das zwar nichts am Nebel in Königswinter, aber das Prinzip sollte klar werden.
Von der ursprünglichen 3 MB-Datei sind nach diesem Schritt nur noch 500KB übrig. Der Bildausschnitt wurde mit dem kostenlosen Grafikprogramm GIMP über das Auswahl-Werkzeug erstellt. Im nächsten Schritt wurde das Bild noch über das Gimp-Menü Bild->Bild skalieren auf eine Bildbreite von 600 Pixel reduziert und über den Menüpunkt Datei->Exportieren im .PNG-Format abgespeichert. Nach diesen Schritten war das Bild noch 180KB groß.
- Das Finale
Zum Abschluss sollte das Bild noch einmal komprimiert werden. Und zwar verlustfrei (!) auf Werte deutlich unter 100KB (ideal sind Werte um 20KB). Das Bild wird dadurch “leichter” im Datenvolumen, aber ohne zu verpixeln oder anders an Qualität einzubüßen. Die Webseite https://tinypng.com liefert hierbei richtig gute Ergebnisse. In diesem Fall war das Bild vom Petersberg am Ende nur noch knapp 18KB groß und kann somit im Web ohne lange Ladezeiten zu riskieren zum Einsatz kommen. Das freut die Suchmaschinen und die Nutzer gleichermaßen.
