So laden Bilder auf deiner Website schneller (ohne Unschärfe)

Auf den meisten Websites machen Bilder den größten Teil dessen aus, was ein Besucher herunterlädt — oft mehr als alles andere zusammen. Sie zu optimieren ist der günstigste Geschwindigkeitsgewinn, und er hilft Besuchern wie auch dem Suchmaschinen-Ranking. Hier eine praktische Checkliste, von den Änderungen, die am meisten bringen, bis zum Feinschliff.

Vom CrispPic-TeamAktualisiert am 25. September 20263 Min. Lesezeit

JPG in WebP umwandeln Auf eine Zielgröße komprimieren Auf exakte Pixel skalieren

Warum das Bildgewicht zählt

Das Langsamste auf einer Seite ist meist ihr größtes Bild, und oft misst der Browser genau das als Largest Contentful Paint (LCP). Googles Core Web Vitals werten einen LCP unter 2,5 Sekunden als gut. Ein 3-MB-Hero-Foto kann bei einer mobilen Verbindung dieses gesamte Budget allein aufbrauchen.

1. Liefere Bilder in der Größe aus, in der sie angezeigt werden

Es ergibt keinen Sinn, ein 4000-Pixel-Foto an einen Platz zu schicken, der es 800 Pixel breit anzeigt. Als Faustregel sollte ein Bild höchstens etwa doppelt so breit sein wie seine Anzeigebreite, das hält es auf hochauflösenden Bildschirmen scharf. Typische Breiten: 1600–2000 px für ein Hero-Bild über die volle Breite, 800–1200 px für Artikelbilder, 300–400 px für Thumbnails.

2. Nutze ein modernes Format

WebP-Dateien sind bei ähnlicher Qualität typischerweise 25–35 % kleiner als JPG, und alle aktuellen Browser unterstützen sie. Nutze PNG nur dort, wo du verlustfreie Grafiken oder Transparenz brauchst. Musst du ältere Software unterstützen, halte einen JPG-Ersatz bereit. Siehe JPG vs. PNG vs. WebP für die Details.

3. Komprimiere auf ein sinnvolles Gewicht

Das sind grobe Richtwerte, keine Regeln: ein Hero-Bild unter etwa 200 KB, Bilder in Artikeln unter etwa 100 KB und Thumbnails unter etwa 30 KB. Lege das Ziel fest und lass das Werkzeug die höchste Qualität finden, die es erfüllt, statt mit einem Regler zu raten.

4. Lade Bilder unterhalb des sichtbaren Bereichs verzögert

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

Verzögertes Laden (Lazy Loading) schiebt Bilder auf, bis der Besucher in ihre Nähe scrollt. Wende es nicht auf das Hauptbild oben auf der Seite an — dieses sollte sofort laden, denn meist ist es das LCP-Element.

5. Setze immer Breite und Höhe

Stehen die Abmessungen im HTML, reserviert der Browser den passenden Platz, bevor das Bild eintrifft, sodass die Seite beim Laden nicht springt (dieses Springen wird als Cumulative Layout Shift gemessen). Ein aussagekräftiges alt-Attribut hilft der Barrierefreiheit und der Bildersuche.

6. Biete mehrere Größen mit srcset an

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

Der Browser wählt die kleinste Datei, die für den Bildschirm des Besuchers scharf genug ist, sodass ein Handy nicht die Desktop-Version herunterlädt.

So prüfst du deine Arbeit

Lass die Seite durch PageSpeed Insights oder Lighthouse in den Chrome-Entwicklertools laufen. Beide markieren überdimensionierte und nicht optimierte Bilder und schätzen die genauen Bytes, die du sparen würdest.

Die Dateien vorbereiten

Wandle das Bild in WebP um.
Lege im Skalierungs-Werkzeug die benötigte Breite fest — mit gesperrtem Seitenverhältnis.
Lege eine maximale Dateigröße fest und prüfe das Ergebnis mit dem Vorher/Nachher-Regler.
Exportiere eine Datei pro Breite, die du in srcset verwenden willst.

Arbeite bei jedem Export vom Original aus. Eine bereits komprimierte Kopie erneut zu komprimieren, kostet mehr Qualität, als die Quelle einmal zu komprimieren.

Häufig gestellte Fragen

Welche Bildgröße ist für eine Website am besten?

Die Größe, in der es angezeigt wird, mit bis zu etwa der doppelten Breite für Schärfe auf hochauflösenden Bildschirmen. Für ein Hero-Bild über die volle Breite sind 1600–2000 Pixel typisch.

Welches Bildformat ist für eine Website am besten?

WebP für die meisten Fotos und Grafiken, mit JPG als Ersatz, und PNG nur dort, wo verlustfreie Qualität oder Transparenz unverzichtbar sind.

Beeinflusst die Bildgröße die SEO?

Indirekt. Schwere Bilder verlangsamen die Seite, was Core Web Vitals wie den LCP verschlechtert, und die Seitenerfahrung ist eines der Signale, die Suchmaschinen berücksichtigen.

Sollte ich Bilder automatisch per Plugin komprimieren?

Das kann bei einer großen Website Zeit sparen, aber du musst trotzdem die richtigen Abmessungen ausliefern. Skalieren ist meist der größere Gewinn und hängt von keinem Plugin ab.

Probier es mit den passenden Einstellungen, schon angewendet

Diese Seiten öffnen das CrispPic-Werkzeug bereits für genau diesen Fall eingerichtet. Dein Bild wird in deinem eigenen Browser verarbeitet — es wird nirgendwohin hochgeladen.