bildkompression

Bildkompression (JPEG, PNG, WebP)

Kurz: Bildkompression verkleinert Bilddateien, entweder ohne Verlust (verlustfrei) oder indem unwichtige Details weggelassen werden (verlustbehaftet).

Genauer: Bilder machen auf vielen Webseiten den größten Teil der übertragenen Daten aus. Kleinere Bilder laden schneller, schonen mobiles Datenvolumen und verbessern Messwerte wie den Largest Contentful Paint (LCP), den auch Suchmaschinen berücksichtigen.

Im Detail

Verlustfrei oder verlustbehaftet

Verlustfreie Verfahren (PNG, verlustfreies WebP) ändern keinen einzigen Pixel; beim Öffnen erhält man exakt das Original zurück. Verlustbehaftete (JPEG, WebP, AVIF) nutzen aus, dass das Auge feine Farbunterschiede und hohe Frequenzen kaum bemerkt, und lassen sie weg. Dafür sinkt die Größe oft auf ein Zehntel, aber jedes erneute Speichern in diesem Format verschlechtert die Qualität weiter.

Welches Format wofür?

Format	Stärke	Transparenz	Typischer Einsatz
[[jpeg	JPEG]]	Fotos, sehr verbreitet	nein
PNG	verlustfrei, scharfe Kanten	ja	Logos, Screenshots, Grafiken
[[webp	WebP]]	klein, beides möglich	ja
AVIF	noch kleiner	ja	moderne Browser, hohe Ersparnis
SVG	Vektor, beliebig skalierbar	ja	Icons, Logos, Diagramme

Stellschrauben

• Abmessungen: Das größte Sparpotenzial. Ein 4000-Pixel-Foto in einer 800 Pixel breiten Spalte lädt rund 25-mal mehr Pixel als nötig. Vor dem Hochladen auf die benötigte Breite verkleinern (und für Retina-Bildschirme das Doppelte vorhalten).
• Qualität: Bei JPEG und WebP sind 75 bis 85 Prozent meist visuell nicht von 100 Prozent zu unterscheiden, die Datei ist aber deutlich kleiner.
• Metadaten entfernen: Kamera-Angaben (EXIF) und Standort kosten Platz und können private Daten verraten.

Im Browser komprimieren

Ein Bild lässt sich ohne Upload im Browser verkleinern: auf eine Zeichenfläche (Canvas) in neuer Größe zeichnen und mit gewählter Qualität als WebP oder JPEG exportieren. Das Bild verlässt das Gerät nie, was für private Fotos wichtig ist.

Im Web richtig einbinden

Mit loading="lazy" laden Bilder erst beim Scrollen; mit width und height reserviert der Browser den Platz und die Seite „springt“ nicht; mit srcset liefert man kleine Bilder für kleine Bildschirme. Frameworks wie Next.js übernehmen vieles davon mit der Komponente <Image> automatisch.

Siehe auch: JPEG, WebP, Base64, Komprimieren