So optimierst du deine Grafiken für Google

Ein Bild sagt mehr als tausend Worte, aber nur, wenn Google es auch versteht. Viele Webseitenbetreiber laden Bilder einfach in voller Auflösung hoch und wundern sich über langsame Ladezeiten und fehlende Besucher über die Google Bildersuche.

In diesem Dreamcodes Ratgeber erfährst du, wie du deine Grafiken so optimierst, dass sie dein Ranking pushen, die User Experience verbessern und deinen Server entlasten.

1. Warum ist Bilder SEO so wichtig?

Bilder sind weit mehr als nur Dekoration. Richtig optimiert, bieten sie drei entscheidende Vorteile:

1. Zusätzlicher Traffic: Über die Google Bildersuche finden Nutzer direkt zu deinem Projekt.
2. Bessere Rankings: Google wertet die Relevanz einer Seite auch anhand der Bildinformationen aus.
3. Schnellere Ladezeit: Optimierte Bilder sind die effektivste Methode, um die Core Web Vitals (Ladezeit Metriken) zu verbessern.

2. Der Dateiname: Sag Google, was zu sehen ist

Google kann Bilder zwar immer besser „sehen“, verlässt sich aber primär auf den Dateinamen. Vermeide kryptische Namen wie IMG_5432.jpg.

• Schlecht: bild1.jpg oder screenshot_2024.png
• Gut: dmarc-eintrag-konfiguration-dns.jpg
• Regel: Nutze dein Fokus Keyword, trenne Wörter mit Bindestrichen (keine Unterstriche) und vermeide Umlaute oder Sonderzeichen.

3. Der Alt-Tag: Die wichtigste Beschreibung

Der alt-Tag (Alternativtext) ist das Herzstück des Bilder SEO. Er wird angezeigt, wenn das Bild nicht geladen werden kann, und dient Screenreadern für sehbehinderte Menschen als Beschreibung.

• SEO Effekt: Google nutzt den Alt-Tag, um den Inhalt des Bildes zu verstehen.
• Best Practice: Beschreibe präzise, was auf dem Bild zu sehen ist, und baue dein Keyword natürlich ein.
• Beispiel: <img src="..." alt="Schritt für Schritt Anleitung zur Einrichtung eines SPF Records im DNS">

4. Dateiformate und Kompression

Die Dateigröße ist der größte Hebel für die Performance. Ein Bild auf einer Webseite sollte selten größer als 200 KB sein.

• WebP & AVIF: Moderne Formate, die bei gleicher Qualität deutlich kleiner sind als JPG oder PNG. Nutze diese Formate für Projekte standardmäßig.
• SVG: Ideal für Logos und Icons, da sie verlustfrei skalierbar und extrem klein sind.
• Kompression: Nutze Tools wie TinyPNG oder Squoosh, um unnötige Metadaten aus den Dateien zu entfernen, bevor du sie hochlädst.

5. Abmessungen und Responsive Images

Lade Bilder niemals in einer Auflösung von 4000px hoch, wenn sie auf der Webseite nur mit 800px Breite angezeigt werden.

• Skalierung: Skaliere das Bild vor dem Upload auf die maximal benötigte Breite.
• Width & Height: Gib im HTML-Code immer die Breite und Höhe an. Das verhindert das lästige „Springen“ der Inhalte (Layout Shift) beim Laden.
• Beispiel: <img src="bild.webp" width="800" height="600" alt="...">

6. Der Kontext: Das Umfeld zählt

Google analysiert den Text, der direkt um ein Bild herumsteht. Ein Bild einer „Server Konfiguration“ ist für Google relevanter, wenn der umgebende Absatz auch Begriffe wie „DNS“, „Hosting“ oder „Setup“ enthält. Nutze zusätzlich Bildunterschriften (Captions), um den Kontext für Nutzer und Bots zu verdeutlichen.

7. Lazy Loading: Erst laden, wenn nötig

Mit dem Attribut loading="lazy" sagst du dem Browser, dass er Bilder erst dann laden soll, wenn der Nutzer in deren Nähe scrollt. Das spart Bandbreite und beschleunigt den ersten Seitenaufruf enorm.

• Code: <img src="..." loading="lazy" alt="...">
• Wichtig: Nutze Lazy Loading nicht für das allererste Bild (zB. das Hero Banner) im sichtbaren Bereich, da dies die Ladezeit negativ beeinflussen könnte.

Fazit für Dreamcodes Nutzer

Bilder SEO ist kein Hexenwerk, sondern Fleißarbeit. Wer sich die Zeit nimmt, Dateinamen sinnvoll zu benennen, Alt Tags zu pflegen und Bilder auf WebP Format zu konvertieren, wird mit besseren Rankings und zufriedeneren Nutzern belohnt. Jedes optimierte Bild ist ein kleiner Baustein für den Erfolg deiner gesamten Webseite.