Schöne Fotos sind nur dann ein Gewinn für eure Website, wenn sie auch schnell laden. Unkomprimierte Bilder sind der häufigste Grund für lahme Seiten – und langsame Seiten kosten Ranking und Conversion. Die gute Nachricht: Mit den richtigen Formaten und etwas Komprimierung lassen sich Bilddateien oft um 70–90 % verkleinern, ohne dass man einen Unterschied sieht. Hier die wichtigsten Hebel.
Warum Bildgröße über Erfolg entscheidet
Bilder machen auf den meisten Websites den größten Teil des Datenvolumens aus. Eine einzige unkomprimierte Foto-Datei kann mehrere Megabyte wiegen – auf einer Seite mit zehn Bildern summiert sich das schnell. Die Folgen:
- Schlechte Ladezeit: Google nutzt Ladegeschwindigkeit (Core Web Vitals) als Ranking-Faktor.
- Höhere Absprungrate: Nutzer warten nicht. Jede zusätzliche Sekunde kostet Besucher.
- Mobiler Datenverbrauch: Auf dem Handy zählt jedes Kilobyte.
Wie wichtig professionelle Bildoptimierung ist, sieht man auch in unserem Beitrag dazu, warum schlechte Fotos Kunden kosten – Qualität und Performance gehören zusammen.
Moderne Formate: WebP und AVIF
Das klassische JPEG ist überholt. Zwei moderne Formate sind deutlich effizienter:
- WebP: Bei gleicher Qualität meist 25–35 % kleiner als JPEG. Wird von allen modernen Browsern unterstützt.
- AVIF: Noch effizienter (oft 50 % kleiner als JPEG), inzwischen breit unterstützt. Ideal als erstes Format mit WebP/JPEG als Fallback.
Der Profi-Weg ist, beide bereitzustellen und den Browser per <picture>-Element das beste unterstützte Format wählen zu lassen.
Richtig komprimieren
Komprimierung heißt nicht „Qualität opfern”. Für Web-Fotos liegt der ideale Punkt meist bei einer Qualitätsstufe von etwa 75–85 %. Dort ist die Datei klein, aber der Unterschied mit bloßem Auge nicht erkennbar. Erst darunter werden Artefakte sichtbar. Tools wie Squoosh (kostenlos, im Browser) zeigen den Effekt live.
Responsive Größen: nicht ein Bild für alle
Ein häufiger Fehler: ein riesiges 3000-Pixel-Bild auch auf dem Handy ausliefern. Besser sind mehrere Größen (z. B. 400, 800, 1200, 1600 px) per srcset – der Browser lädt dann die passende für das jeweilige Gerät. Auf dem Smartphone spart das massiv Datenvolumen.
Weitere Stellschrauben
- Lazy Loading: Bilder erst laden, wenn sie in den sichtbaren Bereich kommen (
loading="lazy"). Beschleunigt den ersten Eindruck. - Korrekte Dimensionen:
widthundheightim HTML angeben – verhindert Layout-Sprünge (CLS) beim Laden. - Wichtigstes Bild bevorzugt laden: Das Hero-Bild mit
fetchpriority="high", damit es sofort erscheint.
Die Quick-Checkliste
- ✅ Format: AVIF + WebP statt JPEG/PNG
- ✅ Komprimierung: Qualität ~80 %
- ✅ Responsive Größen via
srcset - ✅ Lazy Loading für Bilder unterhalb der Falz
- ✅
width/heightgesetzt, Hero mit hoher Priorität
Häufige Fragen
Was ist besser: WebP oder AVIF? AVIF ist meist noch effizienter, WebP universell unterstützt. Am besten bietet ihr AVIF zuerst an, mit WebP/JPEG als Fallback – so bekommt jeder Browser das beste Format.
Verliere ich durch Komprimierung an Bildqualität? Bei einer Qualitätsstufe um 80 % ist der Unterschied mit bloßem Auge praktisch nicht erkennbar, die Datei aber deutlich kleiner. Erst bei starker Komprimierung werden Artefakte sichtbar.
Wie stark beeinflussen Bilder das Google-Ranking? Indirekt stark: über die Ladegeschwindigkeit (Core Web Vitals), die ein Ranking-Faktor ist. Schnelle Seiten ranken tendenziell besser und konvertieren mehr.
Welche Tools eignen sich zum Optimieren? Squoosh (kostenlos, im Browser) für einzelne Bilder, Build-Tools oder CMS-Plugins für automatische Optimierung größerer Mengen.
Brauche ich für jedes Bild mehrere Größen?
Für wichtige, große Bilder ja (responsive srcset). Kleine Icons oder Logos brauchen das nicht. Der Aufwand lohnt sich besonders bei Hero- und Inhaltsbildern.
Ihr braucht professionelle, web-optimierte Bilder für eure Seite? Wir liefern Fotos direkt in modernen Formaten und passenden Größen. Projekt anfragen.
