Bildkomprimierung: Kleinere Dateien ohne Qualitätsverlust
Erfahren Sie, wie Sie Bilder fürs Web komprimieren, ohne sichtbare Qualitätsverluste. Mit Erklärungen zu JPEG, PNG, WebP und den Tools, die es mühelos machen.
Ein einzelnes unkomprimiertes Foto eines modernen Smartphones kann 10–25 MB groß sein. Im Web bedeutet das langsame Seitenladezeiten, frustrierte Nutzer und schlechtere Suchrankings. Bildkomprimierung löst dieses Problem – aber nicht jede Komprimierung ist gleich. Hier ist, was Sie wissen müssen.
Verlustbehaftete vs. verlustfreie Komprimierung
Verlustbehaftete Komprimierung entfernt dauerhaft Daten, um die Datei zu verkleinern. JPEG ist das klassische Beispiel. Eine Qualitätseinstellung von 80–85 % erzeugt typischerweise eine Datei, die 60–70 % kleiner als das Original ist, ohne sichtbaren Unterschied für das menschliche Auge.
Verlustfreie Komprimierung reorganisiert Daten, ohne sie zu verwerfen. PNG und WebP (verlustfreier Modus) bewahren jeden Pixel. Nützlich für Screenshots, Logos und alles mit Text oder scharfen Kanten, bei denen Artefakte auffallen würden.
Das richtige Format wählen
| Format | Am besten für | Komprimierung |
|---|---|---|
| JPEG | Fotos, komplexe Bilder | Verlustbehaftet, sehr klein |
| PNG | Logos, Screenshots, Transparenz | Verlustfrei, größer |
| WebP | Alles | Verlustbehaftet oder verlustfrei, ~30 % kleiner als JPEG/PNG |
| AVIF | Moderne Browser | Beste Komprimierung, langsamere Kodierung |
Die praktische Faustregel: Fotos in WebP konvertieren. PNG nur verwenden, wenn Transparenz oder pixelgenaues Rendering erforderlich ist. JPEG bei Bildern mit Text oder scharfer Geometrie vermeiden.
Welche Qualitätseinstellung sollten Sie verwenden?
Für JPEG und verlustbehaftetes WebP ist eine Qualität zwischen 75–85 % der optimale Bereich für die meisten Web-Bilder:
- Qualität 90–100 % — Nahezu identisch mit dem Original, minimale Einsparungen
- Qualität 75–85 % — 50–70 % kleiner, kaum wahrnehmbarer Unterschied auf dem Bildschirm
- Qualität 60–74 % — Merkliche Artefakte bei genauem Hinsehen, für Vorschaubilder akzeptabel
- Qualität unter 60 % — Sichtbare Blockierungen und Banding, für primäre Inhalte vermeiden
Progressives Laden
JPEG unterstützt progressive Kodierung – das Bild lädt zunächst in niedriger Auflösung und wird schärfer, sobald mehr Daten eintreffen. Das lässt Seiten schneller wirken, noch bevor das vollständige Bild heruntergeladen ist. Die meisten Komprimierungstools bieten dies als Option an.
Responsive Bilder sind ebenfalls wichtig
Komprimierung allein reicht nicht aus, wenn Sie ein 2000 px breites Bild an ein Mobiltelefon mit einem 400-px-Bildschirm ausliefern. Verwenden Sie die HTML-Attribute srcset und sizes, um passend dimensionierte Bilder bereitzustellen:
<img
src="hero-800.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Hero image"
/>
Diese einzelne Änderung kann die Bildgröße auf Mobilgeräten um 70 % oder mehr reduzieren.
Arbeitsablauf zur Stapelkomprimierung
Wenn Sie viele Bilder komprimieren müssen:
- Alle JPEGs und PNGs zunächst in WebP konvertieren
- 80 % Qualität für Fotos anwenden, verlustfrei für UI-Assets
- Metadaten entfernen (EXIF-Daten fügen jedem Foto 20–100 KB hinzu)
- In den richtigen Anzeigedimensionen neu generieren – niemals darauf verlassen, dass CSS große Bilder verkleinert
Vorher und nachher: echte Zahlen
Ein typischer Workflow für ein Hero-Bild:
- Original JPEG: 4,2 MB (Kameraausgabe)
- Nach Größenänderung auf 1600 px Breite: 1,8 MB
- Nach Komprimierung bei Q80: 320 KB
- Nach Konvertierung zu WebP Q80: 210 KB
Das entspricht einer 95%igen Reduzierung der Dateigröße ohne sichtbaren Qualitätsunterschied auf dem Bildschirm.
Tools
Unser Image Compressor läuft vollständig in Ihrem Browser – kein Upload, kein Konto, kein Größenlimit pro Bild. Ziehen Sie eine Datei hinein und laden Sie das Ergebnis in Sekunden herunter.
Für die Formatkonvertierung übernimmt der Image Format Converter PNG-, JPEG- und WebP-Konvertierungen in einem Schritt. Und PNG to WebP ist der schnellste Weg, wenn Sie bereits wissen, was Sie benötigen.
Zusammenfassung
Bildkomprimierung ist eine der wirkungsvollsten Leistungsoptimierungen, die verfügbar sind. Wechseln Sie zu WebP, verwenden Sie für Fotos eine Qualität von 75–85 %, entfernen Sie Metadaten und liefern Sie Bilder in den richtigen Abmessungen aus. Die meisten Websites können die gesamte Bildlast mit einem halben Tag Arbeit um 60–80 % reduzieren.