Bilder beeinflussen nicht nur die Optik einer Seite, sondern auch Rankings in der Google-Suche, Google Discover und Google News. Wenn sie falsch eingebunden sind, riskierst Du unter anderem langsame Ladezeiten und eine schlechte Performance in den Core Web Vitals. Lass uns einmal zusammen schauen, wie Du diese Risiken vermeiden kannst.
Warum ist Bildoptimierung so wichtig?
Google bevorzugt schnelle, zugängliche Inhalte. Besonders in Discover und Google News sind hochwertige Bilder Faktoren für die Leser und für die Ausspielung. Wichtig sind dabei korrekte Bildgrößen, moderne Formate und schnelle Ladezeiten. Google Discover setzt für große Vorschauen eine Mindestbreite von 1.200 Pixeln voraus. Damit diese Bilder in den Feeds erscheinen, muss außerdem max-image-preview: large in den Meta-Tags gesetzt sein.
Neben der Sichtbarkeit in den Feeds ist auch die Ladegeschwindigkeit entscheidend. Google misst sie in der GSC unter "File Type: Image". Ein guter Wert für Bilder liegt bei unter 50ms Ladezeit. Alles darüber ist meh. Bilder mit modernen Formaten, effizienter Kompression und korrektem Lazy Loading sind hier definitiv der Gold-Standard.
Die richtigen Bildformate wählen
Google empfiehlt WebP und AVIF, da sie kleinere Dateigrößen bei hoher Qualität ermöglichen.
- WebP ist weit verbreitet, spart im Vergleich zu JPEG etwa 30 % Dateigröße und wird von modernen Browsern unterstützt.
- AVIF komprimiert noch stärker, wird jedoch nicht von jedem Browser verarbeitet. Hier lohnt sich eine schrittweise Implementierung mit Fallbacks.
Mit f_auto wird das optimale Bildformat automatisch anhand des Browser-Supports (also dem Format das der Browser unterstützt) ausgeliefert. Das vermeidet überflüssigen Code und spart Bandbreite. Wenn ein Nutzer eine Website aufruft, sendet sein Browser im HTTP-Header eine Accept-Anfrage, die angibt, welche Bildformate unterstützt werden. Der Server analysiert diese Anfrage und liefert dann die optimale Version des Bildes aus:
- WebP, falls vom Browser unterstützt (Chrome, Edge, Firefox, neuer Safari)
- AVIF, falls vom Browser unterstützt (neuere Chrome-, Edge- und Safari-Versionen)
- JPEG oder PNG, falls WebP oder AVIF nicht unterstützt werden
Das bedeutet, dass ein Nutzer mit Chrome ein WebP-Bild erhält, während ein älterer Browser wie Internet Explorer ein JPEG bekommt, ohne dass separate Bilddateien verwaltet oder eingebunden werden müssen.
Was ich mich in dem Zuge unter anderem gefragt habe, ist ob die dynamische Bildauslieferung als Cloaking gewertet werden könnte. Das ist aber nicht der Fall. Cloaking liegt nur dann vor, wenn unter derselben URL für Nutzer und Suchmaschinen völlig unterschiedliche Inhalte ausgeliefert werden. Die dynamische Bildauslieferung verändert aber nur das Format oder die Größe des Bildes, nicht den eigentlichen Inhalt und solange sie nicht per robots.txt gesperrt sind, gibt es hier auch keine Crawl-Probleme.
Zusätzlich zur Formatwahl hilft die dynamische Bildoptimierung, Bilder in der richtigen Qualität, Größe und im passenden Format auszuliefern:
- q_auto passt die Bildqualität automatisch an, um die Balance zwischen Dateigröße und sichtbarer Qualität zu optimieren.
- c_fit stellt sicher, dass das Bild auf verschiedenen Geräten korrekt skaliert wird, ohne das Seitenlayout zu verzerren.
Anders als bei der clientseitigen Lösung (srcset, <picture>) erfolgt die Bildauswahl serverseitig über ein Image-CDN, bevor der Browser das Bild überhaupt lädt. Da f_auto als Parameter eine eigenständige URL erzeugt, kann die On-the-fly-Generierung je nach Serverauslastung zu Verzögerungen führen. Daher ist ein durchdachtes Caching wichtig, um Performanceprobleme zu vermeiden. An dieser Stelle greifen die 5 Ps: Proper Preparation Prevents Poor Performance. Wenn diese Aspekte im Vorfeld richtig bedacht werden, ist f_auto möglicherweise eine effiziente Methode, um moderne Bildformate automatisch bereitzustellen. Hast Du schon Erfahrungen damit? Melde Dich gerne bei mir!
Ladegeschwindigkeit und Lazy Loading
Bilder sollten so schnell wie möglich geladen werden, aber nur dann, wenn sie auch sichtbar sind. Lazy Loading (loading="lazy") sorgt dafür, dass Bilder erst dann geladen werden, wenn sie im sichtbaren Bereich erscheinen. Das spart Bandbreite und verbessert die First Contentful Paint in den Core Web Vitals. Hannemann hat letzte Woche einen tollen Artikel zum Lazy Loading geschrieben. Dynamische Bildauslieferung mit f_auto oder srcset hat darauf keinen Einfluss: Lazy Loading bleibt trotzdem aktiv.
Barrierefreiheit und Alt-Texte
Ein optimales Bild ist nicht nur schnell, sondern auch zugänglich. Alt-Texte sind ein MUSS (mit Ausnahmen) für die Barrierefreiheit und helfen den kleinen Crawlern, den jeweiligen Bildinhalt zu verstehen.
- Alt-Texte müssen präzise und beschreibend sein
- Dekorative Bilder sollten mit alt="" versehen werden, damit Screenreader sie ignorieren.
Passen Deine Bilder schon in dieses Bild?