Bild für Web optimieren

Warum müssen Bilder für das Web optimiert werden?

Das Optimieren von Bildern für das Web ist eine der grundlegendsten und gleichzeitig wirkungsvollsten Maßnahmen zur Verbesserung der Webseitenperformance. Unoptimierte Bilder sind laut Googles PageSpeed Insights der häufigste Einzelfaktor für schlechte Ladezeiten – und schlechte Ladezeiten haben direkte Auswirkungen auf alle wichtigen Kennzahlen: Weniger Seitenaufrufe, höhere Absprungraten, niedrigere Konversionsraten und schlechtere Positionen in den Google-Suchergebnissen. Ein Foto aus einer DSLR-Kamera kann leicht 8–25 MB groß sein. Für das Web sollte dasselbe Bild maximal 100–300 KB groß sein – eine Reduktion um den Faktor 25 bis 250.

Was bedeutet „Web-Optimierung" für ein Bild?

Die Web-Optimierung eines Bildes umfasst mehrere aufeinander aufbauende Schritte: Erstens die Auflösung anpassen – ein Bild sollte nie größer als der maximal angezeigte Bereich sein. Zweitens das Format wählen – für Fotos WebP oder JPEG, für Grafiken WebP oder PNG. Drittens die Komprimierung einstellen – die richtige Qualitätsstufe für den jeweiligen Verwendungszweck. Unser Tool führt alle drei Schritte in einem einzigen Durchgang durch und gibt dir zudem eine geschätzte PageSpeed-Bewertung, damit du sofort siehst, wie gut dein optimiertes Bild für das Web ist.

Verwendungszwecke: Die richtigen Einstellungen für jede Situation

Verschiedene Einsatzbereiche erfordern unterschiedliche Optimierungsstrategien. Für Blog-Artikel empfehlen wir WebP, maximale Breite 1200 px, Qualität 80 – das liefert scharfe Bilder bei unter 150 KB. Hero-Bilder (das große Bild ganz oben auf einer Seite) sind oft das LCP-Element und sollten besonders sorgfältig optimiert werden: WebP, 1920 px, Qualität 85 – Ziel sind unter 200 KB. Für Online-Shop-Produktbilder braucht es etwas mehr Qualität, da Kunden Details sehen wollen: WebP oder JPG, 1200 px, Qualität 87. Thumbnails für Kategorie-Übersichten können stark komprimiert werden: 400 px, Qualität 70, WebP. Für Social Media gelten plattformspezifische Dimensionen, aber eine gute Ausgangsbasis ist: 1200×630 px, JPG, Qualität 82.

Core Web Vitals und Bilder: LCP, CLS und FID

Googles Core Web Vitals sind drei Metriken, die die Nutzererfahrung messen und direkten Einfluss auf das Ranking haben. Für Bilder ist vor allem der Largest Contentful Paint (LCP) relevant: Er misst, wie lange es dauert, bis das größte sichtbare Element – meist ein Bild – vollständig geladen ist. Google bewertet LCP unter 2,5 Sekunden als gut, unter 4 Sekunden als verbesserungswürdig, darüber als schlecht. Ein unkomprimiertes 2 MB Bild kann auf einer normalen Mobilverbindung 4–8 Sekunden brauchen, was zu einem schlechten LCP-Score führt. Dasselbe Bild als optimiertes WebP mit 120 KB lädt in unter 1 Sekunde.

PageSpeed Insights und die Bildoptimierungs-Empfehlung

Wenn du deine Webseite durch Google PageSpeed Insights oder Lighthouse laufen lässt, wird unter „Opportunities" häufig „Bilder in modernen Formaten bereitstellen" und „Bilder richtig dimensionieren" angezeigt. Diese Empfehlungen beziehen sich direkt auf nicht optimierte Bilder. Mit unserem Tool kannst du gezielt die Bilder identifizieren und optimieren, die den größten Einfluss auf deinen PageSpeed-Score haben. Das sind fast immer das Hero-Bild und die ersten sichtbaren Bilder beim Laden der Seite.

SEO-Vorteile der Bildoptimierung

Die Bildoptimierung beeinflusst SEO auf mehreren Ebenen. Direkt über die Core Web Vitals als Ranking-Signal. Indirekt über die Seitengeschwindigkeit, die die Crawl-Effizienz verbessert und die Absprungrate senkt. Hinzu kommen weitere SEO-Faktoren bei Bildern: alt-Text für Bildersuche, aussagekräftige Dateinamen, und strukturierte Daten für Produktbilder. Optimierte Bilder werden zudem häufiger in der Google Bildersuche angezeigt, wenn sie schnell laden und korrekt ausgezeichnet sind. Für lokale SEO können Bilder mit Geo-Metadaten ergänzt werden – aber das ist ein separater Schritt nach der Optimierung.

Responsive Images: Srcset und sizes

Für fortgeschrittene Web-Optimierung solltest du nach der Bildoptimierung auch responsive Images implementieren. Das HTML-Attribut srcset ermöglicht es, verschiedene Bildgrößen für verschiedene Bildschirmauflösungen bereitzustellen: Mobilgeräte laden ein 400 px breites Bild, Desktop-Nutzer das 1920 px Bild. Kombiniert mit dem sizes-Attribut kann der Browser die optimale Bildgröße automatisch wählen. Mit unserem Tool kannst du mehrere Versionen desselben Bildes in verschiedenen Breiten erzeugen – optimiere das Bild einmal für 1920 px, einmal für 1200 px und einmal für 400 px.

Bilder lazy laden: loading="lazy"

Neben der Bildoptimierung selbst ist Lazy Loading eine weitere wichtige Web-Performance-Technik. Das HTML-Attribut loading="lazy" sorgt dafür, dass Bilder erst geladen werden, wenn sie in den sichtbaren Bereich des Browsers scrollen. So muss der Browser beim ersten Laden der Seite nur die Bilder above-the-fold laden – die restlichen Bilder werden nachgeladen. In Kombination mit optimierten WebP-Bildern ist das die wirkungsvollste Maßnahme für schnelle Ladezeiten. Ausnahme: Das LCP-Bild (meist das Hero-Bild) sollte nie lazy geladen werden.

Alternativen: Cloudinary, imgix, Shopify-CDN

Für große Webseiten mit vielen Bildern lohnen sich Image-CDN-Dienste wie Cloudinary, imgix oder Sirv. Diese Dienste optimieren Bilder automatisch beim Abruf, liefern automatisch WebP an unterstützende Browser, skalieren Bilder auf die gewünschte Größe und cachen sie in einem globalen CDN-Netzwerk. Der Nachteil sind monatliche Kosten und technisches Setup. Unser kostenloses Tool ist die ideale Lösung für Blogger, Freelancer und kleine Unternehmen, die ihre Bilder manuell optimieren wollen – ohne Abo, ohne Server, ohne Datenschutzrisiko.