Bildoptimierung für schnellere Seiten: die Praxis-Checkliste

Geprüft am 28. Juli 2026

Boltpic

Die Artikel beschreiben die aktuellen Boltpic-Werkzeuge und verlinken relevante technische Quellen. Ergebnisse, die von Bild, Browser oder Gerät abhängen, werden als variabel gekennzeichnet.

Bilder können das Übertragungsvolumen einer Seite dominieren und den LCP stark beeinflussen. Ist ein großes Bild im ersten Sichtbereich überdimensioniert oder wird spät entdeckt, sehen Besucher den Hauptinhalt später.

Die folgenden Punkte bilden einen typischen Ablauf. Miss vor und nach jeder Änderung, denn die Wirkung hängt von Seite, Layout und Nutzung ab.

1. Bilder in Anzeigegröße ausliefern

Ein 4.000 Pixel breites Foto in einem 400-Pixel-Bereich enthält in Breite und Höhe weit mehr Bildpunkte als dort sichtbar sind. Wie viele Bytes übertragen werden, hängt zusätzlich von Format und Komprimierung ab. Erzeuge Dateien ungefähr in Anzeigegröße — bei Bedarf zusätzlich eine doppelt so breite Variante für hochauflösende Displays — und lass den Browser bei flexiblen Layouts aus mehreren Größen wählen:

<img
  src="foto-800.webp"
  srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Hafen in der Abenddämmerung"
/>

Mit diesem Markup wählt der Browser einen Kandidaten passend zu Viewport und Pixeldichte. Kleine Bildschirme laden keine unnötig große Datei; wie viel das spart, hängt von den Kandidaten und dem Layout ab.

2. Jedem Bild width und height geben

Kennt der Browser die Maße eines Bildes nicht im Voraus, können sich benachbarte Inhalte beim Laden verschieben. Diese Bewegung fließt in den Cumulative Layout Shift (CLS) ein. Gib width und height an oder reserviere das Seitenverhältnis in CSS, damit der Browser den Platz vor dem Laden einplanen kann.

3. Bilder unterhalb des sichtbaren Bereichs später laden

loading="lazy" bittet den Browser, weit außerhalb des Viewports liegende Bilder später zu laden. Das kann die ersten Anfragen auf langen Seiten reduzieren und wird von aktuellen großen Browsern unterstützt.

Wende Lazy Loading nicht pauschal auf das wichtigste Bild im ersten Sichtbereich an. Wird dieses Bild zum LCP-Element, kann das Zurückstellen die Metrik verschlechtern. Lade ein bestätigtes LCP-Bild sofort und prüfe anhand von Messungen, ob fetchpriority="high" sinnvoll ist.

4. Ein Byte-Budget festlegen und mit Formaten erreichen

Lege ein Byte-Budget passend zum Geschwindigkeitsziel und zur Rolle des Bildes fest. Für ein erstes Audit können 200 KB für den Hero, 100 KB für ein Artikelbild und 30 KB für ein Thumbnail als Startwerte dienen, nicht als allgemeine Grenzwerte. Exportiere Fotos als WebP oder JPG, nutze PNG für wichtige Schrift oder Transparenz und prüfe das Ergebnis auf der echten Seite.

5. Eine Cache-Richtlinie festlegen

Lege für versionierte Bilder eine Cache-Dauer fest, die zu deinem Veröffentlichungsprozess passt. Ein Inhalts-Hash im Dateinamen — etwa foto.a1b2c3.webp — ermöglicht bei Änderungen eine neue URL. Ein CDN kann die Übertragungszeit statischer Bilder verkürzen; der Nutzen hängt jedoch von Besucherstandorten, Cache-Trefferrate und der übrigen Auslieferung ab.

Kurzer Prüfablauf in den Entwicklertools

• Seite mit DevTools öffnen → Network → Filter „Img“, neu laden und nach übertragener Größe sortieren. Prüfe zuerst die größten Dateien.
• Ist eine der größten Dateien deutlich größer als ihre Anzeige, ändere ihre Abmessungen und vergleiche WebP- oder JPG-Exporte nach Qualität und Dateigröße. Boltpics Werkzeuge für Größenänderung, Komprimierung und Konvertierung erledigen das im Browser.
• Das größte sichtbare Bild auf dem Handy prüfen: Ist es versehentlich lazy geladen? Hat es width/height gesetzt?
• Nach den Korrekturen einmal Lighthouse laufen lassen — die Audits „Bilder richtig dimensionieren“ und „Bilder in modernen Formaten bereitstellen“ zeigen, was übrig ist.

Wiederhole das Audit nach der Bereitstellung. Netzwerkbedingungen, responsive Bildkandidaten und Seitenaufbau bestimmen, wie stark jede Änderung die reale Nutzung verbessert.

← Alle Ratgeber