Kompression für das Web – WebP und AVIF in der Praxis

Deine Bilder machen Deine Webseite zur Schnecke?

Moderne Bild-Kompressionen sind die Lösung!

Hier ist der Guide und Wissen zum richtigen Komprimieren.

Starten wir!

Warum brauchen wir eine Bild-Kompression?

• Ladezeiten & Performance: Kaum einer mag langsame Webseiten. Wir haben so wenig Lebenszeit übrig, die wir nicht mit dem Warten von Bildern über das Netzwerk verbringen wollen. Nutzer wählen Webseiten aus, welche zackig laden und Bilder in guter Qualität darstellen können.
• Ressourcen sparen: Viele Nutzer haben nur eine DSL-Verbindung auf prähistorischen Kupferkabeln oder beschränktes Mobilfunknetz, welches die Übertragung der Bits massiv einschränkt. Potente Geräte mit Milliarden an Transistoren warten auf die Bits, die über die Leitung kriechen. Heutzutage sind die Endgeräte so gut, dass die Internetanbindung für diese eine Beleidigung ist.
• Einfaches Archiv: Bilder sind Erinnerung und speichern wichtige Informationen, welche wie effizient speichern wollen. Komprimierte Bilder erlauben, dass wir mehr Bilder in den gleichen Speicher speichern können.

• CPU-Optimierung: Das Herunterladen von Bildern (und Videos) ist eine Standardaufgabe von unseren internetfähigen Geräten, welche wir tagtäglich 100-fach durchführen. Die zentrale Recheneinheit (CPU) hat eine spezielle Recheneinheit, welche genau für diese Aufgabe optimiert ist (FPGA).
• Ermöglichung von Technologie: Auf unseren Ausweisen in Deutschland und den internationalen Reisepässen sind in kleinen Speichern ein Bild des Kopfes und Fingerabdrücke gespeichert, welche nur mit einem sparsamen Format (JPEG-2000) speicherbar sind.

Kompressionen haben auch Nachteile:

• Unterstützung: Kompressionen sind schön, wenn sie jeder beherrschen kann. Alte Browser, Computer oder Anwendungen kommen mit neuartigen Kompressionen / Dateiformaten nicht klar.
• Aufwendig und CPU-lastig: Das Komprimieren von Bildern ist aufwendig. Die CPU oder GPU muss die Kompression 1x berechnen und auf dem Zielcomputer wieder entpacken. Der Computer speichert nicht jede Bildinformation (Pixel) einfach, sondern gruppiert diese, um Wiederholungen zu vermeiden.
• Datenverlust: Kleine Farbunterschiede oder Rauschpartikel in den rohen Dateiformaten verschwinden bei aggressiven Kompressionen. Moderne Formate können (nahezu) detailverlustfrei arbeiten und erhalten viele Informationen.

Bitte kleiner! Kompressionsformate einfach erklärt

Standard für Kameras – JPEG

JPEG ist eines der ältesten und bekanntesten Bildformate im Internet. Es wurde in den frühen 1990er Jahren entwickelt, um Fotos effizient zu speichern und die Dateigröße zu reduzieren. Es verwendet sogenannte verlustbehaftete Komprimierung. Das bedeutet: Beim Speichern gehen Bildinformationen verloren, die das menschliche Auge oft nicht wahrnimmt.

Vorteile:

• Sehr kleine Dateigrößen im Vergleich zu verlustfreien Formaten.
• Wird von nahezu allen Geräten und Programmen unterstützt.
• Ideal für digitale Fotos, da es Farbverläufe gut wiedergibt.

Nachteile:

• Qualitätsverlust bei jeder erneuten Speicherung.
• Keine Transparenz möglich.
• Nicht ideal für Bilder mit Text, scharfen Kanten oder wenigen Farben.

Moderner mit Transparenz – PNG

PNG wurde als freier Ersatz für das ältere GIF-Format entwickelt. Es verwendet verlustfreie Komprimierung, das heißt: Beim Speichern bleiben alle Bildinformationen vollständig erhalten. Das Format eignet sich besonders gut für Bilder mit Transparenz oder klaren Linien, wie Logos oder Icons.

Vorteile:

• Hohe Bildqualität ohne Qualitätsverlust.
• Unterstützt Transparenz (mit Alphakanal).
• Ideal für Bilder mit Text, Logos, Diagramme und Icons.

Nachteile:

• Große Dateigröße, besonders bei Fotos.
• Keine Animationen (außer beim Sonderformat APNG).
• Nicht geeignet für sehr große Fotogalerien auf Webseiten (wegen Ladezeit).

Erste Revoulution – Was ist WebP?

WebP ist ein modernes Bildformat, das von Google entwickelt wurde, um die Dateigröße noch weiter zu reduzieren – bei gleichzeitig guter Bildqualität. WebP kann sowohl verlustbehaftet als auch verlustfrei speichern und unterstützt sogar Animationen und Transparenz.

Vorteile:

