🗜️SquishIt
728 × 90 — Leaderboard
Cookie-Banner ausstehend
Start / Guides / Web Performance

Web Performance Guide — Bilder als Haupthebel

Bilder machen 50–65% des Seitengewichts aus. Dieser Guide zeigt alle Maßnahmen für schnellere Websites — von der Grundlage bis zu fortgeschrittenen Techniken.

Maßnahmen nach Aufwand und Wirkung

Sofort
Aufwand: Impact: ⭐⭐⭐⭐⭐
Sofort
Aufwand: Impact: ⭐⭐⭐⭐⭐
Sofort
Aufwand: Impact: ⭐⭐⭐⭐⭐
Code
Aufwand: Impact: ⭐⭐⭐⭐
Code
Lazy Loading aktivieren
Aufwand: Impact: ⭐⭐⭐
Code
Aufwand: ⭐⭐Impact: ⭐⭐⭐⭐
Code
Responsive srcset
Aufwand: ⭐⭐⭐Impact: ⭐⭐⭐
Infra
CDN einrichten
Aufwand: ⭐⭐⭐Impact: ⭐⭐⭐
Modern
Aufwand: ⭐⭐Impact: ⭐⭐⭐⭐
UX
Blur Placeholder
Aufwand: ⭐⭐Impact: ⭐⭐

Core Web Vitals im Überblick

LCP< 2,5s
Largest Contentful Paint
Zeit bis das größte sichtbare Element geladen ist. Meist ein Hero-Bild. Wichtigste Metrik für Bilder.
Fix: LCP-Bild komprimieren, preloaden, WebP verwenden
INP< 200ms
Interaction to Next Paint
Reaktionszeit auf Nutzerinteraktionen. Wenig direkt mit Bildern verknüpft, aber große Bilder blockieren den Browser.
Fix: Keine riesigen Bilder synchron laden
CLS< 0,1
Cumulative Layout Shift
Visuelle Stabilität. Bilder ohne feste Abmessungen verursachen Layout-Sprünge beim Laden.
Fix: width + height Attribute, aspect-ratio in CSS

Vertiefende Artikel

Bilder fürs Web optimieren — Der komplette Guide
Alle Maßnahmen von Format bis Lazy Loading in einem Artikel
Core Web Vitals verbessern — Bilder als größter Hebel
LCP, CLS und INP konkret verbessern
Website Ladezeit optimieren
Bilder als größter Performance-Faktor
Retina-Bilder optimieren
HiDPI ohne riesige Dateien
Bilder SEO — so rankt man in der Bildersuche
Alt-Texte, Dateinamen, strukturierte Daten