9 Tipps zur SEO Bildoptimierung – So werden Bilder bei Google gefunden

seo spezialist
Simon Kuhn
Simon Kuhn · Aktualisiert: 20.04.2021

Wenn du eine Website betreibst, ist die Bildoptimierung eine Kunst, die du beherrschen solltest. Von der Kundenanziehung bis hin zur Reduzierung der Ladezeit der Website, ist die Bildoptimierung ein wichtiger Teil des Aufbaus einer erfolgreichen Website.

Was ist Bildoptimierung?

Bei der Bildoptimierung geht es darum, die Dateigröße deiner Bilder so weit wie möglich zu reduzieren, ohne die Qualität zu beeinträchtigen, so dass die Ladezeiten deiner Seiten gering bleiben. Es geht dabei auch um „Image-SEO“, das heißt, deine Bilder in Google und anderen Bildsuchmaschinen so zu platzieren, dass sie gefunden werden.

Hast du dir über folgende Fragen jemals den Kopf zerbrochen?

  • Warum werden meine Fotos bei einer Google-Bildsuche nie angezeigt?
  • Muss ich meinen Bildern Alt-Attribute hinzufügen?
  • Was ist der Unterschied zwischen JPEG, GIF und PNG? Und wann sollte ich welches Format verwenden?

Heute findest du die Antworten, denn wir gehen tief auf diese und andere Fragen ein.

1. Benenne Bilddateien beschreibend und mit Klartext

Es passiert wirklich schnell, dass man hunderte von Aufnahmen durchsucht und dann den Standarddateinamen beibehält, den deine Kamera zuweist.

Wenn es um Image-SEO geht, ist es wichtig, relevante Keywords zu verwenden, um deine Webseite in Suchmaschinen gut zu platzieren. Das Erstellen von beschreibenden, schlüsselwortreichen Dateinamen ist entscheidend für die Bildoptimierung. Suchmaschinen durchsuchen nicht nur den Text auf deiner Webseite, sie durchsuchen auch deine Bilddateinamen.

Nehmen wir zum Beispiel dieses Bild:

seo bildoptimierung beispiel
Du könntest den generischen Namen verwenden, den deine Kamera dem Bild zugewiesen hat (z.B. DCMIMAGE27.jpg). Es wäre jedoch viel besser, die Datei 1965-Pontiac-LeMans-Rot.jpg zu benennen.

Denke darüber nach, wie deine Kunden o. Besucher auf deiner Website nach deinen Inhalten suchen. Welche Namensmuster verwenden sie bei der Suche? Im obigen Beispiel könnten Autokäufer nach folgenden Begriffen suchen:

  • 1965 Pontiac LeMans Rot
  • Pontiac LeMans Rot 1965
  • Roter Pontiac LeMans 1965

Schau dir bei Google Analytics deine Website genauer an, um zu sehen, welchen Keyword-Mustern deine Besucher folgen. Bestimme die gebräuchlichsten Namensmuster und wende diese Formel auf deinen Bilddatei-Namensprozess an.

Falls du diese Daten nicht erhalten solltest, verwende einfach relevante Keywords, wenn du deine Bilder benennst (d.h. versuche beschreibend zu sein).

2. Optimiere Alt-Attribute sorgfältig

Alt-Attribute auch Alt-Texte genannt, sind die Textalternative zu Bildern wenn ein Browser sie nicht richtig darstellen kann. Auch wenn ein Bild gerendert wird, siehst du den Text des Alt-Attributs, wenn du mit der Maus über das Bild fährst (abhängig von den Einstellungen deines Browsers).

Das Alt-Attribut hat auch einen SEO-Wert für deine Website. Durch das Hinzufügen von geeigneten Attributen mit relevanten Keywords zu Bildern auf deiner Website hilft einen besseren Platz in den Suchmaschinen einzunehmen. Alt-Attribute sind besonders für Online Shops wichtig, um Produkte in der Bildersuche von Suchmaschinen zu platzieren.

Die oberste Priorität bei der Bildoptimierung ist, jedes Alt-Attribut für jedes Bild auf deiner Website auszufüllen.

