«Ich möchte ein grosses, eindrückliches Bild auf der Hauptseite» – so tönt es bei fast jeder Webseitenplanung. Bilder sind längst unabdingbar auf Webseiten – sie lösen Emotion aus, geben einen Einblick ins Unternehmen und erleichtern den Lesefluss.
Es gibt aber einen Haken für Ihre Webseite. Die Ladegeschwindigkeit der Seite wird durch zu hoch aufgelöste Bilder massiv verringert. Das mögen die Suchmaschinen gar nicht und bewerten die Webseite schlechter. Tatsächlich ist die Ladegeschwindigkeit der Webseite einer der Top-Faktoren, wenn es darum geht, ob Google Ihre Seite gut oder weniger gut einstuft. Deshalb ist es sehr wichtig, Bilder fürs Web zu optimieren.
Wie optimiere ich meine Bilder fürs Web?
Wir brauchen ein Gleichgewicht. Ein gutes Bild, das gleichzeitig schnell lädt. Wir möchten den optimalen Punkt zwischen niedrigster Dateigrösse und akzeptabler Qualität finden!
Dateiformat und Kompression spielen dabei eine wichtige Rolle. Die Bildgrösse kann um ein Vielfaches verkleinert werden, bei idealer Anwendung. Es gilt also verschiedene Schritte zu durchlaufen.
1 – Grösse anpassen
Zuerst passen wir die Grösse des Bildes an – für Bilder in einem Blog reichen 640 bis 960 Pixel auf der längeren Kante meist gut aus. Soll das Bild wirklich den ganzen Bildschirm füllen, dann muss das Bild genug gross behalten werden – eine Full HD Auflösung ist 1920 x 1080 Pixel.
2 – Kompressionsart/Dateiformat wählen
Danach gilt es, das richtige Dateiformat und somit auch die richtige Kompressionsart zu wählen.
- PNG – die Kompression ist bei PNG meist verlustfrei – das ist gut für Ihr Foto, weil die Qualität nicht schlechter wird, wie beim JPEG. Die Dateigrösse hingegen, lässt sich dadurch beim PNG nicht so stark verringern, wie beim JPEG.
- JPEG – mit JPEG lassen sich Dateigrössen von Bildern um ein Vielfaches verkleinern. Hier ist die Kompression aber verlustbehaftet, das heisst, es muss darauf geachtet werden, dass Qualität und Kompression im Gleichgewicht sind.
- GIF – werden fast nur noch für animierte Bilder verwendet. GIFs haben einen vergleichsweise kleinen Farbraum mit nur 256 Farben, was die Qualität des Bildes verringert.
3 – Test
Sind die Bilder verkleinert und komprimiert, werden sie in die Webseite eingefügt. Es ist wichtig, sich anzuschauen, wie die Bilder nun wirken. Wirkt die Qualität ersichtlich schlechter, dann muss die Komprimierung nochmals angepasst werden. Wenn die Qualität passt, dann sollte das Bild idealerweise nicht über 100 oder 200 KB gross sein. Zumindest für einen Blogbeitrag gilt diese Faustregel.
Hier folgen nun zwei Beispiele zu grossen, kleinen und mittleren Dateigrössen. Seht ihr die Unterschiede? Wenn nicht, dann klickt auf das Bild – in der Grossansicht werden sie offensichtlich.
original – 6 MBDas obere Bild ist zwar schön und in guter Qualität, die Dateigrösse ist aber für eine Webseite viel zu gross und macht sie langsam. Vor allem wenn mehrere solch grosser Bilder auf einer Webseite sind.
klein – 40 KBDieses Bild hingegen ist zu fest komprimiert. Vor allem in den unscharfen Zonen des Bildes sind die Pixel zu erkennen, was unbedingt vermieden werden sollte.
Hier wurde ein Mittelweg zwischen optimaler Qualität und Dateigrösse gefunden. Die Datei ist für eine Webseite schnell ladbar und qualitativ trotzdem gut. Beim nächsten Beispiel werden die Unterschiede ebenfalls vor allem in den unscharfen Bereichen des Fotos ersichtlich
original – 8MB
klein – 25KB
optimiert – 100 KB
Fazit
Bilder sollten im Web so klein wie möglich sein und so gross wie nötig. Haben Sie Ihre Bilder auf der Webseite schon optimiert? Oder könnte es sein, dass da noch viel Potenzial wäre, um die Ladegeschwindigkeit der Seite zu optimieren?
Auf dieser Webseite können Sie herausfinden, wie es um die Optimierung ihrer Bilder steht.
Die Bilder zu verkleinern, ist eine effiziente Art, Suchmaschinenoptimierung zu betreiben. Google sieht es gerne, wenn Webseiten schnell laden. Im nächsten Blog-Post wird erklärt, mit welchen Hilfsmitteln Sie Bilder optimieren können. Falls Sie heute schon Hilfe brauchen, unterstützen wir Sie gerne!