• Kleinere Dateien als JPEG und PNG bei vergleichbarer Qualität.
• Unterstützt Transparenz (wie PNG).
• Unterstützt Animationen (wie GIF).
• Perfekt für den Einsatz im Web, da Seiten schneller laden.

Nachteile:

• Noch nicht von allen Programmen und älteren Browsern vollständig unterstützt (z. B. Internet Explorer).
• Komplexere Kodierung als bei JPEG oder PNG.

Zweite Revolution – Was ist Avif?

AVIF ist das neueste der hier genannten Formate. Es basiert auf dem modernen Videocodec AV1 und bietet eine extrem effiziente Komprimierung bei sehr hoher Bildqualität. Es ist für die Nutzung im Internet optimiert und kann sowohl verlustbehaftet als auch verlustfrei arbeiten.

Vorteile:

• Sehr kleine Dateigrößen bei hoher Bildqualität – besser als WebP oder JPEG.
• Unterstützt Transparenz und Animationen.
• Ideal für Websites, bei denen Geschwindigkeit und Qualität wichtig sind.

Nachteile:

• Noch nicht überall unterstützt (ältere Software oder Browser tun sich schwer).
• Langsame Kodierung beim Speichern (braucht mehr Rechenleistung).
• Tools zur Bearbeitung und Konvertierung sind noch im Aufbau.

Pradox of Choice – Was soll ich nehmen?

Im Web ist Avif das Format, welches am stärksten ohne große Verluste kompremiert und ist für die modernen Prozessoren mit AV1 optimiert. Wenn Avif nicht geht, verwende WebP. PNG ist die Notlösung, weil JPEG keine Transparenz unterstützt.

Format	Qualität	Dateigröße	Transparenz	Animation	Browser-Unterstützung	Ideal für
JPEG	Gut (mit Verlust)	Klein	❌ Nein	❌ Nein	✅ Fast alle	Fotos
PNG	Sehr gut (verlustfrei)	Groß	✅ Ja	❌ Nein	✅ Alle	Logos, Grafiken mit Text/Transparenz
WebP	Gut bis sehr gut	Klein	✅ Ja	✅ Ja	✅ Die meisten (Chrome, Firefox, Edge, Safari)	Webbilder aller Art
AVIF	Sehr gut	Sehr klein	✅ Ja	✅ Ja	🟡 Viele, aber noch nicht alle	Hochkomprimierte Bilder mit Qualität

Praxis JETZT – Nutzung in WordPress

Meistens sind die Ausgangsformate eine PNG oder JPEG, wenn Du einen Screenshot erstellst, ein Foto schießt oder ein Bild im Internet findest.

1. Diese Bilder kannst Du im ersten Schritt normal in WordPress hochladen und in Deinen Artikel oder Design einfügen.
2. Gehe zur „Plugin Übersicht“
3. Wähle aus „Neues Plugin hinzufügen“
4. Suche nach „WebP Express“ und installiere die Anwendung. Nach einiger Zeit sollte sich der Button zu einem „Aktivieren“ Button geändert haben. Aktiviere das Plugin.
5. Gehe in die „Einstellungen“ und dann auf „WebP Express“

1. Der Abschnitt „Conversion Method“ sollte mindestens einen grünen Haken zeigen. Nicht jeder Server unterstützt alle Konvertierungsmethoden.

1. Wenn Du sofort konvertieren willst, kannst Du auf „Bulk Convert“ klicken. Je nachdem wie viele Bilder Du bereits verwendest, kann dieser Schritt länger dauern. Alternativ konvertiert die Anwendung das Bild beim ersten Laden eines Nutzers. Wenn das Bild einmal konvertiert ist, erhalten alle folgenden Besucher das WebP-Bildformat.
2. Unter „Alter HTML“ wähle „Replace Image URLS“ in Kombination mit „Use content filtering hooks (the_content, the_excerpt, etc)“ aus. Mit dieser Einstellung schafft diese Webseite eine Pagespeed 100 für mobile Endgeräte. Für die besten Webseitengeschwindigkeiten gibt es nicht das Rezept für alle, sondern jeder muss an viele Schrauben drehen, um die hohe Webseiten-Performance zu erhalten. Hier ist der volle Guide.

1. Rufe eine Website / Blog-Eintrag auf und drücke F12. Mit dem Inspection-Tool kannst Du prüfen, ob die Bilder mit „.png.webp“ als Dateiformat enden. Je nach Displaygröße lädt WordPress eine passende WebP-Datei aus.

Tipps für Sicherheit von Kompressionsformaten

Kriminelle schrecken von Kompressionen nicht zurück und haben in der Vergangenheit Kompressionsalgorithmen ausgetrickst, sodass diese schadhaften Code einführen konnten. Das heißt nicht, dass wir Kompressionen meiden sollten, sondern bei Schwachstellen rechtzeitig patchen. Entweder müssen wir das Plugin, WordPress oder den Browser patchen.