1. Warum Page Speed über Verkäufe entscheidet
Eine Sekunde zusätzliche Ladezeit kostet 7 % Conversion, sagt Amazon-Forschung. Google bestraft Sites mit schlechten Core Web Vitals (Largest Contentful Paint, Cumulative Layout Shift, Interaction to Next Paint) im Ranking. Bilder sind in der Regel die größte Bremse — typisch 60–80 % der Gesamt-Page-Größe.
2. Die drei Bildformate 2026 — und wann sie was leisten
JPEG (klassisch)
- Kompatibilität: 100 %
- Komprimierung: gut bei Fotos
- Datei pro Bild: 80–250 kB
- Empfehlung: nur Fallback
WebP (Standard 2026)
- Kompatibilität: > 96 %
- Komprimierung: 25–35 % kleiner als JPEG
- Datei pro Bild: 40–150 kB
- Empfehlung: Standard für Web
AVIF (Cutting Edge)
- Kompatibilität: > 92 % aktueller Browser
- Komprimierung: 40–55 % kleiner als JPEG
- Datei pro Bild: 25–90 kB
- Empfehlung: bei sehr hoher Page-Speed-Priorität
PNG
- Kompatibilität: 100 %
- Lossless, große Dateien
- Datei pro Bild: 200 kB–2 MB
- Empfehlung: Logos, transparente Grafiken
3. Best Practice: responsive Bilder mit picture-Tag
Statt einer einzelnen Bildversion liefern Sie 3–5 unterschiedliche Größen je nach Bildschirm:
- 320 px für kleine Smartphones
- 640 px für moderne Smartphones
- 960 px für Tablets / kleine Desktops
- 1280 px für Standard-Desktops
- 1920 px für Retina-Displays / 4K
Das HTML-Tag <picture> mit <source>-Elementen liefert je nach Bildschirm und Browser die richtige Datei — automatisch.
4. Lazy Loading: nur sichtbare Bilder laden
Mit loading="lazy" als HTML-Attribut werden Bilder erst geladen, wenn sie kurz vor dem sichtbaren Bereich sind. Das spart bei langen Seiten dramatisch Ladezeit — gerade auf mobilen Geräten. Für das Hero-Bild (oberster Bereich) verwenden Sie loading="eager", sonst Standard lazy.
5. Welche Werte Sie anstreben sollten
- LCP (Largest Contentful Paint): < 2.5 Sekunden — Google Standard
- Bildgröße pro Datei: typisch < 200 kB für Standard-Inhalt
- Bildanzahl pro Page: sinnvoll begrenzen, Lazy Loading konsequent
- Gesamtgröße einer Seite: < 2 MB initial Load (above the fold)
6. Tools für die Optimierung
- Squoosh.app — Google-Tool zur manuellen Bildkonvertierung in WebP/AVIF
- ImageOptim (macOS), FileOptimizer (Windows) — Batch-Konvertierung
- Shopify Liquid Filter — automatische WebP-Konvertierung in Themes
- WordPress Plugins: ShortPixel, Imagify, EWWW Image Optimizer
- CDN mit Bildoptimierung: Cloudflare Polish, Imgix, Sirv
7. Was wir bei Digital Media Services standardmäßig liefern
Für unsere Produktfoto- und Werbevideo-Kunden in Bonn, Köln und der Region liefern wir Bilder bereits optimiert: WebP-Versionen in 3–5 Auflösungen plus JPEG-Fallback, sauber komprimiert ohne sichtbare Qualitätsverluste. Auf Wunsch auch AVIF-Versionen für höchste Page Speed Priorität. Mehr zu unserer Produktfotografie auf der Service-Seite.
Häufige Fragen
Wie komprimiere ich Bilder ohne Qualitätsverlust?
Mit modernen Formaten WebP oder AVIF erzielen Sie 25–55 % Dateigröße-Ersparnis gegenüber JPEG bei gleicher visueller Qualität. Tool: Squoosh.app oder Bulk-Konverter.
Soll ich AVIF oder WebP verwenden?
2026 ist WebP die sichere Standard-Wahl (96 % Browser-Support). AVIF nur bei sehr hoher Page-Speed-Priorität und wenn Sie Browser-Fallbacks setzen können.
Wie viele Bildgrößen brauche ich für responsive?
3–5 Größen sind Standard. Beim Hero-Bild lohnen sich auch 5–6 Varianten (320, 640, 960, 1280, 1920, 2560 px für 4K-Displays).
Funktioniert Lazy Loading überall?
Modern ja — alle Browser ab 2020 unterstützen `loading='lazy'` nativ. Für ältere Geräte greifen IntersectionObserver-Polyfills.
Sollte ich Stock-Bilder oder eigene Bilder einsetzen?
Für SEO und Conversion klar eigene Bilder — Stock wird oft gleichzeitig auf tausenden Sites genutzt und ranking-niedrig gewichtet. Plus: eigene Bilder transportieren Marke und Region authentisch.