Bilder für die Website optimieren und PageSpeed verbessern

Ladegeschwindigkeit ist seit 2018 für Desktop und seit 2021 für Mobilgeräte ein von Google bestätigter Ranking-Faktor. Mehr noch: Sie beeinflusst direkt die Konversionsrate — jede zusätzliche Sekunde Ladezeit erhöht die Absprungrate laut Google-eigenen Daten um bis zu 32%. Und im E-Commerce zeigen Studien von Portent, dass Seiten, die in 1 Sekunde laden, bis zu dreimal besser konvertieren als Seiten, die 5 Sekunden brauchen.

Bilder machen typischerweise 50–80% des Gesamtgewichts einer Webseite aus. Sie richtig zu optimieren ist daher der wirkungsvollste Eingriff für die Performance jeder Website.

Was PageSpeed Insights bei Bildern bewertet

Google PageSpeed Insights (PSI) analysiert deine Seite und markiert bildbezogene Probleme in mehreren Kategorien. Die häufigsten sind:

• "Bilder in modernen Formaten bereitstellen": erscheint, wenn die Website JPG oder PNG verwendet, wo WebP (oder AVIF) die Größe deutlich reduzieren würde.
• "Bilder richtig dimensionieren": erscheint, wenn das an den Server gesendete Bild größer ist als der Bereich, in dem es angezeigt wird. Beispiel: ein 2000px-Foto senden, um es in 400px anzuzeigen.
• "Bilder außerhalb des Bildschirms verzögern": erscheint, wenn Bilder unterhalb des sichtbaren Bereichs zusammen mit dem Rest der Seite geladen werden, statt erst wenn der Nutzer dorthin scrollt (Lazy Loading).
• "Bilder effizient codieren": erscheint, wenn die auf die Bilder angewandte Komprimierung noch Spielraum für Reduzierung ohne wahrnehmbaren Qualitätsverlust hat.
• "LCP-Bild": identifiziert, welches Bild der Largest Contentful Paint der Seite ist — das Hauptelement, das eine der Core-Web-Vitals-Metriken bestimmt.

Die 6 Prinzipien der Bildoptimierung fürs Web

1. Verwende das richtige Format für jeden Bildtyp

Die Formatwahl ist die wirkungsvollste Entscheidung, noch vor jeder Komprimierung:

WebP erzeugt Dateien, die 25–35% kleiner sind als JPG und 20–30% kleiner als PNG bei gleichwertiger visueller Qualität. 2026 liegt die Kompatibilität bei über 97% der genutzten Browser — es gibt keinen technischen Grund mehr, es bei neuen Websites zu vermeiden.

2. Komprimiere ohne auf sichtbare Qualität zu verzichten

Komprimierung reduziert die Dateigröße bei gleichbleibenden Bildabmessungen. Bei JPG-Fotos erzeugt eine Reduzierung der Qualität von 100% auf 80% Dateien, die 5–10-mal kleiner sind, mit nicht wahrnehmbarem Unterschied auf dem Bildschirm. Das ist der ideale Bereich fürs Web.

Praktische Größenrichtwerte nach Bildtyp:

• Hero / Hauptbanner: unter 200 KB
• Produktfoto (E-Commerce): 50–150 KB
• Bild im Blogartikel: 50–120 KB
• Thumbnail / Miniaturbild: 10–30 KB
• Logo (PNG/WebP): unter 30 KB
• SVG-Icons: unter 5 KB

3. Sende Bilder in den tatsächlichen Anzeigemaßen

Das ist der häufigste und zugleich einer der folgenreichsten Fehler: Bilder zu senden, die viel größer sind als der Bereich, in dem sie angezeigt werden. Der Browser lädt das komplette Bild herunter und verwirft dann beim Rendern die überschüssigen Pixel.

Beispiele für die Kosten dieses Fehlers:

• Ein 3000×3000px-Produktfoto, angezeigt in einem 600×600px-Rahmen: Der Browser lädt 9 Millionen Pixel herunter und nutzt nur 360.000 — 96% Verschwendung.
• Ein 4000px breites Banner auf einer Website mit maximal 1440px Layoutbreite: 63% der heruntergeladenen Pixel werden sofort verworfen.

Die Regel ist einfach: Das an den Server gesendete Bild sollte höchstens das Doppelte der Anzeigemaße haben (das Doppelte, um Retina-/HiDPI-Displays abzudecken). Für einen Bereich von 600px Breite sende höchstens 1200px.

Nutze den Bildgrößen-Ändern von ImageTools, um die Abmessungen vor dem Upload anzupassen — mit exakten Pixel- oder Prozentwerten.

4. Implementiere Lazy Loading

Lazy Loading ist die Technik, Bilder erst zu laden, wenn sie kurz davor sind, in den sichtbaren Bildschirmbereich zu gelangen, statt alle Bilder der Seite sofort beim ersten Laden herunterzuladen. Die Auswirkung ist erheblich: Bei Seiten mit vielen Bildern (wie Produktlisten oder langen Artikeln) kann Lazy Loading das anfängliche Seitengewicht um 60–80% reduzieren.

Die einfachste Umsetzung ist nativ im modernen HTML — füge einfach das Attribut loading="lazy" zu den Bild-Tags hinzu:

<!-- Bild, das sofort laden soll (oberhalb des sichtbaren Bereichs) -->
<img src="hauptbanner.webp" alt="Banner" loading="eager">

