Bilder für WordPress optimieren: der komplette Ratgeber

Ein typischer Blogbeitrag oder eine Produktseite enthält eine Handvoll Bilder, und jedes davon kann mehr wiegen als der gesamte Text, Code und alle Stile der Seite zusammen. Schwere Bilder wirken sich auf vier Arten auf Ihre Website aus.

• Geschwindigkeit und Nutzererlebnis: Große Dateien verzögern den Moment, in dem die Seite fertig aussieht, besonders bei mobilen Verbindungen. Langsame Seiten verlieren Besucher, bevor diese ein Wort gelesen haben.
• Sichtbarkeit in der Suche: Google nutzt Signale zur Seitenerfahrung wie den Largest Contentful Paint, und ein großes Titelbild ist oft das Element, das diesen Wert bestimmt.
• Hosting-Kosten und -Grenzen: Jeder Besucher lädt die Dateien herunter, schwere Bilder verbrauchen also Bandbreite und können günstige Hosting-Tarife an ihre Grenzen bringen.
• Wartung: Eine Mediathek voller überdimensionierter Originale macht Backups, Umzüge und Staging-Kopien langsamer und größer.

Die gute Nachricht ist, dass Bilder auch der am leichtesten zu verbessernde Teil einer Website sind. Ein paar Gewohnheiten beim Hochladen halbieren oft das Gewicht einer Seite.

Aktuelle Versionen von WordPress übernehmen mehrere Dinge automatisch:

• Es erstellt kleinere Kopien jedes Bildes, typischerweise mit etwa 150, 300, 768, 1024 und 1536 Pixeln Breite, und fügt ein srcset-Attribut hinzu, damit Browser für jeden Bildschirm die passendste auswählen können.
• Es verkleinert sehr große Originale, mit einem Schwellenwert von 2560 Pixeln.
• Es fügt Bildern loading="lazy" hinzu, sodass Bilder unterhalb des ersten Bildschirms später geladen werden.
• Es akzeptiert WebP-Uploads, und neuere Versionen akzeptieren auch AVIF.

Diese Funktionen sind nützlich, haben aber eine Grenze: WordPress geht von der Datei aus, die Sie hochladen. Ist sie unkomprimiert und riesig, ist jede erzeugte Kopie schwerer als nötig. Ein Theme, das in einem kleinen Platz das Bild in voller Größe ausgibt, verschwendet ebenfalls Bandbreite, und ein Plugin, das alles verzögert lädt, kann Ihr wichtigstes Bild ausbremsen.

Es gibt keinen einzigen besten Ansatz. Die meisten Websites fahren mit einer Mischung am besten. So schneiden sie im Vergleich ab.

Manuelle Optimierung

• Vorteile: Sie legen Größe und Qualität genau fest, auf Ihrem Server läuft nichts, und Sie sehen das Ergebnis, bevor es online geht.
• Nachteile: Sie hilft nur bei Bildern, die Sie selbst bearbeiten, behebt also keine bestehende Mediathek und setzt voraus, dass alle, die veröffentlichen, dieselben Schritte befolgen.

Plugins

• Vorteile: Sie können Hunderte alter Bilder verarbeiten und arbeiten weiter, ohne dass jemand daran denken muss.
• Nachteile: Jedes Plugin bringt Code, Einstellungen und Updates mit, die gepflegt werden müssen. Prüfen Sie, ob es Ihre Originale behält, ob sich Änderungen rückgängig machen lassen und ob Bilder an einen Drittanbieter gesendet werden, was für den Datenschutz und für Kundenprojekte wichtig ist.

CDNs und Bilddienste

• Vorteile: Sie wandeln Formate um und skalieren spontan, sodass jeder Besucher eine passende Datei erhält, und beschleunigen die Auslieferung.
• Nachteile: Sie kosten Geld, schaffen eine Abhängigkeit und müssen korrekt eingerichtet werden, damit Caching und Bild-URLs nicht kaputtgehen.

Ein vernünftiger Standard: Neue Bilder vor dem Hochladen manuell optimieren und ein Plugin oder CDN nur für die bereits vorhandene Mediathek einsetzen.

Sie müssen nicht jedes alte Bild reparieren. Beginnen Sie mit den wichtigsten.

• Finden Sie die größten Übeltäter. Lassen Sie Ihre Startseite und die fünf wichtigsten Beiträge durch PageSpeed Insights laufen und notieren Sie die Dateien, die als zu groß oder in veraltetem Format markiert werden.
• Ersetzen Sie diese Dateien zuerst. Laden Sie das Original herunter, skalieren und komprimieren Sie es, laden Sie es erneut hoch und tauschen Sie es aus. Ein paar schwere Bilder zu ersetzen bringt oft mehr als die Massenumwandlung der ganzen Mediathek.
• Setzen Sie ein Massenwerkzeug mit Bedacht ein. Wenn Sie ein Plugin nutzen, testen Sie es an einer Kopie Ihrer Website, vergewissern Sie sich, dass Originale behalten werden, und prüfen Sie danach einige Seiten auf kaputte oder unscharfe Bilder.
• Erzeugen Sie die Größen nach einem Theme-Wechsel neu. Ein neues Theme kann andere Bildgrößen verwenden, daher müssen Vorschaubilder womöglich neu generiert werden.

• Kamera-Originale hochladen. Ein Foto mit 6000 Pixeln in einer 800-Pixel-Spalte verschwendet den Großteil seiner Daten.
• Dieselbe Datei wiederholt komprimieren. Jedes verlustbehaftete Speichern kostet ein wenig mehr. Gehen Sie immer vom Original aus. Siehe verlustbehaftete und verlustfreie Komprimierung.
• Das Titelbild verzögert laden. Das erste große Bild sollte sofort laden. Der Ratgeber zum verzögerten Laden erklärt, warum.
• PNG für Fotos verwenden. PNG ist für Grafiken. Ein als PNG gespeichertes Foto kann zehnmal größer sein als ein JPG.
• Alternativtext und sinnvolle Dateinamen weglassen. Das sind kleine Aufgaben mit echtem Nutzen für Barrierefreiheit und Suche.

Messen Sie vorher und nachher, damit Sie wissen, was Sie gewonnen haben. Lassen Sie dieselben Seiten durch PageSpeed Insights oder Lighthouse laufen und vergleichen Sie die Gesamtgröße der Bilder und die Zeit des Largest Contentful Paint. Der Core-Web-Vitals-Bericht in der Google Search Console zeigt, was echte Besucher über Wochen erleben, geben Sie ihm also Zeit zur Aktualisierung. Eine umfassendere Liste finden Sie in der Checkliste zur Bildoptimierung für Websites und im Ratgeber Wie Bilder die Core Web Vitals beeinflussen.