Was ist WebP – kurz erklärt

WebP ist ein modernes Bildformat, entwickelt von Google. Ziel: Kleinere Dateien bei gleicher oder besserer Bildqualität im Vergleich zu JPG oder PNG.

Was kann WebP?

• Fotos komprimieren (wie JPG)
• Transparenz darstellen (wie PNG)
• Animationen anzeigen (wie GIF)
• verlustfrei oder verlustbehaftet speichern

Es vereint also mehrere alte Formate in einem.

Warum ist WebP sinnvoll?

Beispiel: Ein JPG mit 1 MB → als WebP oft nur 600–700 KB
Ersparnis: ca. 25–40 %
Qualität: im Web meist kein sichtbarer Unterschied.

Vorteile

✔ kleinere Dateien
✔ schnellere Ladezeit
✔ bessere Google-Bewertung (PageSpeed)
✔ moderne Browser unterstützen es vollständig
    gleiche Bildqualität + weniger Speicher + schnellere Website

Nachteile

• Sehr alte Browser können es nicht anzeigen
• Manche Bildbearbeitungsprogramme speichern es nicht direkt
• Man muss es bewusst einsetzen (es passiert nicht automatisch)

🧠 Für deine Joomla-Website

Wenn du mit Joomla 6 arbeitest, dann ist WebP ideal für:

• Beitragsbilder
• Headerbilder
• Projektfotos

Nicht zwingend nötig für:

• SVG-Logos
• sehr kleine Icons

Was ist AVIF – ganz kurz

AVIF ist ein modernes Bildformat, das auf dem AV1-Video-Codec basiert.

Vorteil

• Noch kleinere Dateien als JPG und meist auch kleiner als WebP
• Sehr gute Bildqualität trotz starker Kompression
• Unterstützt Transparenz und HDR

Beispiel:
1 MB JPG → oft 400–600 KB als AVIF - (also 40–60 % kleiner)

Nachteil

• Erzeugung braucht mehr Rechenleistung
• Nicht jedes alte Gerät unterstützt es
• Etwas langsamer beim Kodieren

Erscheinungsjahr: ca. 2019 / Basis: moderner AV1-Video-Codec

Eigenschaften

• Noch stärkere Kompression als WebP
• Sehr gute Detailerhaltung
• Unterstützt Transparenz
• Unterstützt HDR
• Technisch moderner

Typische Einsparung

Gegenüber JPG:
→ 40–60 % kleiner
Gegenüber WebP:
→ 10–20 % kleiner

Wann ist JPG trotzdem besser?

1️⃣ Maximale Kompatibilität nötig

Wenn Besucher sehr alte Geräte oder Firmen-PCs nutzen. JPG funktioniert überall – auch bei uralten Systemen.

2️⃣ Bild wird weiterbearbeitet

WebP und AVIF sind weniger geeignet für:

• Druck
• spätere Nachbearbeitung
• Archivierung

Dafür besser:
Original als JPG oder PNG speichern.

3️⃣ Sehr geringe Kompression gewünscht

Wenn du ein Bild mit 95–100 % Qualität speicherst, ist der Unterschied zwischen JPG und WebP minimal. Dann lohnt der Umstieg kaum.

4️⃣ Server ist schwach

AVIF-Erzeugung kann CPU-intensiv sein. Auf sehr kleinen Hosting-Paketen kann das bremsen.

TEIL 1 - WebP automatisch erzeugen

Wichtig:
Joomla selbst erzeugt keine WebP-Dateien automatisch. Du brauchst ein Plugin oder Server-Unterstützung.

Möglichkeit A – Mit Erweiterung (empfohlen)

Beispiel: JCH Optimize URL: https://www.jch-optimize.net

Schritt-für-Schritt

1️⃣ Installation

Backend öffnen: https://joomla6.rneuhoff.de/administrator, dann:

• System → Erweiterungen → Installieren
• ZIP hochladen
• Installieren

2️⃣ WebP aktivieren

Komponenten → JCH Optimize → Einstellungen

Aktivieren:

✔ Bilder optimieren
✔ WebP erzeugen
✔ WebP ausliefern, wenn Browser unterstützt

Speichern.

3️⃣ Cache leeren

System → Wartung → Cache leeren

Was passiert jetzt?

Beispiel: Original: 1,2 MB JPG
Automatisch erzeugt: 450 KB WebP, Ersparnis: ~60–70 %

Qualität:
Bei moderater Einstellung kaum sichtbar schlechter.

Möglichkeit B – Serverlösung (wenn Hoster es anbietet)

Manche Hoster erzeugen WebP automatisch per Apache/Nginx.

Vorteil:
Kein Joomla-Plugin nötig.

Nachteil:
Wenig Kontrolle.

 TEIL 2 – Lazy Loading kontrollieren

Seit Joomla 4/5 ist Lazy Loading standardmäßig aktiv. In Joomla 6 ebenfalls. Das bedeutet: Bilder bekommen automatisch: loading="lazy" 

Wann ist das gut?

✔ Bei langen Seiten
✔ Bei Blogartikeln
✔ Bei vielen Bildern

Spart Ladezeit.

Wann ist das schlecht?

Beim Hero-Bild oben auf der Startseite. Das sollte sofort laden.

Lazy Loading gezielt deaktivieren (Hero-Bild)

Möglichkeit 1 – Im Template

Wenn du mit Helix Ultimate arbeitest:
Im Custom HTML Modul: Bild manuell einfügen:
<img src="bild.webp" loading="eager" data-alt="Beschreibung"> 

„eager“ bedeutet: Sofort laden.

Möglichkeit 2 – Per CSS/JS (fortgeschritten)

Kann man über Template-Override steuern, ist aber für dich nicht nötig.

Wichtige Kontrolle

Nach Aktivierung prüfen mit:
Browser → Rechtsklick → Untersuchen → Bild markieren

Du solltest sehen:
type="image/webp"
loading="lazy"
Dann funktioniert es.

Empfohlene Grundeinstellung für dich

✔ Bilder vorher mit Squoosh verkleinern
✔ JCH Optimize für WebP aktivieren
✔ Lazy Loading aktiviert lassen
✔ Nur Hero-Bild auf eager setzen

Realistische Verbesserung (merkt man deutlich)

Vorher: Seite 10–15 MB
Nacher: Nach Optimierung: 2–4 MB