<!-- Bilder, die warten können (unterhalb des sichtbaren Bereichs) -->
<img src="produkt-1.webp" alt="Produkt 1" loading="lazy">
<img src="produkt-2.webp" alt="Produkt 2" loading="lazy">

Wichtig: Wende loading="lazy" niemals auf das Hauptbild oberhalb des sichtbaren Bereichs an (Hero, Banner, erstes Produktfoto). Das verzögert den LCP — die wichtigste Core-Web-Vitals-Metrik — und schadet direkt der PageSpeed-Bewertung.

5. Definiere width und height in den Bild-Tags

Wenn der Browser beginnt, eine Seite zu laden, baut er das Layout auf, bevor er die Bildgröße kennt. Wenn width und height nicht definiert sind, reserviert der Browser nicht den richtigen Platz — und wenn das Bild lädt, "springt" das Layout und verschiebt Text und Schaltflächen. Das ist es, was PageSpeed als Cumulative Layout Shift (CLS) misst, ein weiterer Core Web Vital.

<!-- Ohne Abmessungen: verursacht Layout Shift -->
<img src="produkt.webp" alt="Produkt">

<!-- Mit Abmessungen: reserviert von Anfang an den richtigen Platz -->
<img src="produkt.webp" alt="Produkt" width="600" height="600">

Die Werte von width und height im HTML müssen nicht der visuellen Anzeigegröße entsprechen — sie definieren nur das Seitenverhältnis. Das CSS kümmert sich um die Anzeigegröße.

6. Verwende responsive Bilder mit srcset

Das srcset-Attribut ermöglicht es, unterschiedliche Versionen eines Bildes für unterschiedliche Geräte bereitzustellen — ein kleineres Bild für Smartphones und ein größeres für Desktops. Der Browser wählt automatisch die passende Version für den Bildschirm des Nutzers.

<img
  src="produkt-800.webp"
  srcset="produkt-400.webp 400w,
          produkt-800.webp 800w,
          produkt-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="Produkt"
  width="800"
  height="800"
  loading="lazy"
>

Für Online-Shops mit vielen Produktfotos kann srcset das für mobile Nutzer übertragene Datenvolumen um 40–60% reduzieren.

Vollständige Checkliste zur Bildoptimierung

Nutze diese Liste, bevor du eine Seite veröffentlichst oder bestehende Bilder aktualisierst:

• ☐ Bilder in WebP (oder SVG für Vektorgrafiken)
• ☐ Komprimierung angewendet — Fotos wenn möglich immer unter 150 KB
• ☐ Richtige Abmessungen — nicht größer als das Doppelte des Anzeigebereichs
• ☐ loading="lazy" bei allen Bildern unterhalb des sichtbaren Bereichs
• ☐ loading="eager" (oder kein Attribut) beim Hauptbild oberhalb des sichtbaren Bereichs
• ☐ width und height in allen <img>-Tags definiert
• ☐ Beschreibendes alt-Attribut bei allen Bildern (Barrierefreiheit + SEO)
• ☐ srcset für Bilder, die in sehr unterschiedlichen Größen zwischen Mobilgerät und Desktop erscheinen
• ☐ LCP-Bild ohne loading="lazy" und wenn möglich mit fetchpriority="high"

Optimierung nach Plattform

WordPress

WordPress konvertiert ab Version 6.1 automatisch in WebP, wenn der Server das unterstützt. Zur Sicherheit installiere ein Optimierungs-Plugin wie Imagify, ShortPixel oder Smush — sie komprimieren, konvertieren in WebP und fügen automatisch Lazy Loading zu bereits vorhandenen Bildern in der Medienbibliothek hinzu.

Shopify

Shopify konvertiert Bilder seit 2021 automatisch in WebP und liefert die passende Version je nach Gerät aus. Was der Shop-Betreiber manuell kontrollieren muss, ist die Größe der hochgeladenen Bilder — empfohlen werden 2048×2048px für Produktfotos, die Shopify dann für jeden Anzeigekontext skaliert.

Wix, Squarespace und andere Baukästen

Die meisten modernen Website-Baukästen wenden bereits automatisch Komprimierung und Lazy Loading an. Was weiterhin vom Nutzer abhängt, ist das Hochladen von Bildern mit angemessenen Abmessungen — 8-MB-Kamerafotos hochzuladen belastet den Server und kann zu größeren Varianten als nötig führen.

Reine HTML/CSS-Websites oder Frameworks (Next.js, Nuxt usw.)

In diesen Fällen liegt die gesamte Optimierung in der Verantwortung des Entwicklers. Die <Image>-Komponente von Next.js automatisiert zum Beispiel Lazy Loading, srcset und WebP-Konvertierung. Bei Frameworks ohne diese Abstraktion ist die manuelle Optimierung nach der obigen Checkliste notwendig.

Wie man die Wirkung der Optimierungen misst

Nach dem Anwenden der Optimierungen, miss das Ergebnis mit diesen Tools:

• Google PageSpeed Insights (pagespeed.web.dev) — vollständige Analyse mit Diagnose pro Element, getrennt für Mobilgerät und Desktop.
• Google Search Console → Bericht zur Seitenerfahrung — zeigt den Status der Core Web Vitals mit echten Nutzerdaten deiner Website.
• WebPageTest.org — detaillierte technische Analyse mit Lade-Wasserfall, nützlich um zu identifizieren, welches konkrete Bild den LCP verzögert.
• Chrome DevTools → Network — filtere nach "Img", um alle geladenen Bilder, ihre Größen und Ladezeiten zu sehen.

Häufig gestellte Fragen