Nicht alle Bilder sind gleich. Das richtige Format – und schlanke Dateien – sorgen dafür, dass Ihre Seiten gut aussehen und schnell laden. Ein einfacher Gewinn für Nutzererlebnis und Suchmaschinenranking.
Bevor Sie ein Bildformat wählen, hilft es zu wissen, ob Ihr Bild vektorbasiert oder rasterbasiert ist. Vektorbilder bestehen aus Linien und Formen und skalieren ohne Qualitätsverlust – ideal für Logos, Icons und einfache Illustrationen. Rasterbilder bestehen aus Pixeln; sie eignen sich für Fotos und detaillierte Motive, verlieren beim Vergrößern aber an Schärfe und zeigen Treppchenbildung.
Klassiker: JPEG, PNG & GIF
JPEG (oft .jpg) ist nach wie vor das Arbeitspferd für Fotos und große Hintergründe. Es nutzt eine verlustbehaftete Kompression, die Dateien klein und schnell ladbar macht – allerdings auf Kosten feiner Details und ohne Transparenz. Verwenden Sie JPEGs für Hero‑Bilder, Blogfotos und Banner, aber vermeiden Sie sie für Logos oder Text, da Kanten unscharf wirken und kein transparenter Hintergrund möglich ist.
PNG ist das Standardformat für klare Grafiken und alles, was Transparenz benötigt. Die verlustfreie Kompression erhält Details, sodass Text und scharfe Linien knackig bleiben. Nachteilig sind oft größere Dateigrößen im Vergleich zu JPEG, vor allem bei komplexen Bildern. Logos, Icons und Diagramme profitieren am meisten von der Klarheit von PNG. Bei Fotos oder vollflächigen Hintergründen sparen Sie Bandbreite mit JPEG oder einer modernen Alternative.
GIF ist auf Websites weitgehend aus der Mode gekommen – außer bei einfachen Animationen oder Preloadern. Das Format ist auf eine Palette von 256 Farben beschränkt, was Dateien klein hält, Fotos aber fleckig erscheinen lässt. Für kurze, sich wiederholende Animationen sollten Sie stattdessen kleine MP4‑Videos in Betracht ziehen: Sie komprimieren besser und laufen in modernen Browsern flüssig.
Moderne Optionen: SVG, WebP & AVIF
SVG steht für Scalable Vector Graphics. Als Vektorformat skaliert es beliebig ohne Schärfeverlust und unterstützt Transparenz – ideal für Logos, Icons und einfache Illustrationen. SVG‑Dateien sind meist sehr klein, weil sie Anweisungen für Formen statt Pixel speichern. Enthält Ihre Grafik Verläufe oder fotorealische Details, können ältere Browser Kompatibilitätsprobleme zeigen – in solchen Fällen bleiben Rasterformate die sichere Wahl.
WebP ist ein modernes Rasterformat von Google. Es unterstützt verlustbehaftete und verlustfreie Kompression, Transparenz und einfache Animationen. In der Praxis sind WebP‑Dateien oft rund ein Viertel kleiner als vergleichbare JPEGs oder PNGs, sodass Seiten schneller laden, ohne dass die Qualität merklich leidet. Fast alle modernen Browser unterstützen WebP, und auch Safari hat in neueren Versionen nachgezogen. Da ältere Browser noch Lücken haben, ist die sicherste Lösung ein JPEG‑ oder PNG‑Fallback via <picture>-Element oder ein Joomla‑Plugin, das automatisch die passende Version liefert.
AVIF ist ein weiteres aufstrebendes Format mit noch besserer Kompression als WebP. Die Unterstützung wächst, ist aber noch nicht flächendeckend. Wie bei WebP empfiehlt sich, AVIF neben einem breit unterstützten Format anzubieten, um alle Besucher abzudecken. Aktuell profitieren die meisten Joomla‑Sites am meisten davon, Fotos und Grafiken auf WebP umzustellen und die Entwicklung von AVIF weiter zu beobachten.
WebP in Joomla verwenden
Joomlas integrierter Medienmanager akzeptiert WebP‑Dateien, wenn Sie webp in die Liste der erlaubten Dateiendungen aufnehmen. Der Nachteil: Es gibt keine Vorschau, sodass nur der Dateiname sichtbar ist. Beim Einfügen von Bildern in einen Artikel können Sie diese in ein <picture>-Tag einbetten, um WebP an unterstützte Browser zu liefern und auf JPEG oder PNG zurückzufallen. Ein typischer Codeblock sieht so aus:
<picture> <source srcset="/path/to/image.webp" type="image/webp" /> <img src="/path/to/image.jpg" alt="Alternative description" width="600" height="400" /> </picture>Wenn Sie nicht direkt HTML schreiben möchten, können Erweiterungen die Arbeit übernehmen. Plugins wie DJ WebP konvertieren beim Upload JPEGs und PNGs in WebP und liefern die passende Version basierend auf dem Browser des Besuchers. SP Page Builder unterstützt WebP nativ – aktivieren Sie WebP in der GD‑Library Ihres Servers, laden Sie die WebP‑Datei statt PNG oder JPEG hoch, und das Addon erledigt den Rest. Aimy Speed Optimization ist ein weiteres praktisches Plugin, das Lazy Loading und Caching für WebP‑Bilder bietet, um zusätzliche Performance herauszuholen.
Praktische Regeln zur Bildverwaltung
Ihre Medienbibliothek unter Kontrolle zu halten bedeutet mehr als das richtige Format zu wählen. Es geht um Konsistenz und Disziplin. Diese einfachen Gewohnheiten wirken sich stark aus:
- Verwenden Sie aussagekräftige Namen und Ordner – benennen Sie Dateien kleingeschrieben mit Bindestrichen (zum Beispiel
company-logo.webp) und organisieren Sie sie in Ordnern (z. B.images/blog/2025/), damit Sie und Ihre Kolleg:innen sie leicht finden. - Größe anpassen und komprimieren vor dem Upload – laden Sie kein 4000‑Pixel‑Foto hoch, wenn auf der Seite nur 800 Pixel benötigt werden. Exportieren Sie für das Web mit 72 dpi und komprimieren Sie die Datei mit Tools wie TinyPNG oder Squoosh, um unsichtbare Daten zu entfernen.
- Leiten Sie Größen‑ und Formatregeln ab – wenn Ihr Team Inhalte gemeinsam erstellt, stimmen Sie maximale Dateigrößen, bevorzugte Formate und Benennungsregeln ab. Schon ein einzelnes 5‑MB‑Bild kann die Seitenladezeit stark beeinträchtigen.
- Nutzen Sie Lazy Loading und Caching – aktivieren Sie Joomlas integriertes Lazy Loading oder verwenden Sie ein Optimierungs‑Plugin, damit Bilder erst beim Sichtbarwerden geladen und effizient zwischengespeichert werden.
Unsere Agenturmeinung
Aus unserer Praxis mit Joomla‑Projekten ist der Umstieg auf WebP einer der einfachsten Performance‑Gewinne. JPEGs und PNGs behalten wir als Fallbacks, aber für die meisten Fotos und Grafiken wird die WebP‑Variante zum Standard.
Was den größten Unterschied macht, ist jedoch Disziplin 🙂: einheitliche Benennungsregeln, Dateikompression vor dem Upload und regelmäßige Audits der Medienbibliothek. Einige große Dateien, tief in Ordnern versteckt, können Ihre Seite mehr ausbremsen als alles andere.
Das Wichtigste in Kürze
- Verwenden Sie Vektorformate wie SVG für Logos und Icons.
- Wählen Sie JPEG für Fotos und Hintergründe, PNG für Grafiken mit Transparenz und WebP für die beste Kombination aus Größe und Qualität.
- Wenn Sie WebP oder AVIF ausliefern, bieten Sie immer ein JPEG‑ oder PNG‑Fallback an.
- Legt Benennungs-, Größen‑ und Kompressionsrichtlinien für alle fest, die Bilder hochladen.
