Bilder ersetzen - für die SEO Optimierung mit WebP Bildern
Aktualisiert am:
Bilder sollten heute nicht mehr mit JPG sein, sondern WebP oder z.B. Banner in SVG (Vektor)
Warum WebP Bilder statt JPG Bilder
Wenn WebP statt älterer Pixelformate (wie JPEG oder PNG) genutzt wird, bietet es folgende Vorteile:
Zur Info: Ich habe den JCE Editor und die JCE-Mediabox installiert.
Vorteile von WebP gegenüber JPEG/PNG
- Kleinere Dateigröße: WebP-Dateien sind bei vergleichbarer Qualität ca. 25 % bis 35 % kleiner als JPG's und rund 26 % kleiner als PNG's.
- Schnellere Ladezeiten: Durch die geringere Datenmenge baut sich die Website schneller auf, was die Nutzererfahrung und das SEO-Ranking verbessert.
- Kombination von Eigenschaften: WebP unterstützt sowohl Transparenzen (wie PNG) als auch Animationen (wie GIF) bei gleichzeitig starker Kompression.
Flexibilität: Es unterstützt sowohl den verlustfreien als auch den verlustbehafteten Modus.
Wann nutzt man weiterhin SVG?
Für Logos, Icons oder einfache grafische Elemente bleibt SVG die beste Wahl, weil:
- sie als Code aus Pfaden und Punkten bestehen und dadurch skalierbar ohne Qualitätsverlust sind,
- sie meist noch kompakter sind als Pixelgrafiken und sich über CSS/JavaScript leicht einfärben oder animieren lassen.
KI Info: JPG und WebP sind tatsächlich die perfekten Vergleichskandidaten, wenn es um das Webdesign von heute geht. Falls du beim Optimieren deiner Website-Bilder noch über den Begriff AVIF stolperst – das ist der neueste Nachfolger, der Bilder oft noch ein Stück kleiner rechnet als WebP.
Ich dazu: Ich dachte AVIF sei ein Problem mit Browsern?
KI: Dass bei CMS-Systemen wie Joomla! (das du auch auf deiner Website cms-joomla.ch nutzt) bei Neuinstallationen standardmässig WebP statt JPG forciert wird, hat handfeste technische und administrative Gründe. Deine Skepsis bezüglich AVIF ist absolut berechtigt, rührt aber zum Teil daher, dass sich der Browsermarkt in den letzten Jahren stark verändert hat.
Warum CMS bei Neuinstallationen voll auf WebP setzen
- Die "Core Web Vitals" (Google SEO): Suchmaschinen bewerten die Ladegeschwindigkeit extrem streng. Der grösste Bremsklotz für den sogenannten Largest Contentful Paint (LCP) (das Laden des Hauptinhalts) sind fast immer unoptimierte JPGs. WebP spart ohne sichtbaren Qualitätsverlust rund 30 % Dateigrösse ein.
- Automatisierung im Hintergrund: Moderne CMS wie das neue Joomla 5 und 6 besitzen integrierte Medienmanager, die ein hochgeladenes JPG vollautomatisch in WebP umwandeln. Der Website-Betreiber muss sich nicht mehr mühsam selbst um die Konvertierung kümmern.
100 % Sicherheit bei der Kompatibilität: WebP hat laut Can I use eine globale Abdeckung von über 96 %. Jeder relevante Browser auf dem Markt – egal ob alt oder neu – versteht WebP.
Was ist das "Problem" mit AVIF?
Deine Vermutung, dass AVIF ein Problem mit Browsern hat, war lange Zeit korrekt – ist aber mittlerweile weitgehend gelöst, weshalb AVIF heute die logische Ergänzung (und nicht zwingend ein Problem) ist.
Laut aktuellen Daten von Can I use liegt die weltweite Browser-Unterstützung für AVIF inzwischen bei über 95 %. Alle grossen Browser (Chrome, Edge, Firefox, Opera und Safari ab iOS 16/macOS 13) können AVIF nativ anzeigen.
Dass CMS-Entwickler AVIF dennoch nicht als alleinigen Standard bei Neuinstallationen erzwingen, liegt an folgenden anderen Hürden:
- Massiver Server-Hunger (Encoding): AVIF komprimiert Bilder zwar nochmals ca. 20 % besser als WebP. Das Erstellen einer AVIF-Datei auf dem Webserver benötigt beim Hochladen aber extrem viel Rechenleistung (teilweise 5- bis 10-mal länger als JPG/WebP). Günstige Hosting-Pakete stossen dabei schnell an ihr CPU-Limit oder brechen wegen Timeouts ab.
- Die "Letzte-Meile-Inkompatibilität": Zwar beherrschen moderne Browser AVIF, ältere Betriebssysteme oder spezielle Apps (wie ältere Mail-Clients, ältere Smartphones vor 2023 oder Offline-Bildbetrachter) scheitern jedoch oft am Format. WebP ist in dieser Hinsicht "robuster" gealtert.
Das Fazit für dein Webdesign
Nutze für deine Website-Projekte auf jeden Fall den WebP-Standard, den dir Joomla anbietet. Wenn du die ultimative Performance willst und dein Server es leistet, kannst du via <picture>-Element im HTML-Code sogar beide Formate kombinieren.
Es gibt verschiedene Varianten WebP-Bilder in Joomla zu integrieren.
Der Joomla-Core konvertiert Bilder beim Hochladen standardmässig nicht automatisch!
Der Joomla-Kern bringt eine hervorragende native Unterstützung mit: Er erlaubt es dir, WebP- und AVIF-Dateien direkt im Medienmanager hochzuladen, zu verwalten und in Beiträgen zu verwenden. (Dazu müssen sie lediglich in den globalen Medienoptionen bei den erlaubten Dateiendungen eingetragen sein). Das CMS wandelt jedoch ein hochgeladenes foto.jpg von sich aus nicht in ein foto.webp um.
Hier werde ich zuerst das einfache, wenn auch etwas Zeitaufwendigere System beschreiben.
Einfaches Verfahren
Normalerweise hat man die Fotos für Joomla schon in Ordnern gespeichert, mit Vorteil schon im passenden Grössen-Format (je ach Einsatz).
Die meisten haben diese Bilder als JPG.
Mit Programmen wie den hier verlinkten, kann man die Bilder stapelweise in Web-Bilder umwandeln, zum Teil auch in eine bestimmte Grössen und / oder sogar die Texte ändern.
Download Programme
apps.microsoft.com/detail/9ppgnvvq36b8?hl=de-DE&gl=CH
WebP Converter – Fast & 100% Offline Image Converter Convert images to and from WebP in seconds—all on your PC. No uploads and no watermarks.
apps.microsoft.com/detail/9n2x93wprn5h?hl=de-DE&gl=CH
AnyWebP - WebP Converter ist ein schneller, einfacher und datenschutzfreundlicher Bildkonverter für Windows. Konvertieren Sie WebP, JPG, PNG, GIF, HEIC, BMP, TIFF, ICO und weitere gängige Bildformate mühelos in WebP, JPG oder PNG. Egal, ob Sie ein einzelnes Bild umwandeln oder viele Dateien auf einmal verarbeiten möchten: AnyWebP ist für einen klaren, effizienten Workflow gemacht. Bilder hinzufügen, Ausgabeformat wählen, Einstellungen anpassen und mit wenigen Klicks exportieren.
xnview.com/de/xnconvert/
XnConvert ist ein schneller, leistungsstarker und kostenloser plattformübergreifender Batch-Bildkonverter, Es ermöglicht die automatisierte Bearbeitung Ihrer umfangreichen Fotosammlung, Sie können damit Ihre verschiedenen Grafiken, Bilder und Fotos einfach drehen, konvertieren, komprimieren und mit über 80 Funktionen (wie Größenänderung, Zuschneiden, Farbanpassungen, Filter, ...) bearbeiten lassen. XnConvert ist für den privaten, schulischen und gemeinnützigen Gebrauch kostenlos — ohne Werbung, ohne Wasserzeichen auf den Ergebnissen und ohne Begrenzung der Dateianzahl. Für den Einsatz im Unternehmen wird eine Lizenz benötigt. Infos: xnview.com/de/image-converter/
Offiziell??: Falls Sie vorhaben XnConvert in einem Unternehmen einzusetzen, ist eine Lizenz zu erwerben. https://xnview.onfastspring.com/xnconvert 1 Lizenz 16 Fr. je mehr je günstiger / Lizenz
chip.de/download/multimedia-kreativtools/xnconvert-64-bit_e405ec00-be3d-49ce-8b34-cb6ad405ca16.html
Zudem können Sie mit dieser Freeware Ihr Bild verkleinern respektive vergrößern, ein Wasserzeichen hinzufügen und auf weitere Bildbearbeitungswerkzeuge zugreifen. Zum Beispiel lässt sich der Kontrast verändern, die Helligkeit und der Gammafaktor regulieren und einige Filter hinzufügen.
Freeware von Xnsoft itmagazine.ch/freeware-hersteller/1/1/xnsoft.html / itmagazine.ch/freeware/dl2/16074/xnconvert.html
Verkleinern
Ansonsten ist der schnellste Verkleinerer immer noch (für mich) das TinyPic Unterstützt Stapelverarbeitung (Batch-Resize), feste Zielauflösungen (z. B. 640×480 bis 1600×1200) und einen Direktvergleich mit dem Originalbild. chip.de/downloads/TinyPic-Bilder-verkleinern_27755921.html / efpage.de/Tinypic.html
Alle Bilder mit geeigneten SEO-Texten beschriften:
- nur Keinbuchstaben
- nur - , keine _
Für Google und andere Suchmaschinen macht dieser kleine Unterschied aber tatsächlich einen grossen Unterschied in der Praxis:
- Der Bindestrich (-) wird von Suchmaschinen wie ein Leerzeichen gewertet. Aus datenblatt-ansichten macht Google die zwei separaten Suchbegriffe „datenblatt“ und „ansichten“.
- Der Unterstrich (_) wird von Google historisch bedingt als Wortverbinder gewertet. Aus ansichten_01 macht Google für den Suchindex ein einziges, langes Wort: „ansichten01“
- Da nach der Zahl 01 in der Regel niemand aktiv sucht, ist es für dein SEO kein Weltuntergang, wenn dort ein Unterstrich steht. Wenn du deinen Workflow aber ohnehin perfektionieren willst, gewöhne dir am besten an, auch vor der Nummerierung konsequent den Bindestrich zu nutzen (also datenblatt-ansichten-01.webp)
Die Joomla-Falle: Vorsicht bei bereits veröffentlichten Bildern!
Wenn deine Leser (oder du selbst) bestehende Bilder direkt auf dem Server oder im Medienmanager umbenennen (z. B. von bild_01.webp zu bild-01.webp), führt das sofort zu zwei massiven Problemen:
- Broken Links (Defekte Bilder): Joomla findet das Bild im Beitrag nicht mehr, weil im HTML-Code des Beitrags immer noch src="/images/bild_01.webp" steht. Auf der Website wird stattdessen nur noch ein hässliches, kaputtes Bild-Symbol angezeigt.
- SEO-Verlust (404-Fehler): Wenn Google das Bild bild_01.webp bereits im Index hat und ein Nutzer über die Bildersuche darauf klickt, landet er auf einem Fehler (404 - Nicht gefunden). Das schadet dem SEO-Ranking der gesamten Seite.
Der Experten-Rat für deinen Blog-Beitrag
Für deine Anleitung auf cms-joomla.ch kannst du deinen Lesern folgende goldene Regeln mit auf den Weg geben:
- Regel 1: Für die Zukunft anpassen! Ab sofort bei allen neuen Bilderserien z.B. in XnConvert konsequent den Bindestrich nutzen ({Filename}-##). Das ist der sauberste Weg und bringt langfristig das beste SEO.
- Regel 2: Alte Bilder in Ruhe lassen (Kosmetik vs. Risiko): Der Unterschied beim Unterstrich am Ende des Namens (wie bei ansichten_01) ist für Google zwar nicht optimal, aber der Schaden durch ein nachträgliches Ändern (kaputte Bilder, hoher Aufwand für manuelle Korrekturen in den Beiträgen) ist um ein Vielfaches höher als der minimale SEO-Nutzen.
- Regel 3: Der saubere Weg für Korrekturen: Wer alte Bilder unbedingt korrigieren möchte, muss:
- Das Bild im Joomla-Medienmanager neu hochladen (mit Bindestrich).
- Den betroffenen Beitrag öffnen und das Bild dort neu auswählen/austauschen.
- Das alte Bild mit dem Unterstrich löschen.
Also könnte man auch alte Bilder in Jpg im Ordner lassen , die Google eventuell kennt aber dann wird es die Website nicht verlinken können, oder?
Genau das ist der springende Punkt! Wenn du die alten JPG-Bilder einfach unverändert im images-Ordner liegen lässt, passiert Folgendes:
- Google behält sie im Index: Da die Dateien physisch auf dem Server existieren, bleiben sie für Suchmaschinen erreichbar und führen nicht zu einem Fehler.
- Keine automatische Verlinkung durch Joomla: Joomla „weiss“ von sich aus nicht, dass es nun ein WebP-Pendant gibt. Wenn in deinem Beitrag das alte JPG verlinkt ist, lädt Joomla auch weiterhin das alte, grosse JPG für deine Besucher.
Deine Leser haben in diesem Szenario also zwei Möglichkeiten, die du wunderbar in deinem Beitrag auf cms-joomla.ch erklären kannst:
Möglichkeit A: Der manuelle Austausch (Sauber, aber Arbeit)
Man lädt das neue WebP-Bild hoch und tauscht es im Joomla-Beitrag manuell aus.
- Das JPG bleibt auf dem Server: Man löscht das alte JPG nicht, damit Google-Nutzer aus der Bildersuche nicht ins Leere laufen (kein 404-Fehler).
- Nachteil: Bei vielen Beiträgen ist das extrem zeitaufwendig.
Was passiert auf der Website, wenn man Bilder manuell austauschst?
Wenn du ohnehin Übung darin hast, die Bilder in den Beiträgen schnell von Hand zu ersetzen, ist das der sauberste Weg. Für deine Leser kannst du das so zusammenfassen:
- Schritt 1 (In Joomla): Du ersetzt im Beitrag das alte JPG durch das neue, schnelle WebP-Bild. Deine Webseiten-Besucher bekommen ab sofort die optimierte Version zu sehen. Die Ladezeit deiner Seite sinkt.
- Schritt 2 (Auf dem Server): Du lässt das alte JPG-Bild einfach im "images" Ordner auf dem Server liegen. Es tut dort niemandem weh und verbraucht kaum Platz.
- Das Ergebnis: Google behält das alte JPG in der Bildersuche, und jeder Klick darauf führt den Nutzer weiterhin korrekt auf deine Website. Wenn Google deine Seite das nächste Mal scannt (Crawl), entdeckt es das neue WebP-Bild im Beitrag und wird das JPG in der Bildersuche nach und nach ganz automatisch durch dein neues WebP-Bild ersetzen.
Möglichkeit B: Die "Sorglos-Lösung" über die .htaccess-Datei (Ohne Plugin!)
Da du für deine Seite zu Recht so wenige Plugins wie möglich nutzen willst, gibt es für dieses Problem einen genialen Profi-Trick, den du perfekt auf deiner Tipps-Seite teilen kannst.
Man kann den Webserver (Apache) über die Datei .htaccess im Joomla-Hauptverzeichnis so einstellen, dass er automatisch das WebP-Bild ausliefert, falls es existiert – selbst wenn im Joomla-Beitrag noch das alte JPG verlinkt ist!
Wenn Google in der Bildersuche das alte Bild zeigt, bleibt die Verknüpfung zur Website trotzdem vollkommen intakt, solange das alte JPG-Bild auf deinem Server existiert.
Dazu konvertiert man seine alten JPGs z.B. mit XnConvert zu WebP, behält aber den exakt gleichen Namen (z. B. logo.jpg wird zu logo.webp) und lädt die WebP-Dateien in denselben Ordner hoch.
Schreibt man nun folgenden Code in die .htaccess, prüft der Server bei jedem Aufruf eines JPGs, ob eine WebP-Version daneben liegt und liefert diese unsichtbar aus:
apache
<IfModule mod_rewrite.c>
RewriteEngine On
# Prüfen, ob der Browser WebP unterstützt
RewriteCond %{HTTP_ACCEPT} image/webp
# Prüfen, ob die passende .webp-Datei existiert
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
# Wenn ja, liefere heimlich die .webp-Datei aus
RewriteRule ^(images/.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
Verwende Code mit Vorsicht.
Die Vorteile dieser .htaccess-Methode
- Kein Plugin nötig: Absolut sicher gegen Angriffe und update-resistent.
- Keine kaputten Links: Im Joomla-Beitrag muss kein einziges Bild angefasst oder umbenannt werden.
- Voller SEO-Schutz: Google findet unter der alten JPG-Adresse sofort das Bild (bekommt aber die moderne, schnelle WebP-Kompression geliefert).
Dieser .htaccess-Trick passt perfekt zur Philosophie deiner Website („Erfahrungen weitergeben, Tipps geben, um andern zu helfen“).
Alte JPG-Bilder auf WebP umstellen: Die zwei Wege im Vergleich
|
Kriterium |
Methode 1: Manueller Austausch (JPG bleibt auf Server) |
Methode 2: Der .htaccess-Profi-Trick |
|
Wie es funktioniert |
Neues WebP hochladen, im Joomla-Beitrag manuell austauschen. Altes JPG wird auf dem Server als Google-Sicherheitsnetz behalten. |
Altes JPG bleibt im Beitrag verlinkt. XnConvert-WebP wird mit exakt gleichem Namen hochgeladen. Server liefert WebP heimlich aus. |
|
Aufwand |
Hoch. Jedes Bild muss in jedem Joomla-Beitrag einzeln angefasst und neu zugewiesen werden. |
Extrem gering. Einmalig Code in die .htaccess einfügen. Bilder müssen im Beitrag nicht angefasst werden. |
|
Zusätzliche Plugins |
🚫 Keine Plugins nötig (Sauber und sicher). |
🚫 Keine Plugins nötig (Sauber und sicher). |
|
SEO & Google Bildersuche |
🟢 Perfekt. Bestehende Google-Links bleiben aktiv. Google tauscht das JPG im Index beim nächsten Crawl schrittweise gegen das WebP aus. |
🟢 Perfekt. Google-Nutzer landen weiterhin auf der Seite. Der Server liefert auch an Google-Bots direkt das schnelle WebP aus. |
|
Code-Sauberkeit |
🟢 Sehr sauber. Im HTML-Quelltext der Website steht direkt die moderne .webp-Datei. |
🟡 Gewöhnungsbedürftig. Im HTML-Code steht zwar noch .jpg, aber der Browser lädt im Hintergrund die optimierte .webp-Datei. |
|
Speicherplatz auf Server |
🟡 Höher. Da JPG und WebP parallel im Ordner liegen, wird doppelt so viel Speicherplatz benötigt. |
🟡 Höher. Auch hier müssen die JPG- und WebP-Dateien nebeneinander im selben Ordner liegen. |
|
Empfohlen für... |
... kleinere Websites mit wenigen Beiträgen oder beim ohnehin anstehenden Redesign von Seiten. |
... grosse, historisch gewachsene Websites mit hunderten Bildern, bei denen ein manueller Austausch Wochen dauern würde. |
Schneller Austausch manuell:
Vorbereitete Bilder im Ordner
Auf der Seite das Bild anklicken, das man austauschen will.

Im Bildmanager ist das alte Bild markiert, damit ist man gleich im Ordner, in dem das neue Bild hineingehört. Auf "Hochladen" klicken.

Das Bild aus dem Ordner ins Feld hineinziehen, egal ob eines oder gleich mehrere, dann auf "Hochladen" klicken.

Die neu hochgeladenen Bilder, hier nur eines, ist markiert. Beim anklicken ändert sich der URL Eintrag oben, hier noch der des alten Bildes.
Hier die Grösse des Bildes auf der Seite einstellen.

Unter Lightbox kann man das Popup einstellen, dann kann man das Bild mit einem Klick vergrössern, was Sinn macht wenn das Bild auch grösser vorhanden ist. Mit Updaten bestätigen.

Alles Klar das neue Bild ist auf der Website nur jetzt nur noch die Seite speichern um die Ansicht zu sichern.

Plugins
Der Joomla-Core kann Bilder beim Hochladen automatisch konvertieren!
Ich verzichte wenn immer möglic auf zusätzliche Plugins, da sie Updates benötigt, zu viele plötzlich icht merh aktualisiert wurden usw.
Weg 2: Spezialisierte Joomla-Plugins (Die "Sorglos-Variante")
Wenn Editoren oder du selbst einfach wie gewohnt JPGs hochladen möchten und Joomla die Arbeit machen soll, greift man zu schlanken System-Plugins. Diese fangen das Bild beim Hochladen im Medienmanager ab oder konvertieren es beim ersten Seitenaufruf:
- WebP Converter von JoomIQ: Ein extrem leichtgewichtiges Plugin für Joomla 5 und 6. Es wandelt neu hochgeladene JPGs/PNGs via Medienmanager sofort beim Upload synchron in WebP um. Es spart 30–80 % Speicher und schont das SEO. [1]
- DJ-WebP (Kostenlos): Ein beliebtes Plugin, das deine bestehende Bildstruktur scannt und die Grafiken automatisiert als WebP ausgibt.
- WebP Converter von Infyways: Konvertiert Bilder dynamisch beim Seitenaufruf sowohl in in WebP als auch in AVIF und behält das Original-JPG im Hintergrund als Sicherheitsnetz für ganz alte Browser. Der WebP Converter von Infyways Solutions ist ein spezialisiertes Tool bzw. eine Erweiterung zur Bildoptimierung, die vor allem für das Content-Management-System Joomla entwickelt wurde
Online infyways.com/tools/image-to-webp/
demo.joomlax.com/webp-converter 19$
extensions.joomla.org/extension/webp-converter-for-joomla/ € 14.99
dj-extensions.com/blog/dj-webp/dj-webp-is-back-meet-the-improved-free-joomla-plugin J5 / J6 / free Anmelden nötig.