Hier sind ein paar einfache Regeln für Alt-Attribute:

  • Beschreibe deine Bilder mit Klartext, genau wie bei den Bilddateinamen.
  • Wenn du Produkte mit Modellnummern oder Seriennummern verkaufst, verwende diese in den Alt-Attributen.
  • Fülle deine Alt-Attribute nicht mit Schlüsselwörtern (z.B. alt=”pontiac classic car jetzt günstig kaufen zum besten preis mit rabatt”).
  • Verwende keine Alt-Attribute für dekorative Bilder. Suchmaschinen können dich für übermäßige Optimierung bestrafen.

Zu guter Letzt solltest du von Zeit zu Zeit einen Check durchführen. Sieh dir den Quelltext deiner Webseiten an und überprüfe, ob deine Alt-Attribute korrekt ausgefüllt sind. Du wirst überrascht sein, was man alles übersieht.

3. Wähle Bildabmessung und Produktwinkel mit Bedacht

Es ist gängige Praxis, mehrere Blickwinkel von beispielsweise Produkten zu zeigen. Um auf das Pontiac Beispiel zurückzukommen, solltest du nicht nur eine Aufnahme des Autos zeigen, besonders wenn man versucht es zu verkaufen. Es wäre in deinem besten Interesse, wenn deine Aufnahmen u.a. auch folgendes zeigen:

  • Interieur
  • Heck
  • Felgen
  • Motor

Der beste Weg, diese zusätzlichen Fotos zu nutzen, ist das Ausfüllen der Alt-Attribute. Am effektivsten kannst du dies tun, indem du einzigartige Attribute für jedes Produktbild erstellst.

  • 1965-Pontiac-LeMans-Rot-Leder-Interieur.jpg -> mit dem Alt-Attribut: alt=”1965 Pontiac LeMans Rot Leder Interieur”
  • 1965-Pontiac-LeMans-Rot-Heck.jpg -> mit dem Alt-Attribut: alt=”1965 Pontiac LeMans Rot Heck”

Der Trick dabei ist, Beschreibungen zu deinem Basis-Alt-Attribut hinzuzufügen, damit potenzielle Sucher auf deiner Website landen. Wenn du diese zusätzliche Arbeit machst, wird Google dich mit Suchern belohnen.

Vorsicht bei der Auswahl größerer Bilder

Du möchtest vielleicht größere Ansichten für deine Besucher bereitstellen, was für ein großartiges Benutzererlebnis sorgen kann, aber aufpassen!
Was auch immer du tust, platziere nie das größte Bild auf deiner Website und “verkleinere mal eben die Maße” über den Quellcode. Dies erhöht die Ladezeit deiner Seite aufgrund der größeren Datenmenge, die mit dem Bild verbunden ist.

Stattdessen solltest du das Bild zu einem kleineren Bild komprimieren und deinen Besuchern die Möglichkeit geben, ein größeres Bild in einem Popup oder auf einer separaten Website anzusehen.

4. Reduziere die Dateigröße deiner Bilder

  • Fast 50% der Verbraucher werden nicht einmal 3 Sekunden warten, bis eine Website geladen wird. Trotzdem steigt die durchschnittliche Ladezeit der Seiten weltweit an.
  • Amazon fand heraus, dass wenn ihre Seiten um nur eine Sekunde langsamer wären, sie 1,6 Milliarden Dollar pro Jahr verlieren würden.
  • Google verwendet die Ladezeit der Seiten zusätzlich als Rankingfaktor in ihrem Algorithmus.

Wenn du also Bilder hast, die über 15 Sekunden zum Laden benötigen, dann kannst du deine potenziellen Kunden schon vorab verabschieden.

So kannst du vorgehen:

Wenn ein Kunde auf deine Website kommt, kann es eine Weile dauern, bis alles geladen ist, je nachdem, wie groß deine Dateien sind. Je größer, desto länger dauert das Laden einer Webseite.

Hinweis: Viele Website-Baukästen wie Shopify, Wix und andere komprimieren Bilder automatisch, so dass diese Nutzer damit keine Probleme haben sollten. Als erstes solltest du also bei deinem Webhoster nachschauen. Alternativ kann man auf Plug-Ins zurückgreifen, wie zum Beispiel Compress JPEG & PNG für Nutzer von WordPress. Dieses und ähnliche Plug-Ins übernehmen das Komprimieren deiner Bilder automatisch mit nur einem Klick.

