Bilder sind einerseits wichtig für ansprechende Inhalte und gegen Textwüsten, andererseits kosten sie nicht nur bei der Erstellung Arbeitszeit, sondern auch Ladezeit und wirken sich somit hauptsächlich indirekt auf die SEO einer Website aus. Wieso indirekt? Weil das bisschen Traffic, welches man über die Google-Bildersuche gewinnen kann, nicht konvertiert (zumindest in den letzten 2 Jahren nach eigens gemessenen 120.000.000 Website-Besuchern unserer Kundenprojekte).
Die wenigen Nutzer, die über die Bildersuche auf eine Website kommen, sind also meist nur am Download der Bilder interessiert. Bilder-SEO lohnt sich somit nur noch zur Vermarktung noch Infografiken. Für andere Bilder kann man sich den SEO-Aufwand sparen. Aber es gibt trotzdem einiges zu beachten.
Wann sollte man Bilder in der Website einsetzen?
Obwohl ich ein Fan schneller Ladezeiten bin und somit gerne den Einsatz von Medien auf das Nötigste reduziere, empfehle ich so viel Bilder wie möglich und so wenig wie nötig einzusetzen:
Wie anfangs gesagt dienen Bilder dem einfacheren Verständnis der Inhalte und lockern Texte auf. Key Visuals für Seiten und Titelbilder für Blog-Beiträge sind genauso empfehlenswert wie alle Bilder im Kontext, welche also das Verständnis der Inhalte erleichtern.
Auf Bilder, die aber nur ergänzend zum Inhalt und beispielsweise als Lückenfüller eingesetzt werden, sollte man jedoch tunlichst verzichten. So zum Beispiel ein Bild von Menschen, die einander die Hände schütteln, um einen Abschnitt zu Vertragsrecht einer Rechtswanwaltskanzlei zu visualisieren. Als ergänzende Visualisierungen empfehle ich besser Icons, Grafiken und Illustrationen einzusetzen, welche praktischerweise mithilfe
- einer Icon-Schriftart (Es gibt vorgefertigte und individuell zusammenstellbare Schriftarten, die nur für einfarbige Icons gedacht sind, wie z. B. Line Icons)
- einer Image-Sprite (mehrere individuelle Icons ggf. unterschiedlicher Farbe werden mittels eines Sprite Generators in einer Bilddatei zusammengelegt und dann per CSS nur der Teil dargestellt, der gebraucht wird – dadurch werden weniger einzelne Dateien geladen)
- oder – sofern es komplexere Grafiken und Illustrationen handelt – als SVG-Vektorgrafiken oder als animierte Lottie-Files skalierbar (d.h. ohne bei höheren Auflösungen zu verpixeln) und
Performance-optimiert eingesetzt werden. Hier gibt’s tiefergehende Infos für WordPress-Website-Betreiber zur Performance-Optimierung.
Die richtigen Bildformate
Ich habe bereits für Icons, Grafiken und Illustrationen Icon-Fonts, Image-Sprites und Vektordateien bzw. -Animationen genannt. Zur Not tun es auch PNG- oder GIF-Dateien, welche beim Export aus Photoshop & Co. auf die kleinstmögliche Dateigröße komprimiert und zusätzlich vor/ beim Upload mittels tinyPNG komprimiert werden.
Für Fotos empfehle ich konservativ beim JPG-Format zu bleiben und diese auch mittels tinyPNG zu komprimieren, da das modernere WebP-Format nur von modernen Browsern unterstützt wird. Man kann das WebP-Format mithilfe entsprechender Plugins zwar zusätzlich über das CMS generieren und automatisch statt der JPG-Dateien modernen Browsern ausliefern lassen, in der Praxis ist die Ladezeit-Verbesserung aber so überschaubar bis nicht messbar, dass sich das WebP-Format eigentlich nicht lohnt – auch wenn Google WebP bereits empfiehlt.
Die richtigen Dimensionen
Es gibt keine richtigen oder falschen Bilddimensionen, sondern nur Empfehlungen. In der Regel sollten Bilder nicht größer als der Bereich sein, in welchem sie eingebettet werden. Ist die Website 1.000px breit, dann sollten auch die Medien kaum breiter sein. Auch wenn die meisten Websites ~1.000px breit sind, setze ich gerne
- bei quadratischen Bildern auf eine Auflösung von 1.080 x 1.080 Pixel
- bei rechteckigen Bildern auf eine Auflösung von bis zu 2.160 x 1.080 Pixel (Breite x Höhe)
da Auflösung Fotos nicht nur auf klassischen Desktop-Geräten (durchschnittliche Auflösung 1.600 x 900px), sondern auch auf größeren Displays und modernen Smartphones ohne zu verpixlen darstellt. Ein normales Desktop-Gerät hat übrigens 72ppi (Pixel per Inch), moderne Smartphones kommen auf bis zu 460ppi (z.B. iPhone 12 Pro Max), was einer Auflösung von 2778 × 1242px entspricht. Auch soziale Medien wie Facebook und Instagram raten zu solch großen Bild-Dimensionen (Quelle: Dimensionen für Facebook und Instagram Ads).
Auch wenn diese Auflösung größer ist als die meisten Websites gelayoutet sind (meistens auf eine Breite von 1.000 bis 1.200px ausgerichtet), können die Redaktionssysteme – sofern sie richtig eingestellt sind – automatisiert eine geringere Auflösung für das jeweilige Endgerät ausliefern (Empfehlung von Google zur responsiven Auslieferung von Bildern).
Ich tendiere übrigens mittlerweile dazu, Bilder nicht mehr im Querformat einzusetzen, sondern quadratisch zu erstellen, damit sie sowohl im Querformat von Desktop-Geräten als auch im Hochformat von Smartphones und bei Vorschaubildern in Social Media optimal = nicht abgeschnitten dargestellt werden. Falls man trotzdem querformatige Bilder einsetzen will, sollte man darauf achten, dass das Motiv im zentralen Quadrat liegt und somit bei Vorschauen und auf bestimmten Endgeräten nicht abgeschnitten wird.
Um Bilder in die richtige Auflösung zu bringen, kann man neben Photoshop und anderen Bildbearbeitungsprogrammen auch den Web-Service PicResize oder die Mac App PhotoResize nutzen. Wichtig: Nach der Veränderung der Dimensionen bitte die Bildkomprimierung nicht vergessen, wie im Abschnitt zuvor erläutert.
Dann braucht man Alt-Tags und Title-Tags
Wenn Bilder nur als Stilmittel und nicht zur Information eingesetzt werden, würde ich mir Alternativ-Texte und Bildtitel sparen. Denn die K.I. von Googles Bildersuche ist schlau genug, um dies selber zu erkennen.
Sofern Bilder für den Kontext eine wichtige Ergänzung darstellen sind wie im Falle von Infografiken und Profilbildern, die keine Bildunterschrift haben, kann man im
- Alt-Tag das Motiv beschreiben: z.B. Mann mit T-Shirt
- Title-Tag den Inhalt beschreiben: z.B. Severin Lucks.
Best Practises für Alt- und Titel-Tags von Bildern findest du in der Google Search Central.
Zur Barrierefreiheit einer Website wird aus dem kann ein muss. Zusätzlich ist es möglich und vor allem bei Stock-Bildern und Fotos von Fotografen dringend empfehlenswert, Metadaten zu Bildrechten hinzuzufügen und darauf auch bei der Kompression zu achten, dass diese Informationen nicht entfernt werden.
Wer Bilder unterschiedlicher Quellen einsetzt, wie zum Beispiel einen Mix vom Fotografen, Stock-Plattformen und eigener Visualisierungen, ist übrigens auch dazu angeraten, den Stil durch eine ähnliche Farbgebung, (Instagram-ähnliche) Filter etc. zu vereinheitlichen – das ist aber keine SEO-Empfehlung, sondern dient einem professionellen Branding.
Fazit & Empfehlung
Da die Bildersuche von Google kaum Traffic liefert und dieser nicht konvertiert sowie die K.I. von Google Bilder mittlerweile selber sehr gut erkennen kann, ist Bilder-SEO eigentlich tot. Bei Infografiken und zur Barrierefreiheit für den Kontext relevante Bilder sollten dennoch Alt- und Title-Tags definiert werden.
Wichtig ist jedoch, das korrekte Bildformat zu verwenden, Bilder zu komprimieren und nicht inflationär einzusetzen, damit diese die Ladezeit nicht verschlechtern.
Außerhalb der eigenen Website ist Bilder-SEO jedoch ganz und gar nicht tot und ein wichtiges Mittel zur lokalen SEO und zum Reputationsaufbau mittels Social Media wie Instagram und Pinterest.