Sie haben eine neue Website fotografieren lassen, die Bilder sind schön, professionell, und 8 Megabyte pro Stück. Sie laden alles in WordPress hoch und denken: fertig. Drei Monate später fragen Sie sich, warum die Website so langsam ist.
Bilder sind bei den meisten WordPress-Websites für 60 bis 80% des gesamten Seitengewichts verantwortlich. Das ist mehr als alle Plugins, alle Scripts und alle Styles zusammen. Wer die Ladezeit verbessern will, fängt hier an.
Warum WordPress allein das Problem nicht löst
WordPress erzeugt beim Hochladen von Bildern automatisch mehrere Grössen: eine kleine Vorschau (Thumbnail), eine mittlere und eine grosse Version. Das ist hilfreich, aber löst das Grundproblem nicht.
Erstens: WordPress komprimiert die Bilder dabei kaum. Ein 3-Megabyte-JPEG bleibt nach dem Hochladen ein 2,9-Megabyte-JPEG, einfach in einer anderen Auflösung. Der Grossteil der Dateigrösse kommt nicht von der Pixelzahl, sondern von der Kompressionsqualität.
Zweitens: WordPress verwendet standardmässig das Format, in dem Sie das Bild hochgeladen haben. Wer JPEGs hochlädt, erhält JPEGs. Modernere Formate wie WebP oder AVIF werden nicht automatisch erzeugt, obwohl sie bei gleicher Qualität deutlich kleiner sind.
Was zu einer guten Bildoptimierung gehört
Das richtige Format wählen
Nicht jedes Format eignet sich für jeden Verwendungszweck:
JPEG ist für Fotos und Bilder mit vielen Farbnuancen geeignet. Es komprimiert verlustbehaftet, also mit minimalen Qualitätsverlusten, die bei mittleren Qualitätsstufen kaum sichtbar sind.
PNG eignet sich für Grafiken mit Transparenz und klaren Kanten, also Logos, Icons, Screenshots. PNGs sind kompressionslos und deshalb oft grösser als JPEGs.
WebP ist der moderne Nachfolger von JPEG und PNG. Ein WebP-Bild ist gegenüber einem vergleichbaren JPEG durchschnittlich 25 bis 35% kleiner. Alle modernen Browser unterstützen WebP.
AVIF ist noch effizienter als WebP, aber die Browser-Unterstützung und die Plugin-Kompatibilität sind noch nicht überall gegeben. Wer auf Nummer sicher gehen will, bleibt bei WebP.
SVG ist für Vektorgrafiken wie Logos und Icons ideal. Ein SVG ist eine Text-Datei, bleibt in jeder Grösse scharf und ist meistens kleiner als ein PNG.
Die richtige Bildgrösse hochladen
Laden Sie keine Bilder in höherer Auflösung hoch als nötig. Wenn Ihr Design ein Bild mit maximal 1200 Pixel Breite anzeigt, reicht eine Bildbreite von 1400 bis 1600 Pixel für hochauflösende Displays. Ein Originalbild mit 4000 Pixel Breite zu laden und es per CSS auf 1200 Pixel zu verkleinern, verschickt trotzdem das volle 4000-Pixel-Bild an den Browser.
Komprimierung mit verlustbehafteten Algorithmen
Viele Bilder können mit modernen Algorithmen 50 bis 70% kleiner gemacht werden, ohne dass der Qualitätsverlust mit blossem Auge erkennbar ist. Ein 500-Kilobyte-JPEG kann mit guter Komprimierung auf 150 Kilobyte reduziert werden. Auf einer Seite mit zehn Bildern spart das 3,5 Megabyte Übertragungsvolumen.
Lazy Loading aktivieren
Lazy Loading bedeutet: Bilder, die sich ausserhalb des sichtbaren Bildschirmbereichs befinden, werden erst geladen, wenn der Nutzer bis dorthin scrollt. Das reduziert die initiale Ladezeit messbar, weil der Browser nicht sofort alle Bilder der Seite laden muss.
WordPress aktiviert Lazy Loading für <img>-Tags seit Version 5.5 automatisch. Prüfen Sie trotzdem, ob Ihr Theme und Ihre Plugins damit kompatibel sind.
Welche Plugins die Arbeit übernehmen
ShortPixel
ShortPixel komprimiert Bilder beim Hochladen automatisch und kann bestehende Bilder rückwirkend optimieren. Es erzeugt optional WebP-Versionen und liefert diese an Browser aus, die WebP unterstützen. Das kostenlose Kontingent umfasst 100 Bilder pro Monat, danach werden Credits benötigt. Für kleine Websites oft ausreichend.
Imagify
Ähnlich wie ShortPixel, aber mit einfacherer Oberfläche. Drei Qualitätsstufen: Normal, Aggressiv und Ultra. Die Aggressiv-Stufe ist für die meisten Fotos ein guter Kompromiss zwischen Qualität und Dateigrösse. Auch Imagify erzeugt WebP-Versionen.
EWWW Image Optimizer
Kostenlos in der Grundversion, keine monatlichen Limits für verlustfreie Komprimierung. Verlustbehaftete Komprimierung und WebP-Konvertierung sind in der kostenlosen Version eingeschränkt. Wer auf kostenlose Optionen angewiesen ist, kommt mit EWWW gut zurecht.
Smush
Populäres Plugin vom Anbieter WPMU Dev. Gute kostenlose Version mit Lazy Loading und verlustfreier Komprimierung. WebP und verlustbehaftete Komprimierung erst in der Pro-Version.
Schritt für Schritt: Bilder auf Ihrer bestehenden Website optimieren
Schritt 1: Messen
Rufen Sie eine repräsentative Seite Ihrer Website bei GTmetrix auf. Im Tab "Waterfall" sehen Sie, welche Ressourcen geladen werden und wie gross sie sind. Sortieren Sie nach Dateigrösse. Wenn die Top-10-Einträge mehrheitlich Bilder sind und einzelne davon über 200 Kilobyte haben, ist das Ihre grösste Baustelle.
Schritt 2: Plugin installieren und konfigurieren
Installieren Sie ein Optimierungs-Plugin Ihrer Wahl. Aktivieren Sie verlustbehaftete Komprimierung in mittlerer Stufe und WebP-Ausgabe. Starten Sie die rückwirkende Optimierung aller bestehenden Bilder in der WordPress Mediathek.
Schritt 3: Bilder vor dem Hochladen vorbereiten
Für neue Bilder gilt: Bereiten Sie Bilder vor dem Hochladen in der richtigen Grösse auf. Das Tool Squoosh (browser-basiert, kostenlos) erlaubt Ihnen, Bilder in WebP zu konvertieren und die Komprimierung visuell zu prüfen, bevor Sie hochladen.
Schritt 4: Nochmals messen
Nach der Optimierung nochmals GTmetrix oder Google PageSpeed Insights aufrufen. Vergleichen Sie das Seitengewicht vorher und nachher. Ein Rückgang von 3 auf 1 Megabyte Gesamtgrösse ist realistisch, wenn viele Bilder auf der Seite unkomprimiert waren.
Was bei grossen Bildmengen zu bedenken ist
Wenn Sie ein Onlineshop oder eine Website mit Hunderten von Produktbildern betreiben, zahlt sich der Aufwand besonders aus. Aber er erfordert auch Aufmerksamkeit beim Prozess.
Rückwirkende Massenoptimierung mit einem Plugin kann je nach Hostingplan lange dauern oder das Serverlimit überschreiten. Viele Plugins erlauben es, die Optimierung in kleinen Batches durchzuführen. Nutzen Sie diese Option, statt alles auf einmal zu starten.
Prüfen Sie nach der Optimierung einige Bilder manuell, ob die Qualität für Ihre Zwecke noch ausreicht. Produktbilder, auf die Nutzer klicken und zoomen, brauchen mehr Qualität als dekorative Hintergrundbilder.
Das Wichtigste in Kürze
Bilder sind die einfachste und wirksamste Stellschraube für die WordPress-Ladezeit. Die drei Massnahmen mit dem grössten Effekt:
Konvertieren Sie Bilder in WebP, wenn möglich. Komprimieren Sie verlustbehaftet mit mittlerer Qualitätsstufe. Laden Sie keine Bilder in höherer Auflösung hoch als nötig.
Ein Optimierungs-Plugin übernimmt davon nach der Einrichtung den Grossteil automatisch. Der initiale Aufwand ist gering, und der Effekt auf Ladezeit und Google-Ranking ist messbar.
