SUCHMASCHINEN·VIDEO

Lektion 03 · Grundlagen der Seite

Bilder richtig einbinden

Google versteht ein Bild über seinen Kontext: das <img>-Element, den alt-Text, den Dateinamen und den Text drumherum. Gleichzeitig entscheiden Bilder oft über die Ladezeit einer Seite.

Live auf dieser Seite

Die Illustration weiter unten ist vorbildlich eingebunden: als <picture> mit AVIF und WebP, mit festen Maßen, beschreibendem alt-Text und Lazy Loading – denn sie liegt nicht im ersten sichtbaren Bereich.

<picture>
  <source type="image/avif" srcset="….avif 600w, ….avif 1200w" sizes="…">
  <source type="image/webp" srcset="….webp 600w, ….webp 1200w" sizes="…">
  <img src="….png" width="1200" height="675"
       alt="Illustration: Eine Lupe untersucht den HTML-Quelltext einer Webseite"
       loading="lazy" decoding="async">
</picture>

Scrolle zum Bild und drücke G: Alle Bild-Elemente leuchten auf, die Prüfung bewertet alt, Maße, Format und Lazy Loading.

So geht's richtig

  • Wichtige Bilder als <img> (bzw. <picture>) einbinden – nicht als CSS-Hintergrund.
  • alt-Text: beschreibt, was auf dem Bild zu sehen ist. Rein dekorative Bilder bekommen alt="".
  • width und height angeben – der Browser reserviert dann den Platz, nichts springt (CLS, Lektion 13).
  • Moderne Formate wie AVIF und WebP sparen viel Gewicht; ein JPEG/PNG bleibt als Rückfallebene.
  • Responsive: Mit srcset und sizes lädt jedes Gerät die passende Größe.
  • Lazy Loading (loading="lazy") nur für Bilder außerhalb des ersten Bildschirms. Das größte sichtbare Bild nie lazy laden, eher mit fetchpriority="high" vorziehen.
  • Sprechende Dateinamen (suchmaschine-crawler.avif statt IMG_4711.jpg) und das Bild nah am passenden Text platzieren.
Illustration: Eine Lupe untersucht den HTML-Quelltext einer Webseite
Vorbildlich eingebunden: <picture> mit AVIF und WebP, feste Maße, alt-Text, Lazy Loading. AVIF: 7 KB statt 75 KB als PNG.

Typische Fehler

  • Fehlender oder nichtssagender alt-Text („bild1“, „foto“).
  • Wichtiger Text nur im Bild statt im HTML.
  • Riesige Originaldateien, die nur verkleinert angezeigt werden.
  • Lazy Loading für das Bild ganz oben – das verzögert den Seitenaufbau.

Mythos-Check

„Das title-Attribut am Bild bringt Ranking.“ (stand so 2014 auf dieser Seite)
Nein. Für Google zählen alt-Text, Dateiname und Umfeld. Das title-Attribut ist höchstens ein Tooltip.
„Das Keyword gehört in alt, title, Dateiname und Bildunterschrift.“
Beschreiben statt wiederholen: Ein natürlicher, zutreffender alt-Text hilft Menschen und Maschinen mehr als Keyword-Wiederholungen.
„Bilder richtet man mit align aus.“
Das align-Attribut ist veraltetes HTML. Ausrichtung gehört ins CSS.

Quellen & Stand

Zuletzt geprüft: Oktober 2026