Eine Möglichkeit die Größe der Bilddateien manuell zu reduzieren, ist der Befehl “Für Web speichern” in Adobe Photoshop. Wenn du diesen Befehl verwendest, solltest du das Bild auf die kleinstmögliche Dateigröße einstellen und dabei auf die Bildqualität achten.

In Photoshop:

1. Datei -> Exportieren -> Für Web Speichern

Photoshop-Web-exportieren
2. Nach dem Klick auf “Für Web speichern” öffnet sich ein weiteres Fenster, hier kann das Bild vor dem Speichern nochmals angepasst werden.

Bild für Web speichern Photoshop

  • Qualität: Ecke oben rechts (z.B. 60).
  • Dateiformat: Ecke oben rechts (z.B. JPEG).
  • Optimierung: Checkbox oben rechts (d.h. optimiert).
  • Farbe: Checkbox oben rechts (z.B. In sRBG konvertieren).
  • Verkleinern und Schärfen: Ecke unten rechts (z.B. B und H:).
  • Erwartete Dateigröße: Ecke unten links (z.B. 480,6 KB).

Hinweis: Wie vorher angemerkt, solltest du die Dateigröße möglichst gering halten. Insbesondere das Dateiformat, die Qualität und Bildgröße sollten daher von dir angepasst werden.

Wie groß sollten Bilddateien sein?

Es ist eine gute Faustregel die Größe jeder Bilddatei unter 70 KB zu halten. Das kann manchmal schwierig sein, besonders bei größeren Bildern. Je nach Größe sind Abweichungen in Ordnung, über 150 KB solltest du allerdings auch nicht bei großen Bildern kommen.

Zurück zu unserem Beispiel-Bild mit 480,9 KB. Die Qualität und das Dateiformat haben wir bereits angepasst. Um das Bild in den Rahmen der 70 KB zu bringen, können wir es noch verkleinern. (Photoshop behält das Seitenverhältnis bei, so kannst du das Bild bequem skalieren).

photoshop-bild-verkleinern

So optimierst du die Dateigröße ohne Photoshop

Wenn du Photoshop nicht besitzt, stehen dir zahlreiche Online-Tools für die Bildbearbeitung zur Verfügung.

Adobe hat sogar ein kostenloses Bildbearbeitungsprogramm für Smartphones und Tablets (Photoshop Express). Dieses Tool hat nicht alle Funktionen der Desktop-Version von Adobe Photoshop, aber es deckt alle Grundlagen der Bildbearbeitung ab und ist kostenlos.

Ein beeindruckendes Online-Bildbearbeitungsprogramm ist auch Canva. Hier kannst du kostenlos deine Bilder direkt auf der Website anpassen und konvertieren.
Abschließend gibt es noch GIMP. GIMP ist eine kostenlose Bildbearbeitungssoftware, die unter Windows, Mac oder Linux ausgeführt werden kann. Es kann in dem Rahmen alles was Photoshop kann, ist aber etwas unhandlicher. Für ein kostenloses Programm ist es trotzdem unschlagbar.

5. Wähle den richtigen Dateityp

Es gibt drei gängige Dateitypen, die verwendet werden, um Bilder ins Web zu stellen: JPEG, GIF und PNG.

JPEG (oder .jpg) ist ein relativ alter Dateityp und zum Standard im Internet geworden. JPEG-Bilder können erheblich komprimiert werden, was zu qualitativ hochwertigen Bildern mit kleinen Dateigrößen führt.

GIF (.gif) Bilder sind von geringerer Qualität als JPEG-Bilder und werden für einfachere Bilder wie Icons und dekorative Bilder verwendet. GIFs unterstützen auch Animationen.
Hinsichtlich der Bildoptimierung sind GIFs ideal für einfache Bilder (die nur wenige Farben enthalten). Für komplexere Bilder und Fotos sind GIFs nicht zu empfehlen. Dies gilt insbesondere für große Bilder.

PNG (.png) Bilder werden als Alternative zu GIFs immer beliebter. PNGs unterstützen viel mehr Farben als GIFs und verschlechtern nicht ihre Qualität durch mehrfaches Speichern wie JPEGs. Obwohl der PNG-Dateityp immer häufiger verwendet wird, können die Dateigrößen immer noch viel größer sein als JPEG-Bilder.

