Was ist Bildkomprimierung?
Jedes Foto, das aus einer Kamera oder einem Smartphone kommt, ist für den Web-Einsatz hoffnungslos überdimensioniert. Eine moderne Spiegelreflex liefert 24-Megapixel-Bilder mit 8 MB oder mehr. Ein aktuelles iPhone schießt HEIC-Fotos mit 3 bis 5 MB. Kein Browser braucht diese Datenmenge, um ein Bild in einer Hero-Sektion darzustellen — und kein Nutzer will sie laden.
Bildkomprimierung reduziert die Dateigröße auf ein vernünftiges Maß — ohne dass der Unterschied zum Original sichtbar ist. Das passiert auf zwei Wegen: Einmal durch Änderung der Dimensionen (ein 6000 Pixel breites Bild für einen 1200 Pixel breiten Container ist Verschwendung) und einmal durch die eigentliche Kompression, also das Zusammenfassen visuell ähnlicher Pixel.
Das Ergebnis macht bei Ladezeit und Core Web Vitals den größten einzelnen Unterschied. In den meisten Performance-Audits ist unkomprimiertes Bildmaterial die Hauptursache für einen schlechten LCP. Bei Websites, die ich gesehen habe, war das Bildmaterial oft 70 bis 90 Prozent der gesamten Seitenlast.
Wie funktioniert Bildkomprimierung?
Es gibt zwei grundlegende Ansätze:
Lossy (verlustbehaftet) — Das Komprimierungs-Tool wirft visuell unwichtige Informationen weg und speichert nur das, was das menschliche Auge wirklich wahrnimmt. Fließende Farbverläufe werden vereinfacht, Farbnuancen zusammengefasst. Bei moderater Kompression ist das Ergebnis nicht von Original zu unterscheiden. Bei extremer Kompression siehst du Artefakte — blockige Kanten, Farbflächen, Schärfe-Verluste. Typisch für Fotos: JPEG, WebP, AVIF.
Lossless (verlustfrei) — Kein einziges Pixel wird verändert. Das Tool findet nur bessere Wege, dieselben Daten kompakter zu speichern. Weniger Ersparnis als bei lossy, aber absolute Pixelgenauigkeit. Typisch für Logos, Icons, Screenshots: PNG, WebP lossless.
Für die meisten Website-Bilder ist lossy WebP oder AVIF der Sweet Spot. Die Formate liefern deutlich bessere Kompression als JPEG bei gleicher visueller Qualität.
Format-Vergleich
| Format | Typ | Vorteile | Nachteile | Beste Verwendung |
|---|---|---|---|---|
| JPEG | lossy | Universell, klein bei Fotos | Älter, schlechter als WebP | Fallback, ältere Systeme |
| PNG | lossless | Transparenz, pixelgenau | Groß bei Fotos | Logos, Icons, Screenshots |
| WebP | lossy + lossless | 25-35 % kleiner als JPEG, weite Browser-Unterstützung | Bei sehr alten Browsern nicht unterstützt | Standard für alle Bild-Typen |
| AVIF | lossy + lossless | 50 % kleiner als JPEG, beste Qualität | Langsamerer Encoder, etwas neuere Browser | Hero-Bilder, Produktfotos |
| SVG | vektorbasiert | Unendlich skalierbar, winzig | Nur für Vektorgrafiken | Logos, Icons, Illustrationen |
In der Praxis: Exportiere Bilder als AVIF mit JPEG-Fallback oder als WebP mit JPEG-Fallback. Für Logos und UI-Elemente nimm SVG. Für Screenshots PNG.
Warum ist Bildkomprimierung für deine Website wichtig?
Der direkte Effekt: kürzere Ladezeiten, besserer LCP, bessere Google-Rankings, weniger Abbrüche auf mobilen Verbindungen. Der indirekte Effekt: niedrigere Hosting-Kosten, weniger Traffic, besseres Nutzererlebnis.
Reales Beispiel aus einem echten Projekt: Ein Restaurant-Portfolio mit 32 Gerichtefotos, jedes direkt aus der Kamera geladen. Gesamte Bildlast: 112 MB. Nach Resizing auf 1600 Pixel maximale Breite und WebP-Konvertierung mit 82 % Qualität: 4,8 MB. Bounce Rate fiel von 68 Prozent auf 41 Prozent. Keine einzige Designänderung.
Oder: Ein Handwerksbetrieb mit einem 6 MB großen Hero-Bild. LCP bei 5,2 Sekunden. Nach Komprimierung auf 220 KB und AVIF-Export: LCP bei 1,8 Sekunden. Der Unterschied im PageSpeed-Score: von 34 auf 92.
Tools für die Bildkomprimierung
- Squoosh (squoosh.app) — Googles freies Browser-Tool, beste Kontrolle über Qualität und Format, perfekt für Einzelbilder.
- TinyPNG (tinypng.com) — der Klassiker für PNG- und JPEG-Kompression per Drag-and-drop. Einfacher geht es nicht, Ergebnisse sind solide, für Logos und Screenshots oft schon genug.
- ImageMagick — das Schweizer Taschenmesser der Kommandozeile. Ein Einzeiler wie
magick hero.jpg -resize 1600x -quality 82 hero.webpersetzt zehn GUI-Klicks und lässt sich in jedes Build-Script stecken. Läuft auf Mac, Linux und Windows. - ShortPixel / Imagify — WordPress-Plugins, die alle neu hochgeladenen Bilder automatisch komprimieren und in WebP oder AVIF konvertieren.
- Sharp (Node.js) — Für Build-Pipelines und automatisierte Workflows.
- cwebp, avifenc — Kommandozeile, perfekt für Batch-Jobs.
- ImageOptim (Mac) — Drag-and-drop-Komprimierung für PNG und JPEG.
Wichtig bei WordPress: Mindestens ein Kompressions-Plugin aktivieren und in den Media-Settings die Originaldateien nicht unbegrenzt groß erlauben. Standard sollte sein, dass ein hochgeladenes Bild automatisch auf maximal 2560 Pixel Breite reduziert wird.
Häufige Fehler bei der Bildkomprimierung
Alles mit derselben Qualität exportieren. Ein Hero-Bild braucht vielleicht 82 % Qualität, eine Icon-Sammlung 65 %, ein Logo muss SVG sein. Pauschale "90 % JPEG überall" verschwendet Bytes.
Zu große Dimensionen hochladen. Ein Bild, das auf der Seite maximal 800 Pixel breit angezeigt wird, als 4000 Pixel breites Original hochzuladen, ist sinnlos. Vor dem Upload resizen.
Nur ein Format liefern. Moderne Browser lieben AVIF, ältere brauchen JPEG. Lösung:
width und height im HTML vergessen. Sonst droht ein Sprung im Layout — siehe CLS.
Plugins übereinander. Zwei Kompressions-Plugins gleichzeitig aktivieren und wundern, warum Bilder kaputtgehen. Eines reicht.