Bilder komprimieren und in WebP umwandeln

Was ist Bildkompression und warum ist sie für die Website-Geschwindigkeit wichtig

Bildkompression ist ein Verfahren, mit dem die Dateigröße reduziert wird, während das Auge das Bild weiterhin so sieht, wie es sein soll. Es gibt zwei Arten: verlustfrei (lossless), bei der die Daten nur intelligenter gepackt werden, und verlustbehaftet (lossy), bei der Details entfernt werden, die das menschliche Auge am schwersten wahrnimmt. Für Fotos auf der Website ist fast immer die verlustbehaftete Kompression besser, da sich eine um ein Vielfaches kleinere Datei ergibt, mit einem Unterschied, den kaum jemand bemerkt.

Ein großes Bild ist der häufigste Grund für eine langsame Website. Ein Hero-Bild von 4 MB kann die Anzeige des Inhalts um mehrere Sekunden verzögern, besonders bei mobilem Internet. Google misst dies über die Core Web Vitals, vor allem über den LCP (Largest Contentful Paint), und dieser Wert beeinflusst sowohl die Position in der Suche als auch die Frage, ob ein Besucher überhaupt wartet, bis er die Seite sieht.

Kompressionswerkzeuge arbeiten auf zwei Wegen: Sie reduzieren die Bildabmessungen (Breite und Höhe in Pixeln) und sie reduzieren die Qualität der Aufzeichnung. Beides ist erforderlich. Ein Bild mit 4000 px Breite, das bei 800 px angezeigt wird, ist reiner Verlust, egal wie gut es komprimiert wurde.

Wie Sie Bilder für die Website ohne Qualitätsverlust komprimieren

Das Vorgehen ist einfach und erfordert keine Kenntnis der Werkzeuge:

1. Wählen Sie eine Breite, die der Stelle entspricht, an der das Bild angezeigt wird. Für große Bannerbilder bis 1920 px, für Bilder im Text 800 bis 1200 px, für Vorschaubilder 300 bis 600 px.
2. Stellen Sie die Qualität auf etwa 80 Prozent ein. Das ist der Punkt, an dem die Einsparung groß ist und der Unterschied nicht sichtbar wird.
3. Wählen Sie das Format: WebP für breite Unterstützung, AVIF, wenn Sie die kleinste Datei wünschen.
4. Laden Sie die Datei herunter und vergleichen Sie sie bei 100 Prozent Zoom mit dem Original, besonders an Stellen mit Text und scharfen Kanten.

Ein praktischer Tipp: Wenn das Bild viel Text, dünne Linien oder ein Logo enthält, reduzieren Sie die Qualität vorsichtiger oder verwenden Sie verlustfreie Kompression. Fotos mit natürlichen Details vertragen eine aggressivere Kompression ohne sichtbare Artefakte.

WebP oder AVIF: Welches Format Sie wählen sollten

WebP ist heute die sichere Wahl. Alle modernen Browser unterstützen es, es ist bei gleicher visueller Qualität kleiner als JPEG und unterstützt Transparenz. AVIF geht einen Schritt weiter und liefert oft eine noch kleinere Datei, kann aber auf manchen älteren Geräten und Browsern nicht angezeigt werden oder langsamer dekodiert werden.

Praktische Regel: Verwenden Sie WebP als Basisformat und AVIF dort, wo die kleinste Seitengröße Priorität hat und wo Sie einen Fallback haben. Wenn Sie nicht über Kompatibilität nachdenken möchten, ist WebP für die große Mehrheit der Websites ausreichend.

Experten-Tipp: Konvertieren Sie ein bereits komprimiertes WebP nicht in AVIF und wieder zurück. Jede neue Konvertierung mit Qualitätsverlust fügt Artefakte hinzu. Gehen Sie immer vom Original oder von der qualitativ besten gespeicherten Datei aus.

Die häufigsten Fehler bei der Bildkompression

• Qualität reduzieren, bevor die Abmessungen reduziert werden. Skalieren Sie das Bild zuerst auf die benötigte Breite und komprimieren Sie es dann. Die umgekehrte Reihenfolge liefert ein schlechteres Ergebnis.
• Gleiche Qualität für alle Bilder. Porträts und Produkte benötigen mehr Details als Hintergrundbilder und Illustrationen.
• Vergessenes srcset. Ein großes Bild für alle Bildschirme ist ein Fehlgriff. Bieten Sie mehrere Breiten an und lassen Sie den Browser auswählen.
• Kompression von Logos im verlustbehafteten Format. Für Grafiken mit scharfen Kanten ist SVG oder PNG besser.
• Vernachlässigung von Cache und CDN. Die beste Kompression hilft nicht, wenn das Bild bei jedem Öffnen der Seite erneut heruntergeladen wird.

Experten-Tipp: Prüfen Sie das Ergebnis mit einem Werkzeug zur Leistungsmessung, nicht nur mit dem Auge. Manchmal sieht das Bild gut aus, ist aber dennoch schwer, weil die Abmessung zu groß geblieben ist.

Wenn Sie Hunderte oder Tausende von Bildern haben, wird die manuelle Kompression mühsam. Dann hilft die Automatisierung im Rahmen des Build-Prozesses oder des CMS, und EVI Solutions kann helfen, wenn das Problem größer ist als ein einzelnes Werkzeug.