Beachte, dass das PNG-24-Bild mehr als dreimal so groß ist wie das PNG-8 Format. Deshalb solltest du mit PNGs sehr vorsichtig sein.

Tipp: Oft ist es am einfachsten und besten, wenn man das JPEG Format wählt. PNG Bilder können in manchen Fällen zwar eine bessere Qualität haben, nur lohnt sich der Tausch zwischen besserer Qualität und Dateigröße nur selten. Insbesondere wenn du das Bild verkleinert hast, werden Qualitätsunterschiede kaum noch sichtbar.

Eine Ausnahme ist die Transparenz. Wenn du beispielsweise einen Bildausschnitt ohne Hintergrund auf deiner Website platzieren möchtest, dann ist der PNG-Dateityp deine erste Wahl (außer dein Hintergrund ist weiß bzw. du änderst den Bildhintergrund passend).

6. Optimiere deine Thumbnails

Viele Online Shops verwenden Thumbnail-Bilder, insbesondere auf Kategorieseiten. Sie präsentieren Produkte schnell und sind vor allem platzsparend:

Thumbnails optimieren
Thumbnails sind großartig, aber sei vorsichtig; sie können ein stiller Killer sein. Das Opfer? Deine Seitenladegeschwindigkeit. Thumbnails werden in der Regel an kritischen Stellen während des Einkaufsprozesses präsentiert, was sehr gut für potenzielle Upsells ist. Wenn sie aber verhindern, dass deine Kategorieseiten schnell geladen werden, könntest du potentielle Kunden komplett verlieren. Achte daher auf die Dateigrößen und vergleiche die Ladegeschwindigkeiten.

Hinweis: Auch wenn du einen Website-Baukasten verwendest solltest du prüfen ob Thumbnails automatisch optimiert werden.

Was kannst du tun?

Verkleinere die Dateigrößen deiner Thumbnails wie es nur geht. Hier lohnt es sich die Qualität zu Gunsten einer geringeren Dateigröße zu vernachlässigen. Denk daran, dass die kumulative Wirkung deiner Thumbnails einen großen Einfluss auf die Ladezeit deiner Seite hat.

Variiere deinen Alt-Text so, dass du keinen Text duplizierst, den du für die größeren Versionen desselben Bildes verwendet hast. Im Gegenteil, dein Alt-Text sollte am besten komplett verschieden sein. Das letzte was du willst, ist ein Thumbnail, das anstelle des größeren Bildes bei Google indexiert wird. Zur Not kannst du den Alt-Text an dieser Stelle weglassen.

7. Verwende Bilder-Sitemaps

Wenn deine Website Javascript-Galerien, Bild-Pop-ups oder andere “auffällige” Möglichkeiten verwendet, um das Benutzererlebnis zu verbessern, helfen Bilder-Sitemaps, damit deine Bilder von Google wahrgenommen werden.

Webcrawler können keine Bilder crawlen, die nicht speziell im Quellcode der Website aufgerufen werden. Um Crawler über nicht identifizierte Bilder zu informieren, musst du deren Position in einer Bilder-Sitemap auflisten.

Du solltest daher folgende Zeile in deiner robots.txt Datei haben:

Sitemap: https://DeineURL.com/sitemap.xml

Außerdem kannst du die Sitemap über die Google Search Console einreichen.
Google hat viele Richtlinien für die Bildveröffentlichung, die deiner Website helfen können, einen höheren Rang auf SERPs (Search Engine Ranking Pages) einzunehmen. Darüber hinaus kannst du Google-Sitemaps verwenden. So kannst du Google mehr Informationen über die Bilder auf deiner Website geben, so dass mehr Bilder gefunden werden können.

Die Verwendung von Sitemaps garantiert nicht, dass deine Bilder von Google indexiert werden, aber es ist sicherlich ein positiver Schritt in Richtung Bildoptimierung. Das Google Webmaster-Tool hat viele Vorschläge für die korrekte Formatierung deiner Sitemap.

Es ist wichtig, dass du spezifische Tags für alle deine Bilder hinzufügst. Du kannst auch eine separate Sitemap erstellen, um ausschließlich Bilder aufzulisten. Wichtig ist, dass du alle notwendigen Informationen, zu jeder Sitemap hinzufügst. Befolg dazu die Richtlinien von Google beim Erstellen einer Sitemap mit Bildinformationen.

