Bilder fuer Ihre Website optimieren: Komplettanleitung fuer 2026
Bilder machen etwa 40% des Gesamtgewichts einer durchschnittlichen Webseite aus. Optimieren Sie sie richtig, und Sie halbieren Ihre Seitengroesse, erreichen einen Largest Contentful Paint unter 2,5 Sekunden und verbessern Ihr Suchranking. Hier ist der vollstaendige Prozess, Schritt fuer Schritt.
Warum Bildoptimierung wichtiger ist denn je
Laut HTTP Archive wiegt die mediane Webseite auf Mobilgeraeten 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 groesste sichtbare Element laedt. Auf den meisten Seiten ist dieses Element ein Bild.
Der Richtwert: Ein LCP von 2,5 Sekunden oder weniger ist "gut". Ueber 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 waehlen
| Format | Beste Verwendung | Groesse vs JPEG | Unterstuetzung |
|---|---|---|---|
| JPEG | Fotos, volle Kompatibilitaet | Referenz | 100% |
| WebP | Fotos + Grafiken | 25-35% kleiner | 97%+ |
| AVIF | Performance-kritische Sites | ~50% kleiner | ~93% |
| PNG | Logos, Icons, Textgrafiken | Oft groesser | 100% |
| SVG | Icons, Illustrationen | Winzig (Vektor) | 100% |
Fuer die meisten Websites ist WebP der sicherste Standard. Sie koennen Ihre Bilder mit Vizua von JPG zu WebP konvertieren oder in AVIF konvertieren. Fuer einen detaillierten Vergleich lesen Sie unseren Artikel WebP vs AVIF.
Schritt 2: Auf die tatsaechliche Anzeiggroesse 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 tatsaechlichen Anzeiggroesse ausliefern.
- Hero-Bild: 1600-1920px breit
- Inhaltsbild: 800-1200px
- Vorschaubild: 300-400px
- Avatar: 64-128px
Verwenden Sie Vizuas Bild-Groessenanpassung, um Bilder vor der Komprimierung zu skalieren. Allein das kann die Dateigroesse um 70-90% reduzieren.
Schritt 3: Mit der richtigen Qualitaet komprimieren
- JPEG: 75-85 — optimaler Bereich fuer Fotos
- WebP: 75-80 — gleiche visuelle Qualitaet 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. Fuer Details pro Format lesen Sie unseren Leitfaden Bilder komprimieren ohne Qualitaetsverlust.
Schritt 4: Bilder effizient ausliefern
Explizite Dimensionen setzen
width und height Attribute auf jedem <img>-Tag verhindern Layout-Verschiebungen (CLS).
Lazy-Loading fuer Bilder unterhalb des Folds
loading="lazy" fuer nicht sofort sichtbare Bilder.
Hero-Bild priorisieren
fetchpriority="high" fuer 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 waehlen.
Schritt 5: Pruefen und messen
- PageSpeed Insights: Auf Ihren Hauptseiten ausfuehren
- DevTools: Netzwerk-Tab, nach Groesse sortieren
- Automatisieren: Bildoptimierung in die Build-Pipeline integrieren
Schnell-Checkliste
- WebP oder AVIF als Standardformat
- Auf tatsaechliche Anzeiggroesse skalieren
- Komprimieren: JPEG/WebP bei 75-85, AVIF bei 60-75
widthundheightauf jedem<img>fetchpriority="high"auf dem Hero/LCP-Bildloading="lazy"fuer alles unterhalb des Folds- Hero unter 200 KB, Vorschaubilder unter 80 KB
- Metadaten entfernen — siehe unseren EXIF-Datenschutz-Leitfaden
Haeufig gestellte Fragen
Welches Bildformat ist am besten fuer Websites?
WebP ist 2026 die beste Standardwahl. Es erzeugt Dateien, die 25-35% kleiner sind als JPEG bei gleicher Qualitaet, unterstuetzt Transparenz und funktioniert in ueber 97% der Browser. Verwenden Sie AVIF fuer noch kleinere Dateien, wenn die Browser-Unterstuetzung 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 ueber 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. Fuer das Hauptbild verwenden Sie stattdessen fetchpriority="high".
Muss ich bei jedem Bild width und height angeben?
Ja. Explizite width- und height-Attribute ermoeglich dem Browser, Platz zu reservieren, bevor das Bild geladen wird. Ohne sie verschiebt sich der Inhalt beim Laden und erhoeft den CLS-Wert.
Optimieren Sie Ihre Bilder jetzt
Kostenlos, privat, ohne Registrierung. Alles laeuft in Ihrem Browser.