Bildoptimierung

Was bedeutet Bildoptimierung im SEO-Kontext?

Bildoptimierung beschreibt alle technischen und gestalterischen Maßnahmen, die dafür sorgen, dass Bilder auf einer Webseite schnell laden, korrekt dargestellt werden und von Suchmaschinen bestmöglich verarbeitet werden können. Bilder machen auf den meisten Webseiten den größten Anteil am Seitengewicht aus – oft 50–70 % der übertragenen Bytes. Schlecht optimierte Bilder sind daher einer der häufigsten Gründe für langsame Ladezeiten und schlechte Core-Web-Vitals-Werte.

Während der Alt-Text die inhaltliche Beschreibung eines Bildes für Suchmaschinen und Screenreader abdeckt, konzentriert sich die Bildoptimierung auf die technische Auslieferung: Format, Größe, Lademechanismus und responsive Bereitstellung.

Lazy Loading

Lazy Loading (verzögertes Laden) bewirkt, dass Bilder erst dann vom Server angefordert werden, wenn sie sich dem sichtbaren Bereich des Browserfensters nähern. Ohne Lazy Loading werden alle Bilder einer Seite beim initialen Laden heruntergeladen – auch solche, die der Nutzer möglicherweise nie sieht, weil sie sich weit unten auf der Seite befinden.

Warum ist Lazy Loading wichtig?

• Schnellerer First Contentful Paint (FCP): Der Browser kann den sichtbaren Bereich schneller rendern, weil er nicht auf alle Bilder warten muss
• Geringerer Datenverbrauch: Nutzer, die die Seite vorzeitig verlassen, laden nur die Bilder, die sie tatsächlich gesehen haben
• Weniger Server-Last: Nicht jeder Seitenaufruf löst den Download aller Bilder aus
• Bessere Core Web Vitals: Insbesondere Largest Contentful Paint (LCP) und TBT profitieren, weil der Haupt-Thread weniger blockiert wird

Implementierung

Modernes Lazy Loading nutzt das native HTML-Attribut loading="lazy":

<img src="foto.jpg" loading="lazy" alt="Beschreibung" width="800" height="600">

Wichtig: Das Hero-Bild oder andere Bilder im sichtbaren Bereich (Above the Fold) sollten nicht per Lazy Loading geladen werden, da sie sofort sichtbar sein müssen. Für diese Bilder empfiehlt sich loading="eager" (Standard) oder das fetchpriority="high"-Attribut.

Explizite Dimensionsangaben

Jedes <img>-Element sollte die Attribute width und height enthalten. Diese Angaben reservieren den nötigen Platz im Layout, bevor das Bild geladen ist.

Warum sind Dimensionen wichtig?

Ohne width und height kann der Browser den benötigten Platz nicht im Voraus berechnen. Sobald das Bild geladen ist, verschiebt sich der gesamte nachfolgende Inhalt – ein Phänomen, das als Layout Shift bekannt ist und den CLS-Wert (Cumulative Layout Shift) verschlechtert.

<!-- Gut: Dimensionen angegeben -->
<img src="foto.jpg" width="800" height="600" alt="Beschreibung">

<!-- Schlecht: Keine Dimensionen -->
<img src="foto.jpg" alt="Beschreibung">

Moderne CSS-Techniken wie aspect-ratio bieten eine Alternative, aber die HTML-Attribute bleiben der zuverlässigste Ansatz.

Moderne Bildformate

Traditionelle Formate wie JPEG und PNG sind etabliert, aber moderne Formate bieten deutlich bessere Komprimierung bei gleichwertiger oder sogar besserer Qualität:

Empfohlene Strategie

Nutze das <picture>-Element, um moderne Formate mit JPEG/PNG-Fallback zu kombinieren:

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Beschreibung" width="800" height="600">
</picture>

Responsive Bilder mit srcset

Das srcset-Attribut ermöglicht es dem Browser, die passende Bildgröße basierend auf der Bildschirmbreite und -auflösung auszuwählen. Ohne srcset laden mobile Geräte die gleiche hochauflösende Version wie Desktop-Monitore – eine enorme Verschwendung von Bandbreite.

<img
  src="foto-800.jpg"
  srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="Beschreibung"
  width="1200" height="900"
>

Warum ist srcset wichtig?

• Mobile Performance: Smartphones laden nur die benötigte Auflösung
• Retina-Displays: Hochauflösende Bildschirme erhalten automatisch die passende Version
• Bandbreite sparen: Jeder Nutzer lädt nur die Bildgröße, die er braucht

Data-URIs und eingebettete Bilder

Data-URIs kodieren Bilder direkt als Base64-Text im HTML- oder CSS-Code. Kleine Icons (unter 2 KB) profitieren davon, weil ein HTTP-Request eingespart wird. Größere Data-URIs sind jedoch problematisch:

• Aufgeblähtes HTML: Das HTML-Dokument wird deutlich größer und blockiert das Parsen
• Kein Caching: Data-URIs werden bei jedem Seitenaufruf erneut übertragen, weil sie Teil des HTML sind
• Kein Lazy Loading: Eingebettete Bilder werden immer sofort geladen
• Base64-Overhead: Die Kodierung vergrößert die Datei um ca. 33 %

Empfehlung: Verwende Data-URIs nur für sehr kleine Bilder (< 2 KB). Alles darüber sollte als externe Datei eingebunden werden.

Checkliste für optimierte Bilder