Bilder für Websites optimieren

Warum Bildoptimierung für Websites so wichtig ist

Bilder machen durchschnittlich 50–70 % des gesamten Datenvolumens einer Website aus. Unoptimierte Bilder sind der häufigste Grund für langsame Ladezeiten – und langsame Seiten kosten Besucher, Umsatz und Google-Rankings.

Core Web Vitals und Bilder

Google bewertet die Ladegeschwindigkeit deiner Website über die sogenannten Core Web Vitals. Für Bilder ist besonders der Largest Contentful Paint (LCP) relevant – er misst, wie schnell das größte sichtbare Element (oft ein Hero-Bild) geladen wird.

Die 7 wichtigsten Tipps für optimale Web-Bilder

1. Das richtige Format wählen

Für Fotos auf Websites ist WebP aktuell das beste Format. Es liefert 25–35 % kleinere Dateien als JPG bei gleicher Qualität. Für maximale Einsparung nutze AVIF mit WebP und JPG als Fallback:

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

Für Logos und Icons: Verwende SVG statt PNG. SVG-Dateien sind winzig klein und skalieren perfekt auf allen Bildschirmgrößen.

📖 Ausführlicher Vergleich aller Bildformate →

2. Bilder auf die richtige Größe zuschneiden

Lade niemals ein 4000×3000 px Bild hoch, wenn es auf der Seite nur 800×600 px groß angezeigt wird. Das verschwendet Bandbreite und verlangsamt die Seite erheblich.

• Hero-Bilder: max. 1600–1920 px Breite
• Content-Bilder: max. 1200 px Breite
• Thumbnails: max. 400–600 px Breite
• Produktbilder: 800×800 oder 1200×1200 px

3. Responsive Images mit srcset

Verschiedene Geräte benötigen verschiedene Bildgrößen. Mit dem srcset-Attribut stellst du dem Browser mehrere Varianten zur Verfügung, und er lädt automatisch die passende:

<img 
  srcset="bild-400.webp 400w,
          bild-800.webp 800w,
          bild-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1024px) 800px,
         1200px"
  src="bild-1200.webp"
  alt="Beschreibung des Bildes"
  width="1200" height="800">

So laden mobile Nutzer nur das kleine 400px-Bild (z. B. 30 KB), während Desktop-Nutzer das große 1200px-Bild (z. B. 120 KB) erhalten.

4. Lazy Loading aktivieren

Bilder, die „below the fold" liegen (also nicht sofort sichtbar sind), sollten erst geladen werden, wenn der Nutzer zu ihnen scrollt. Das reduziert die initiale Ladezeit erheblich:

<img src="bild.webp" alt="Beschreibung" loading="lazy" width="800" height="600">

Wichtig: Das Hero-Bild (LCP-Element) sollte nicht lazy geladen werden. Verwende loading="lazy" nur für Bilder, die weiter unten auf der Seite erscheinen.

5. Breite und Höhe immer angeben

Ohne explizite width und height Attribute weiß der Browser nicht, wie viel Platz er für das Bild reservieren soll. Das führt zu Layout-Verschiebungen (hoher CLS-Score), wenn das Bild nachlädt und den Content verschiebt.

<!-- ❌ Schlecht: keine Dimensionen -->
<img src="bild.webp" alt="Foto">

<!-- ✅ Gut: mit Dimensionen -->
<img src="bild.webp" alt="Foto" width="1200" height="800">

6. Alt-Texte schreiben

Der alt-Text ist nicht nur für Barrierefreiheit wichtig, sondern auch für SEO. Google nutzt Alt-Texte, um den Inhalt von Bildern zu verstehen. Schreibe beschreibende, natürliche Alt-Texte:

• ❌ alt="bild1" oder alt=""
• ✅ alt="Rotes Mountainbike auf einem Waldweg bei Sonnenuntergang"

7. CDN und Caching nutzen

Ein Content Delivery Network (CDN) verteilt deine Bilder auf Server weltweit. Besucher laden Bilder dann vom geografisch nächsten Server – das reduziert die Latenz erheblich.

Zusätzlich solltest du Browser-Caching für Bilder konfigurieren. Ein Cache-Header von 1 Jahr ist für statische Bilder Standard:

# .htaccess (Apache / All-Inkl)
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>

Checkliste: Bilder für deine Website

• Bilder im WebP- oder AVIF-Format mit JPG-Fallback bereitstellen
• Bilder auf die tatsächlich angezeigte Größe skalieren (nicht überdimensionieren)
• Responsive Images mit srcset und sizes für verschiedene Bildschirmgrößen
• loading="lazy" für alle Bilder unterhalb des sichtbaren Bereichs
• Breite und Höhe als HTML-Attribute für stabile Layouts (kein CLS)
• Beschreibende Alt-Texte für SEO und Barrierefreiheit
• EXIF-Metadaten entfernen (Privatsphäre und Dateigröße)
• Cache-Header konfigurieren (min. 30 Tage, ideal 1 Jahr)
• Bilder über ein CDN ausliefern (bei internationalem Publikum)
• Regelmäßig mit Google PageSpeed Insights und Lighthouse testen