Bilder-SEO – Alles, was du wissen musst!

Bilder und Pagespeed

Bilder im Web haben verschiedene Eigenschaften, die sie mit sich bringen. Da diese häufig verwechselt oder durcheinander gebracht werden, habe ich dazu eine passende Infografik erstellt:

Ergänzend möchte ich noch zum Thema Pagespeed und Bilder erwähnen, dass mithilfe der Verwendung eines CDN die Serverlast deutlich verringert werden kann. Wenn also alles andere nicht hilft oder zu viel Aufwand bedeutet, könnte auch ein CDN eine Option sein.

Dateiformate

Es gibt verschiedene Dateiformate, die sich besonders für Webprojekte eignen, ohne dabei lange Ladezeiten zu provozieren. Und dann gibt es da auch noch die alten Bildformate, die jeder kennt und gerne aus Gewohnheit genutzt werden.

• JPG
  • Decken das volle Farbspektrum ab
  • Bilder werden immer verlustbehaftet abgespeichert
  • Keine Transparenz möglich
• PNG
  • Decken das volle Farbspektrum ab
  • Verlustfreie Kompression
  • Transparenz
  • Größere Dateien als bei JPG – primär bei Fotos
  • Ideal für Illustrationen, Grafiken und Logos – aber nicht für Fotos
• SVG
  • Vektorgrafiken, die stufenlos skalierbar sind, ohne dabei einen Qualitätsverlust zu erleiden
  • Pfade können direkt im CSS hinterlegt werden
  • Ideal für Logos, Icons, Piktogramme und Illustrationen
  • Nicht geeignet für „klassische Bilder“
• GIF
  • Transparenz
  • Ideal für Bewegtbilder
  • Beschränkung auf 256 Farben
• WebP
  • Einsparung gegenüber JPEG 25-34% und gegenüber PNG 26-80% [1]
  • Unterstützt nahezu verlustfreie Transparenz und Animation
  • Kann ausschließlich fürs Web verwendet werden
  • Benötigt spezielle Tools zur Umwandlung
  • Wird bisher nicht von allen Browsern unterstützt (→ Zur Kompatibilitätsübersicht)
• AVIF
  • Open-Source-Dateiformat: Lizenzprobleme können also keine Entwicklungsprobleme verursachen
  • Sehr hohe Kompressionsrate und noch besser als WebP
  • Unterstützt nahezu verlustfreie Transparenz und Animation
  • Im Vergleich zu JPG sind Einsparungen von 50% möglich [2]
  • Benötigt Spezielle Tools zur Umwandlung
  • Wird bisher nicht von allen Browsern unterstützt (→ Zur Kompatibilitätsübersicht)

Gerade bei neueren Dateiformaten ist oft die Kompatibilität ein größeres Problem. Inzwischen werden wirklich schon viele Browser unterstützt, aber eben bisher nicht alle. Um in solchen Fällen abgesichert zu sein, eignet sich die Verwendung des HTML-Tags <picture>, um alternative Dateiformate anzubieten, falls das gewünschte Dateiformat nicht unterstützt wird (Fallback-Möglichkeit).

Ich persönlich werde zukünftig hauptsächlich auf das Dateiformat AVIF setzen – dabei aber zusätzlich mit Fallback Formaten wie JPG und PNG arbeiten.

Dateigröße

„Lisa, wie groß sollte denn ein Bild sein?“ – diese Frage erreicht mich immer und immer wieder. Und dabei möchte ich ungern mit konkreten Zahlen antworten, weil es immer darauf ankommt, wo das Bild platziert ist, in welcher Größe es auf der Website vorzufinden und was darauf zu sehen ist. Daher sage ich immer „So groß wie nötig, aber so klein wie möglich“.

Dabei spielt selbstverständlich auch das Dateiformat eine große Rolle. Wie wir oben bereits gelernt haben, lassen sich manche Formate besser komprimieren als andere. Wenn ich dir jetzt eine fixe Zahl verraten würde, könnte es sein, dass das Bild für deine Zwecke zu klein oder zu groß ist.

Im Idealfall solltest du bei deinen komprimierten Bildern unter 150KB bleiben. Überprüfe aber unbedingt, ob die Anzeige auch deinen Erwartungen entspricht.

Bildgröße

Die Bildgröße wird oft mit der Dateigröße verwechselt. Das ist mir sicher schon passiert, wenn ich einfach so drauflos geplappert habe. Dennoch geht es bei der Bildgröße nicht um den verbrauchten Speicherplatz (ich vergleiche das auch immer mit dem Gewicht der Datei), sondern eher um die Abmessung auf dem Bildschirm.

Dabei liegt die ideale Bildgröße im Web zwischen 600px und 1920px. Aber auch hier heißt es wieder: Es kommt darauf an! Handelt es sich nur um eine kleine Grafik oder um ein Bild, das im Fließtext platziert wird, reichen auch kleinere Bildgrößen locker aus.

1024x683px

205x137px

Du kannst auch Bilder für verschiedene Bildschirmgrößen zur Verfügung stellen. WordPress kümmert sich zum Beispiel schon automatisch darum.

Lieferst du eine zu große Bildgröße aus, muss das Bild erst einmal herunterskaliert werden, was auch deine Ladezeit nochmals beeinträchtigt.

Auflösung

Die Auflösung eines Bildes ist ein gewisser Qualitätsfaktor. Bilder mit einer geringen Auflösung sind verpixelter als Bilder mit einer hohen Auflösung. Man könnte hier auch von der Schärfe des Bildes sprechen.

Jetzt ist das aber so, dass ein Bild fürs Web nicht so hoch aufgelöst sein muss, wie ein Bild, welches als Poster gedruckt wird. Hier gilt: So hochauflösend wie nötig.

240dpi

72dpi

Dabei spielt natürlich auch wieder das Dateiformat eine große Rolle: Durch eine gute Komprimierung muss man bei der Qualität des Bildes keine Einstriche machen.

EXIF-Daten

In den EXIF-Daten werden verschiedene Bildinformationen gespeichert. Diese Daten sind gewissermaßen der Fingerabdruck deines Bildes. Dort findest du Informationen über das Kameramodell, Aufnahmedatum, Einstellungen der Kamera …

Oft wird bei Pagespeed-Optimierungen oder Komprimierungen empfohlen, die EXIF-Daten zu löschen, da diese als „unnötig“ abgetan werden. Aus SEO-Sicht sehe ich das aber anders: Die EXIF-Daten können eine (wenn auch nur eine kleine) der vielen SEO-Stellschrauben sein. Denn durch diese kann die Suchmaschine das Bild noch besser verstehen. Zum Beispiel kann man in den EXIF-Daten Informationen über den Standort und die Aktualität des Bildes herausfinden. Auch das Thema Urheberrecht spielt hier eine große Rolle. [3]