8. Vorsicht bei dekorativen Bildern

Websites haben oft eine Auswahl an dekorativen Bildern, wie z.B. Hintergrundbilder, Buttons und Rahmen. Alles, was sich nicht auf deine Produkte oder Inhalte bezieht, kann als dekoratives Bild betrachtet werden.

Obwohl dekorative Bilder einer Webseite viel Ästhetik verleihen können, können sie zu einer großen kombinierten Dateigröße und langsamen Ladezeiten führen. Daher solltest du dir dekorative Bilder genauer ansehen, damit Besucher in Kunden umgewandelt und nicht beeinträchtigt werden.

Du solltest die Dateigrößen aller dekorativen Bilder auf deiner Website überprüfen und eine Vorlage verwenden, die die Dateigrößen minimiert.

Hier sind einige Tipps zur Reduzierung der Dateigröße deiner dekorativen Bilder:

  • Einfache Bilder wie z.B. Ränder oder simple Muster, kannst du in der Qualität stark verringern und sehen in PNG-8 immer noch gut aus. Vergleiche dazu am besten die Qualität und Dateigröße zwischen den Dateitypen JPEG, GIF und PNG-8.
  • Wenn möglich, verwende CSS anstelle von Bildern, um farbige Bereiche zu erzeugen. Du solltest CSS so oft wie möglich verwenden, um dekorative Bilder zu ersetzen.
  • Wirf einen Blick auf deine großen Hintergrundbilder. Diese können oft riesige Dateien sein. Verkleinere diese Dateien so weit wie möglich, ohne die Bildqualität stark zu beeinträchtigen.

9. Teste deine Bilder

Der ganze Sinn der Optimierung deiner Bilder ist es, deinen Gewinn zu steigern. Wir haben darüber gesprochen, die Dateigrößen zu reduzieren und die Suchmaschinen dazu zu bringen, deine Bilder zu indexieren, aber was ist mit dem Testen von Bildern, um zu sehen, was zu mehr Besuchern und Kunden führt?

Teste die Anzahl der Bilder pro Seite: Da Ladezeiten ein Problem für einige Seiten sind, kannst du feststellen, ob eine Reduzierung der Anzahl von Bildern auf deiner Seite, die Klickraten und den Umsatz erhöht. Es ist auch möglich, dass viele Bilder pro Seite die Benutzerfreundlichkeit verbessert und zu mehr Umsatz führt. Der einzige Weg das herauszufinden, ist es zu testen.

Teste welche Blickwinkel deine Kunden bevorzugen: Du könntest bei Produkten eine Erhöhung der Kundenloyalität wahrnehmen, wenn du Ansichten zur Verfügung stellst, die deine Kunden sehen wollen. Eine gute Möglichkeit, dies herauszufinden, ist deine Kunden zu befragen, was ihnen am besten gefällt. Die Befragung und das Gespräch mit Kunden ist im Allgemeinen eine gute Angewohnheit. Trotzdem, solltest du es überprüfen. Mittlerweile kann man Instagram gut für diese Zwecke nutzen. Angenommen du verkaufst Fleisch, dann kannst du zwei Bilder in einer Abstimmung hochladen und deine Fans fragen, welches Bild besser aussieht.

Teste wie viele Produkte du auf den Kategorieseiten haben solltest: 10, 20, 100 Produkte?

Schlusswort

Zerbrich dir mit den ganzen Informationen nicht den Kopf. Nimm dir Zeit und optimiere deine Bilder Schritt für Schritt, SEO ist schließlich eine langfristige Maßnahme.

Du kennst nun einige Strategien zur Bildoptimierung, um deine Bilder in die Google-Suchergebnisse zu bekommen. Du weißt, wie man Alt-Attribute voll ausnutzt, wie man Bilder komprimiert und du kennst den Unterschied zwischen den Dateitypen und wann du welches Format einsetzen solltest.

Dennoch ist die Bildoptimierung komplex und wir haben gerade nur die Oberfläche angekratzt. Versuche daher erst, die für dich schwierigeren Teile aus diesem Beitrag besser zu verstehen bevor du einen Schritt weitergehst.

Hat dir der Artikel gefallen? Lies gleich weiter.