Bildoptimierung in Joomla 6 -
Fünf konkrete, praktikable Beispiele zur
Beispiel 1: Automatische WebP-Konvertierung mit DC jWEBP (kostenlos)
Ziel: JPG- und PNG-Bilder automatisch in das moderne WebP-Format konvertieren – ohne manuellen Aufwand und ohne Änderungen an Datenbank oder Templates .
Geeignet für: Einsteiger, kleine Websites, Testumgebungen – komplett kostenlos.
Plugin-Name: DC jWEBP
Plugin-Typ: Systemplugin (kostenlos)
Joomla-Kompatibilität: Joomla 5 und 6 (native Unterstützung)
Download-Link (JED): https://extensions.joomla.org/extension/dc-jwebp/
Schritt-für-Schritt-Anleitung:
- Plugin herunterladen und installieren:
- Gehe zu System → Installieren → Erweiterungen (im Bereich "Verwalten").
- Lade die heruntergeladene ZIP-Datei über "Paketdatei hochladen" hoch.
- Plugin aktivieren:
- Gehe zu System → Plugins (im Bereich "Verwalten").
- Gib im Suchfilter den Begriff "DC jWEBP" ein.
- Klicke auf den Plugin-Titel und setze den Status auf Aktiviert (grüner Haken).
- Konfiguration (optional anpassen):
- Im gleichen Bearbeitungsfenster findest du die Einstellungen :
- WebP-Qualität: Standard 80 (Wert zwischen 0-100)
- Lazy Loading aktivieren: Sollte aktiviert bleiben (fügt loading="lazy" hinzu)
- Ausgeschlossene Ordner: Hier kannst du Ordner angeben, die nicht konvertiert werden sollen (z.B. /images/banner)
- Im gleichen Bearbeitungsfenster findest du die Einstellungen :
- Fertig! Das Plugin arbeitet vollautomatisch. Es konvertiert Bilder beim ersten Aufruf und ersetzt die Bildpfade direkt im generierten HTML .
So testest du es:
Öffne deine Website im Browser, öffne die Entwicklertools (F12) und gehe zum Reiter "Netzwerk". Lade die Seite neu und suche nach Bildern mit der Endung .webp. Du wirst feststellen, dass JPG- und PNG-Bilder jetzt als WebP ausgeliefert werden.
Beispiel 2: Automatische Bildgrößenanpassung mit Easy Image Resizer (EIR)
Ziel: Zu große Bilder automatisch beim Upload verkleinern und optional mehrere Bildgrößen (Thumbnails) erstellen lassen .
Geeignet für: Redaktionen, bei denen viele Autoren Bilder hochladen und nicht immer an die optimale Größe denken.
Plugin-Name: Easy Image Resizer (EIR)
Plugin-Typ: Systemplugin (kostenlose und Pro-Version verfügbar)
Joomla-Kompatibilität: Joomla 6 (Version 6.0.0.0-PRO verfügbar)
Download-Link: https://kubik-rubik.de/eir-easy-image-resizer
Schritt-für-Schritt-Anleitung:
- Plugin installieren:
- Gehe zu System → Installieren → Erweiterungen.
- Lade die ZIP-Datei hoch und installiere sie.
- Plugin aktivieren:
- Gehe zu System → Plugins.
- Suche nach "Easy Image Resizer" oder "EIR".
- Öffne das Plugin und setze den Status auf Aktiviert.
- Grundeinstellungen vornehmen:
- Im Reiter "Einstellungen" konfigurierst du :
- Maximale Bildbreite: z.B. 1920 Pixel (für Full-HD-Displays)
- Maximale Bildhöhe: z.B. 1080 Pixel
- Skalierungsmethode: "SCALE INSIDE" (passt das Bild proportional in die angegebenen Maße ein)
- JPG-Qualität: 85% (guter Kompromiss)
- Im Reiter "Einstellungen" konfigurierst du :
- WebP-Konvertierung aktivieren (Pro-Version):
- Aktiviere "Convert multi-size images to WebP", um automatisch WebP-Kopien zu erstellen .
- Optional: Aktiviere "Delete images after WebP conversion", um Originale zu löschen.
- Optimus.io-Integration für verlustfreie Komprimierung (optional):
- Im Plugin kannst du den Dienst Optimus.io für verlustfreie Komprimierung aktivieren .
- Für Bilder unter 100KB ist der Dienst kostenlos.
Wichtig: Das Plugin verarbeitet nur neu hochgeladene Bilder. Bestehende Bilder werden nicht automatisch angepasst (nur in der Pro-Version über einen Batch-Prozess möglich) .
Beispiel 3: Gezielte WebP-Konvertierung mit WebP Converter for Joomla
Ziel: Gezielte Kontrolle über die WebP-Konvertierung mit Option, Originaldateien zu löschen oder zu behalten .
Geeignet für: Anwender, die eine schlanke, fokussierte Lösung ohne Schnickschnack suchen.
Plugin-Name: WebP Converter for Joomla
Plugin-Typ: Systemplugin (kommerziell)
Joomla-Kompatibilität: Joomla 5 und 6
Download-Link (JED): https://extensions.joomla.org/extension/webp-converter-for-joomla/
Schritt-für-Schritt-Anleitung:
- Plugin erwerben und installieren:
- Besuche die JED-Seite des Plugins und folge dem Link zum Kauf.
- Installiere die heruntergeladene ZIP-Datei über System → Installieren → Erweiterungen.
- Plugin konfigurieren:
- Gehe zu System → Plugins und öffne "WebP Converter for Joomla".
- Stelle folgende Optionen ein :
- WebP-Qualität: 80% (empfohlen)
- Originaldateien behandeln: Wähle zwischen "Behalten" oder "Nach Konvertierung löschen"
- Ordnerstruktur beachten: Aktiviert lassen
- Testupload durchführen:
- Gehe zu Inhalt → Medien.
- Lade ein Testbild in einen beliebigen Unterordner hoch (z.B. /images/blog/).
- Das Plugin konvertiert das Bild automatisch direkt nach dem Upload .
Besonderheit: Dieses Plugin ist bewusst schlank gehalten – es erstellt keine Datenbanktabellen, benötigt keine Cronjobs und hat keine externen Abhängigkeiten .
Beispiel 4: Manuelle Bildoptimierung vor dem Upload
Ziel: Maximale Kontrolle über jedes einzelne Bild durch Optimierung außerhalb von Joomla.
Geeignet für: Entwickler und alle, die die volle Kontrolle über jeden Optimierungsschritt haben möchten.
Benötigte Werkzeuge: Kostenlose Online-Tools oder Desktop-Software.
Schritt-für-Schritt-Anleitung:
- Bilder lokal optimieren:
- Verwende eines dieser kostenlosen Tools:
- TinyPNG/TinyJPG: https://tinypng.com/
- Squoosh: https://squoosh.app/ (von Google, mit visuellem Qualitätsvergleich)
- ImageOptim (Mac) oder FileOptimizer (Windows)
- Verwende eines dieser kostenlosen Tools:
- Optimale Bildgröße wählen:
- Bestimme die maximale Anzeigegröße in deinem Template (z.B. Content-Bereich 1200px).
- Skaliere Bilder vor dem Upload auf genau diese Größe – nicht größer .
- Beispiel: Lade keine 4000px breiten Fotos hoch, die dann per CSS auf 800px skaliert werden.
- Dateinamen optimieren:
- Verwende keine Leerzeichen, Großbuchstaben oder Sonderzeichen .
- Empfohlen: Kleinbuchstaben, Bindestriche (-) zur Trennung.
- Beispiel: team-2025-sommerfest.jpg statt IMG_8472.JPG
- ALT-Texte nicht vergessen:
- Füge beim Einfügen in Joomla immer aussagekräftige ALT-Texte hinzu .
- Hochladen:
- Gehe zu Inhalt → Medien.
- Lade die optimierten Bilder in die passenden Unterordner hoch.
Vorteil dieser Methode: Maximale Kontrolle, keine Serverlast durch Konvertierung, optimale Qualität pro Bild.
Beispiel 5: Kombinierte Optimierung mit ShortPixel Image Optimizer
Ziel: Professionelle Komplettlösung mit automatischer Komprimierung, WebP-Konvertierung und Batch-Optimierung bestehender Bilder.
Geeignet für: Professionelle Websites mit vielen Bildern und bestehenden Archiven.
Plugin-Name: ShortPixel Image Optimizer
Plugin-Typ: Systemplugin (kostenlos mit monatlichem Kontingent / kostenpflichtige Erweiterungen)
Joomla-Kompatibilität: Joomla 3, 4, 5 und 6
Download-Link (JED): https://extensions.joomla.org/extension/shortpixel-image-optimizer/
Schritt-für-Schritt-Anleitung:
- Plugin installieren:
- Gehe zu System → Installieren → Erweiterungen.
- Lade die ZIP-Datei hoch und installiere sie.
- API-Key einrichten:
- Registriere dich kostenlos auf https://shortpixel.com/.
- Kopiere deinen API-Key.
- Gehe zu Komponenten → ShortPixel und füge den Key ein.
- Grundeinstellungen vornehmen:
- Komprimierungsstufe: "Lossy" (für Fotos) oder "Glossy" (für Produktbilder)
- WebP-Konvertierung: Aktiviere "Create WebP copies"
- Lazy Loading: Optional aktivieren
- Bestehende Bilder optimieren (Batch):
- Gehe zu Komponenten → ShortPixel → Bericht.
- Klicke auf "Alle Bilder optimieren".
- Das Plugin scannt nun dein gesamtes /images-Verzeichnis und optimiert alle gefundenen Bilder.
- Automatik für neue Bilder:
- Im Reiter "Erweitert" aktiviere "Automatisch bei Upload optimieren".
- Ab jetzt werden alle neu hochgeladenen Bilder automatisch optimiert.
Vorteile: Umfassende Statistik, Backup der Originale, CDN-Integration möglich, monatliches Kontingent für regelmäßige Optimierungen.
Zusammenfassung der wichtigsten Pfade und URLs
| Beispiel | Typ | Joomla-Pfad / URL | Hauptvorteil |
|---|---|---|---|
| DC jWEBP | Kostenloses Plugin | System → Plugins → "DC jWEBP" | Keine Konfiguration nötig, sofort einsatzbereit |
| Easy Image Resizer | Plugin (kostenlos/Pro) | System → Plugins → "EIR" | Verkleinert übermäßig große Uploads |
| WebP Converter | Kommerzielles Plugin | System → Plugins → "WebP Converter" | Schlank, fokussiert, ohne Datenbanktabellen |
| Manuelle Optimierung | Externe Tools | https://tinypng.com/ oder https://squoosh.app/ | Maximale Kontrolle, kein Plugin nötig |
| ShortPixel | Plugin (Kostenlos/Pro) | Komponenten → ShortPixel | Professionelles Reporting, Batch-Optimierung |
Meine Empfehlung:
- Für Einsteiger: DC jWEBP (kostenlos, keine Konfiguration)
- Für Redaktionen: Easy Image Resizer (verhindert zu große Uploads) + ShortPixel (für Qualitätskontrolle)
- Für Entwickler: Manuelle Optimierung für maximale Kontrolle
- Für große Websites mit Bestandsbildern: ShortPixel mit Batch-Optimierung
Alle genannten Plugins sind nachweislich Joomla-6-kompatibel und wurden für die aktuellen Versionen getestet
Praxis-Workflow (empfohlen)
Vor jedem Upload:
- Zuschneiden (passendes Seitenverhältnis)
- Größe festlegen
- Qualität 82 %
- Hochladen
BILDER HOCHLADEN
Methode 1 — Button
-
Ordner öffnen:images/artikel/2026
-
Klick Hochladen
-
Datei wählen: C:\Users\Reiner\Bilder\messe.jpg
Ergebnis:
Server: /images/artikel/2026/messe.jpg
URL: https://joomla6.rneuhoff.de/images/artikel/2026/messe.jpg
Methode 2 — Drag & Drop (empfohlen)
Bild vom Desktop direkt in den geöffneten Ordner ziehen. Das ist der normale Workflow (Arbeitsablauf) für Redakteure.
Bild bearbeiten im Media-Manager
Bild anklicken → Vorschau erscheint → Stift-Symbol
Bearbeitungsoberfläche öffnet sich.
Grundregel (immer merken)
Bilder dürfen niemals größer sein als die maximale Anzeigegröße im Template.
Alles darüber ist reine Ladezeit-Verschwendung.
1. Zuschneiden (Crop)
Beispiel
Foto: messe.jpg 4000 × 3000 px
Ziel: Artikelbild Querformat 16:9
Vorgehen
- Rahmen mit Anfassern ziehen
- Pixel manuell setzen:
Breite: 1600
Höhe: 900
SpeichernErgebnis:
Server: /images/artikel/2026/messe.jpg
Neue Größe: 1600 × 900 px
Frontend: https://joomla6.rneuhoff.de/images/artikel/2026/messe.jpg
Wichtig:
Original wurde überschrieben.
2. Resize (Größe ändern)
Beispiel
Mitarbeiterfoto zu groß: anna.jpg 2400 × 3200 px
Ziel: Profilbild 400px
Eingabe:
Breite: 400
Höhe: automatisch Qualität: 82%
Ergebnis:
kleine Datei → schneller Seitenaufbau
3. Rotate (Drehen)
Beispiel
Handyfoto steht quer: produkt.jpg
Optionen
Buttons: 90° links 90° rechts 180°
oder manuell:
Angle: 90
Speichern → Bild korrekt ausgerichtet
Was tatsächlich passiert
Der Media-Manager arbeitet direkt auf der Datei:
| Aktion | Ergebnis |
|---|---|
| Crop | Bild wird neu gespeichert |
| Resize | Pixel reduziert |
| Rotate | EXIF wird korrigiert |
| Qualität | JPG neu komprimiert |
Kein Verlauf, kein Undo → Backup vorher sinnvoll.
Typische Anfängerfehler
| Problem | Ursache |
|---|---|
| Bild unscharf | mehrfach resized |
| Original verloren | direkt überschrieben |
| Frontend riesig | nie verkleinert |
| 404 Fehler | falscher Ordner |
| Upload verboten | Dateityp nicht erlaubt |
Typische Anzeigegrößen (Cassiopeia-extended)
Du kannst dich an diesen realistischen Maximalbreiten orientieren:
| Bereich | Maximale Anzeige | Sinnvolle Bildgröße |
|---|---|---|
| Header / Titelbild | ~1200 px | 1600 px |
| Artikelbild groß | ~900 px | 1200 px |
| Blog-Vorschau | ~400 px | 600 px |
| Sidebar Bild | ~300 px | 400 px |
| Thumbnail / Liste | ~150 px | 300 px |
| Logo | ~250 px | exakt 250 px |
| Mitarbeiterfoto | ~250 px | 400 px |
| Galerie groß | ~800 px | 1200 px |
Warum größer speichern? → wegen Retina-Displays.
Optimale Dateigröße
| Bildtyp | Ziel-Dateigröße |
|---|---|
| Headerbild | 120–250 KB |
| Artikelbild | 70–150 KB |
| Blog-Teaser | 40–80 KB |
| Thumbnail | 10–25 KB |
| Logo | < 25 KB |
| Icons | < 10 KB |
Wenn ein Artikelbild 2–5 MB hat → extrem schlecht.
Optimales Format
| Zweck | Format |
|---|---|
| Fotos | JPG |
| Grafiken mit Transparenz | PNG |
| Logos / einfache Grafiken | SVG |
| Moderne Websites | WebP (wenn möglich) |
Wichtig:
PNG für Fotos ist der häufigste Anfängerfehler → 10× größere Dateien.
Qualitäts-Einstellung (JPG)
Im Media-Manager beim Resize: Qualität: 80–85 %
| Qualität | Ergebnis |
|---|---|
| 100% | riesige Datei |
| 90% | unnötig groß |
| 80% | optimal |
| 60% | sichtbar schlecht |
Joomla-konforme Bild-Praxis (kurz & wichtig)
⚙️ 1. Verwende WebP, wenn möglich
→ WebP ist kleiner und wird von modernen Browsern unterstützt.
⚙️ 2. Bildgröße vorher anpassen
Wenn dein Modul max. 800 px Breite braucht → hochladen = max. 800 px
→ Keine riesigen 4000 px Bilder hochladen.
Pfad im Backend: Inhalt → Medien → Bilder hochladen
⚙️ 3. ALT-Text immer setzen
Warum?
✔ SEO
✔ Accessibility
Wenn du ein Bild hochlädst, trage: ALT = Aussage über das Bild
z. B. „Joomla 6 Startseite Beispiel“
⚙️ 4. Verwende sinnvolle Dateinamen
Statt: DSC1234.jpg
Nutze: joomla6-seo-beispiel.webp
→ besser für Google.
⚙️ 5. Responsive Bilder
Moderne Templates erzeugen meist srcset, aber du kannst es unterstützen:
<img src="..." srcset="..." sizes="...">
→ Browser lädt passende Größe.
Bearbeitung-Tools für Anfänger
Wenn du starten willst:
➡ Photopea + Squoosh.app
→ decken fast alles ab.
Für Farben:
➡ Coolors.co + ContrastChecker
Für lokale Arbeit:
➡ GIMP (Windows/Mac)
Photopea – kostenlos & online
👉 Photoshop-ähnliches Tool im Browser
Was du damit machen kannst:
✔ Zuschneiden
✔ Größenändern
✔ Farbkorrektur
✔ Ebenen / Text
✔ Export als JPG/PNG/WebP
Warum nutzen?
Braucht keine Installation, arbeitet direkt im Browser, viele Funktionen wie Photoshop.
Squoosh.app – Bilder verkleinern + optimieren
👉 Sehr einfache Online-Optimierung
Funktionen:
✔ Kompression (Qualität reduzieren)
✔ Formatwahl (WebP, MozJPEG)
✔ Vorher/Nachher Vergleich
Perfekt für Joomla 6:
Gerade JPG/PNG stimmen → WebP für schnellere Ladezeit.
TinyPNG / TinyJPG – einfache Kompression
👉 Lädt Bilder, komprimiert stark
Unterstützt:
✔ PNG
✔ JPG
Canva – schneller Grafik-Editor
👉 Einfaches Drag & Drop
Nützlich für:
✔ Banner
✔ Social-Grafiken
✔ Buttons
✔ einfache Layouts
Nachteil:
Nicht so leistungsfähig wie Photopea, aber anfängerfreundlich.
GIMP (Offline) – Profi-Tool kostenlos
👉 Open-Source Programm
Funktionen:
✔ Ebenen
✔ Farbkorrektur
✔ Export als WebP/JPG/PNG
Warum sinnvoll?
Volle Kontrolle über Bilder, gute Alternative zu Photoshop.
Spezial-Tools für Qualität & SEO
FileOptimizer (Windows)
➡ https://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer (Windows)
Was sie machen:
→ Bilder verlustfrei und stark komprimieren
Warum wichtig für Joomla SEO?
Kleinere Bilder = schnellere Ladezeit = besseres Ranking.
WebP Converter (online)
👉 Konvertiert Grafiken zu WebP
➡ https://convertio.co/de/webp-converter/
WebP spart oft 50 % Dateigröße bei guter Qualität.
Tools für Farben (Color Picker & Paletten)
Coolors.co – Farben generieren
👉 Palette automatisch erstellen
Nutze es, um harmonische Farbpaletten für deine Website zu definieren.
Adobe Color – Farbregeln & Kontraste
👉 Farbrad, Farbregeln, Accessibility-Kontraste
➡ https://color.adobe.com/de/create
Damit findest du z. B. passende Akzentfarben zu deinem Design.
ColorZilla (Browser) – Pipette im Browser
👉 Color Picker direkt aus Webseiten. Browser-Erweiterung (Chrome/Edge)
➡ https://www.colorzilla.com
Du klickst eine Farbe an und bekommst den Farbcode.
Contrast Checker – Barrierefreie Farben
👉 Prüft Farbkontrast für Lesbarkeit ➡ https://contrastchecker.com
Google achtet auf ausreichenden Kontrast für Barrierefreiheit.
Wichtigste Änderungen seit Joomla 5 (für Bilder & Medien)
1️⃣ Modernerer Medien-Manager
Verbesserte Bedienung:
In Joomla 6 wurde der Medien-Manager weiter überarbeitet gegenüber Joomla 5, u. a. mit Drag-&-Drop-Uploads, Vorschaubildern und eingebauten Bild-Bearbeitungsfunktionen (Crop/Resize/Rotate). Das bedeutet, dass du Bilder direkt im Backend einfacher anpassen kannst, ohne externe Tools nutzen zu müssen.
2️⃣ WebP, AVIF & moderne Formate
In Joomla 5 gab es schon Unterstützung für AVIF im Media Manager. In Joomla 6 wird dieser Support weiter genutzt und in der Praxis verbessert – etwa neuere Standard-Bildformate wie WebP oder AVIF. Viele Erweiterungen rüsten dies auch für Joomla 6 nach.
Praxis für dich:
Du kannst moderne Formate als Standard einsetzen → kleinere Dateien, schnellere Ladezeiten, ohne sichtbaren Qualitätsverlust.
3️⃣ Lazy Loading standardmäßig aktiv
Während Lazy Loading schon in früheren Joomla-Versionen unterstützt wurde, hat Joomla 6 den Fokus darauf weiter verstärkt. Bilder werden standardmäßig mit loading="lazy" versehen, was bedeutet, dass sie erst geladen werden, wenn sie im sichtbaren Bereich des Besuchers erscheinen (verbessert Ladezeit und Core Web Vitals).
Hinweis: Du kannst das für Bilder „above the fold“ (z. B. Hero-Header) auch manuell ändern zu loading="eager", wenn du eine schnelle Anzeige brauchst.
4️⃣ Performance- und SEO-Optimierungen
Joomla 6 bringt mehrere Verbesserungen, die sich indirekt auf Medien auswirken:
- Besseres Caching und Asset-Handling
- Verbesserte automatisierte Bild-Meta-Tags (OpenGraph, Social Meta)
- Core-Struktur ist schlanker und moderner → geringere Serverlast
Das alles hilft, dass Bilder schneller ausgeliefert werden und die Seite insgesamt performanter wirkt.
5️⃣ Kompatibilitäts-Plugin
Wenn du von Joomla 5 auf Joomla 6 aktualisierst und ältere Erweiterungen nutzt, kann das „Backward Compatibility“-Plugin helfen, dass Bild-Handling und Medien-Funktionen weiterhin funktionieren, bis Extensions angepasst sind.
Was bedeutet das konkret für deine Medien-Einstellungen?
🔹 WebP & AVIF statt nur JPG/PNG
- Standardformate für Web optimieren
- Bilder deutlich kleiner als JPG → bis 20–40 % weniger Größe ohne sichtbaren Verlust
👉 Du kannst im Joomla-Medien-Manager solche Formate aktiv nutzen oder Plugins einsetzen, die automatisch umwandeln.
🔹 Lazy Loading aktiviert
- Joomla 6 erzeugt automatisch loading="lazy"
- Das spart Ladezeit für lange Seiten
Tipp: Für große Header-Bilder kannst du es gezielt deaktivieren, damit diese früh geladen werden.
🔹 Direkte Bildbearbeitung im Backend
- Zuschneiden, Skalieren und Rotieren schon im Medienmanager möglich
Das spart externe Tools, wenn du schnell ein Bild anpassen willst.
Was hat sich NICHT grundsätzlich geändert
❌ Keine komplette automatische Bildkomprimierung nur durch Joomla.
❌ Keine Magie, die Bilder automatisch perfekt für jedes Endgerät skaliert (außer Lazy Loading).
❌ Keine automatische Erzeugung von srcset-Attributen ohne Template/Plugin-Unterstützung.
Für all das braucht Standard-Erweiterungen oder Template-Funktionen.
📌 Fazit (kurz & praktisch)
| Bereich | Joomla 5 | Joomla 6 |
|---|---|---|
| WebP/AVIF Unterstützung | vorhanden | weiterhin verbessert |
| Medien-Manager Bedienung | gut | verbesserte Bild-Bearbeitungsfunktionen |
| Lazy Loading | unterstützt | standardmäßig aktiviert |
| Performance & SEO | solide | bessere Caching + Bild-Meta-Handling |
| Backend-UX | stabil | flüssigere UI |
Kurzum: Seit Joomla 5 hat sich bei Bildern/Medien vor allem die Usability, moderne Format-Unterstützung und Performance-Orientierung weiterentwickelt. Du hast mehr Tools direkt im Core → weniger externe Plugins nötig, aber für maximale Optimierung solltest du weiterhin Tools/Plugins gezielt einsetzen.