Bildkomprimierung fürs Web: Warum sie wichtig ist und wie man sie richtig macht
Bilder machen typischerweise 50 bis 70 Prozent der Gesamtdateigröße einer Webseite aus. Ein nicht optimiertes Hero-Bild kann leicht 3 bis 5 Megabyte wiegen, was auf einer Mobilverbindung mehrere Sekunden zum Laden benötigen kann. Besucher, die länger als drei Sekunden warten, verlassen die Seite zunehmend. Bildkomprimierung ist keine technische Spielerei — sie beeinflusst direkt Ihre Absprungrate, Benutzererfahrung, Suchmaschinenrankings und sogar Hosting-Kosten.
Es gibt zwei grundlegende Arten der Bildkomprimierung: verlustbehaftet (lossy) und verlustfrei (lossless). Verlustfreie Komprimierung reduziert die Dateigröße ohne Qualitätsverlust — jedes Pixel ist identisch mit dem Original. PNG verwendet verlustfreie Komprimierung und wird bevorzugt für Grafiken mit scharfen Kanten, Text und Transparenz. Der Nachteil ist, dass verlustfreie Dateien größer sind.
Verlustbehaftete Komprimierung erreicht viel kleinere Dateigrößen, indem Bilddaten dauerhaft verworfen werden. JPEG ist das klassische verlustbehaftete Format. Bei moderaten Qualitätseinstellungen ist der visuelle Unterschied für die meisten Betrachter nicht wahrnehmbar, während die Dateigröße um 60 bis 80 Prozent reduziert werden kann. Der Schlüssel liegt darin, den Sweet Spot zu finden.
WebP, von Google entwickelt, bietet sowohl verlustbehaftete als auch verlustfreie Komprimierung und produziert typischerweise 25 bis 35 Prozent kleinere Dateien als vergleichbare JPEG- oder PNG-Dateien. Die Browser-Unterstützung für WebP ist mittlerweile universell, was es zur hervorragenden Standardwahl macht. AVIF ist ein noch neueres Format mit überlegenen Komprimierungsraten.
Die Wahl des richtigen Formats hängt vom Inhalt ab. Fotografien und komplexe Bilder funktionieren am besten als JPEG oder WebP verlustbehaftet. Grafiken mit Flächenfarben, Text, Logos und Transparenz benötigen PNG, WebP verlustfrei oder SVG für Vektorgrafiken. Animationen verwenden traditionell GIF, aber WebP und AVIF bieten dramatisch kleinere animierte Varianten.
Die Auflösung wird bei der Bildoptimierung oft übersehen. Ein häufiger Fehler ist, ein 4000x3000-Pixel-Foto hochzuladen, wenn es nur mit 800x600 Pixeln angezeigt wird. Der Browser lädt trotzdem das vollständige Bild herunter und skaliert es dann herunter. Passen Sie Bilder immer an ihre Anzeigegrößen an und verwenden Sie responsive Techniken wie das srcset-Attribut.
Komprimierungsqualitätseinstellungen erfordern eine Balance zwischen Dateigröße und visueller Qualität. Für JPEG bietet eine Qualitätseinstellung zwischen 75 und 85 von 100 typischerweise das beste Gleichgewicht — unter 70 werden Komprimierungsartefakte sichtbar, während über 85 die Dateigröße erheblich zunimmt bei minimaler visueller Verbesserung. Für WebP liefern Einstellungen zwischen 75 und 80 ausgezeichnete Ergebnisse.
Über Format und Qualität hinaus ist das Entfernen von Metadaten ein einfacher Gewinn. Digitalkameras betten EXIF-Daten ein — Kameramodell, GPS-Koordinaten, Datum — die jedem Bild Kilobytes hinzufügen. Für das Web haben diese Metadaten keinen Nutzen.
Lazy Loading ist eine ergänzende Technik, die das Laden von Bildern außerhalb des Bildschirms aufschiebt. Moderne Browser unterstützen natives Lazy Loading über das Attribut loading="lazy".
Content Delivery Networks verstärken die Vorteile, indem sie Bilder von geografisch nahegelegenen Servern ausliefern. Viele CDNs bieten auch automatische Bildoptimierung.
Unser Bildkomprimierungs-Tool ermöglicht schnelle Optimierung für das Web. Laden Sie Ihr Bild hoch, wählen Sie Format und Qualitätsstufe, und laden Sie das optimierte Ergebnis herunter. In den meisten Fällen können Sie Dateigrößenreduzierungen von 60 bis 80 Prozent ohne sichtbaren Qualitätsverlust erwarten.