So komprimierst du Bilder fürs Web, ohne Qualität zu verlieren

Bilder machen 50–60 % der Gesamtgröße einer durchschnittlichen Webseite aus. Sie vor dem Hochladen zu komprimieren, ist eine der wirkungsvollsten Optimierungen, die du für die Geschwindigkeit deiner Website vornehmen kannst — und damit auch für dein SEO-Ranking und die Nutzererfahrung.

Warum Bildkomprimierung für SEO wichtig ist

Googles Core Web Vitals — insbesondere Largest Contentful Paint (LCP) — messen, wie schnell der Hauptinhalt deiner Seite lädt. Nicht optimierte Bilder sind die häufigste Ursache für schlechte LCP-Werte. Seitengeschwindigkeit ist ein bestätigter Rankingfaktor, und Googles PageSpeed Insights markiert nicht optimierte Bilder explizit als "Verbesserungsmöglichkeiten" für deine Bewertung.

Welche Qualitätseinstellung solltest du verwenden?

Die Qualitätseinstellung steuert, wie stark das Bild komprimiert wird:

• 90–100 %: Nahezu verlustfrei. Dateien bleiben groß. Nur für druckreife Assets verwenden.
• 80–85 %: Der Sweet Spot für die meisten Webbilder. Dateien sind 50–70 % kleiner als das Original ohne sichtbaren Unterschied auf dem Bildschirm.
• 70–75 %: Aggressive Komprimierung. Funktioniert gut für kleine Vorschaubilder und Hintergrundbilder. Kann bei genauer Betrachtung leichte Artefakte zeigen.
• Unter 60 %: Sichtbarer Qualitätsverlust. Nur für sehr kleine Vorschauen oder Platzhalter verwenden.

Für die meisten Website-Bilder ist 80 % Qualität der beste Ausgangspunkt.

Das richtige Format macht mehr Unterschied als die Komprimierungsstufe

Die Wahl des richtigen Formats hat mehr Einfluss als das Justieren des Qualitätsreglers:

• Fotos: Verwende WebP (25–35 % kleiner als JPG bei gleicher Qualität) oder JPG bei 80 %.
• Logos und Icons: Wenn möglich SVG verwenden. Bei Rasterformaten WebP oder PNG.
• Illustrationen mit flächigen Farben: PNG oder verlustfreies WebP.
• Animierte Bilder: WebP-Animation oder Videoformate (deutlich kleiner als GIF).

Schritt für Schritt: Bilder für deine Website komprimieren

1. Zuerst die Größe anpassen — Lade kein 4000px breites Foto hoch, wenn deine Website es nur bei 800px anzeigt. Verwende unseren Bildgrößenänderer, um es zuerst auf die tatsächliche Anzeigegröße zu skalieren.
2. Das richtige Format wählen — Konvertiere JPG zu WebP oder PNG zu WebP für die besten Web-Ergebnisse.
3. Komprimieren — Verwende unseren Bildkomprimierer mit 75–80 % Qualität.
4. Richtige Abmessungen festlegen — Verwende die Attribute width und height in deinen <img>-Tags, um Layout-Verschiebungen zu vermeiden.
5. Lazy Loading verwenden — Füge loading="lazy" zu Bildern unterhalb des sichtbaren Bereichs hinzu, damit sie erst laden, wenn sie sichtbar werden.

WordPress-Nutzer: Automatische Komprimierung

Wenn du WordPress verwendest, installiere Smush oder ShortPixel, um Bilder automatisch beim Hochladen zu komprimieren. Beide haben kostenlose Tarife, die für die meisten kleinen Websites ausreichen. Sie liefern für unterstützte Browser auch automatisch WebP aus.

Wie viel kannst du sparen?

Praxisbeispiel: Ein Blogbeitrag mit 5 nicht optimierten Fotos zu je 2 MB = 10 MB Seitengewicht. Nach Skalierung auf 1200px Breite und Komprimierung zu WebP bei 80 %:

• Jedes Bild: ~80–120 KB
• Gesamt: ~500 KB
• Ersparnis: über 95 %

Das ist der Unterschied zwischen einer Seite, die auf einer mobilen Verbindung 8 Sekunden lädt, und einer, die unter 1 Sekunde lädt.