Bilder für Ihre Website optimieren: Komplettanleitung für 2026
Bilder machen etwa 40% des Gesamtgewichts einer durchschnittlichen Webseite aus. Optimieren Sie sie richtig, und Sie halbieren Ihre Seitengröße, erreichen einen Largest Contentful Paint unter 2,5 Sekunden und verbessern Ihr Suchranking. Hier ist der vollständige Prozess, Schritt für Schritt.
Warum Bildoptimierung wichtiger ist denn je
Laut HTTP Archive wiegt die mediane Webseite auf Mobilgeräten etwa 2,5 MB, und Bilder machen davon rund 1 MB aus. Googles Core Web Vitals — insbesondere der Largest Contentful Paint (LCP) — messen direkt, wie schnell das größte sichtbare Element lädt. Auf den meisten Seiten ist dieses Element ein Bild.
Der Richtwert: Ein LCP von 2,5 Sekunden oder weniger ist "gut". Über 4 Sekunden ist "schlecht". Seiten mit bildbasiertem LCP haben im 75. Perzentil fast doppelt so lange Ladezeiten wie Seiten mit textbasiertem LCP.
Schritt 1: Das richtige Format wählen
| Format | Beste Verwendung | Größe vs JPEG | Unterstützung |
|---|---|---|---|
| JPEG | Fotos, volle Kompatibilität | Referenz | 100% |
| WebP | Fotos + Grafiken | 25-35% kleiner | 97%+ |
| AVIF | Performance-kritische Sites | ~50% kleiner | ~95% |
| PNG | Logos, Icons, Textgrafiken | Oft größer | 100% |
| SVG | Icons, Illustrationen | Winzig (Vektor) | 100% |
Für die meisten Websites ist WebP der sicherste Standard. Sie können Ihre Bilder mit Vizua von JPG zu WebP konvertieren oder in AVIF konvertieren. Für einen detaillierten Vergleich lesen Sie unseren Artikel WebP vs AVIF.
Schritt 2: Auf die tatsächliche Anzeigegröße skalieren
Ein 4000 x 3000 Pixel-Foto, das auf der Website bei 800 x 600 angezeigt wird, verschwendet etwa 80% seiner Pixel. Regel: Bilder in der tatsächlichen Anzeigegröße ausliefern.
- Hero-Bild: 1600-1920px breit
- Inhaltsbild: 800-1200px
- Vorschaubild: 300-400px
- Avatar: 64-128px
Verwenden Sie Vizuas Bild-Größenanpassung, um Bilder vor der Komprimierung zu skalieren. Allein das kann die Dateigröße um 70-90% reduzieren.
Schritt 3: Mit der richtigen Qualität komprimieren
- JPEG: 75-85 — optimaler Bereich für Fotos
- WebP: 75-80 — gleiche visuelle Qualität wie JPEG 85, kleinere Datei
- AVIF: 60-75 — niedrigere Werte sehen dank des effizienten Codecs noch gut aus
- PNG: Maximale Komprimierung (verlustfrei)
Vizuas JPEG-Kompressor erledigt das automatisch. Für Details pro Format lesen Sie unseren Leitfaden Bilder komprimieren ohne Qualitätsverlust.
Schritt 4: Bilder effizient ausliefern
Explizite Dimensionen setzen
width und height Attribute auf jedem <img>-Tag verhindern Layout-Verschiebungen (CLS).
Lazy-Loading für Bilder unterhalb des Folds
loading="lazy" für nicht sofort sichtbare Bilder.
Hero-Bild priorisieren
fetchpriority="high" für das wichtigste Bild above-the-fold. Vorgeladene LCP-Bilder: 75. Perzentil bei 364ms. Lazy-geladene: 720ms.
Responsive Bilder verwenden
srcset und sizes lassen den Browser die beste Variante wählen.
Schritt 5: Prüfen und messen
- PageSpeed Insights: Auf Ihren Hauptseiten ausführen
- DevTools: Netzwerk-Tab, nach Größe sortieren
- Automatisieren: Bildoptimierung in die Build-Pipeline integrieren
Schnell-Checkliste
- WebP oder AVIF als Standardformat
- Auf tatsächliche Anzeigegröße skalieren
- Komprimieren: JPEG/WebP bei 75-85, AVIF bei 60-75
widthundheightauf jedem<img>fetchpriority="high"auf dem Hero/LCP-Bildloading="lazy"für alles unterhalb des Folds- Hero unter 200 KB, Vorschaubilder unter 80 KB
- Metadaten entfernen — siehe unseren EXIF-Datenschutz-Leitfaden
Häufig gestellte Fragen
Welches Bildformat ist am besten für Websites?
WebP ist 2026 die beste Standardwahl. Es erzeugt Dateien, die 25-35% kleiner sind als JPEG bei gleicher Qualität, unterstützt Transparenz und funktioniert in über 97% der Browser. Verwenden Sie AVIF für noch kleinere Dateien, wenn die Browser-Unterstützung es erlaubt.
Wie stark verlangsamen nicht optimierte Bilder eine Website?
Bilder machen etwa 40% des Gesamtgewichts einer Webseite aus (ca. 1 MB der medianen 2,5 MB laut HTTP Archive). Ein einziges nicht optimiertes Hero-Bild kann Ihren LCP über 4 Sekunden treiben — von Google als "schlecht" eingestuft.
Sollte ich Lazy-Loading bei allen Bildern verwenden?
Nein. Verwenden Sie Lazy-Loading nur bei Bildern unterhalb des sichtbaren Bereichs. Verwenden Sie es niemals beim Hero-Bild oder LCP-Element. Für das Hauptbild verwenden Sie stattdessen fetchpriority="high".
Muss ich bei jedem Bild width und height angeben?
Ja. Explizite width- und height-Attribute ermöglichen dem Browser, Platz zu reservieren, bevor das Bild geladen wird. Ohne sie verschiebt sich der Inhalt beim Laden und erhöht den CLS-Wert.
Optimieren Sie Ihre Bilder jetzt
Kostenlos, privat, ohne Registrierung. Alles läuft in Ihrem Browser.