Wer, so wie ich, bereits ungezählte Bilder auf WordPress-Websites hochgeladen hat, der hat sich bestimmt schon des Öfteren gefragt, was er da eigentlich tut. Ist die Auflösung zu hoch? Zu niedrig? Muss ich das Bild irgendwie vorbereiten oder optimieren?

Ja, Bilder in WordPress sollten optimiert werden: in den Abmessungen (Pixel), in der Kompression und im Format. Einen Teil davon erledigt WordPress heute selbst, für den Rest genügt ein einziges Plugin, das am besten auf Ihrem eigenen Server arbeitet. Das Ziel ist eine kleine Datei, der man den Qualitätsverlust nicht ansieht.

Was bedeutet das jetzt im Detail? Was macht WordPress von selbst, und was müssen Sie tun? Das erkläre ich Ihnen in den folgenden Abschnitten, mit einem gemessenen Beispiel von dieser Website.

Muss ich Bilder für die Verwendung in WordPress optimieren?

Bilder in WordPress optimieren, und zwar richtigJa. Bilder sind auf den meisten Seiten der größte Teil dessen, was ein Besucher herunterladen muss. Alles, was auf Ihrer Website zu sehen ist, muss vom Server zum Browser übertragen werden, und ein Foto direkt aus einer Smartphone-Kamera hat schnell mehrere Megabyte. Auf einem langsamen mobilen Netz macht das einen spürbaren Unterschied.

Die Dateigröße eines Bildes hängt an drei Dingen:

  • Abmessungen: wie viele Bildpunkte (Pixel) das Bild hat, z.B. 4000 × 3000 oder 800 × 600
  • Kompression: wie stark die Bilddaten zusammengepackt werden, verlustfrei oder mit sichtbarem Qualitätsverlust
  • Format: JPG, PNG, WebP oder AVIF, die bei gleichem Bild sehr unterschiedlich große Dateien ergeben

An allen drei Stellen kann man ansetzen, ohne dass der Besucher auf seinem Gerät einen Unterschied sieht.

Was WordPress schon selbst erledigt

WordPress nimmt Ihnen heute mehr ab, als viele ältere Anleitungen vermuten lassen:

  • Mehrere Größen pro Bild: Beim Hochladen erzeugt WordPress von jedem Bild verkleinerte Kopien (Vorschaubild, Mittel, Groß und einige mehr). Seit WordPress 4.4 schreibt es diese Größen als Auswahl ins Bild-Tag (srcset), und der Browser lädt die Größe, die zum Bildschirm passt.
  • Sehr große Bilder werden verkleinert: Seit WordPress 5.3 legt WordPress von Bildern, die breiter oder höher als 2560 Pixel sind, eine verkleinerte Fassung an und verwendet diese statt des Originals.
  • Lazy Loading: Seit WordPress 5.5 werden Bilder weiter unten auf der Seite erst geladen, wenn der Besucher in ihre Nähe scrollt. Seit WordPress 6.3 bekommt außerdem das erste große Bild einer Seite Vorrang beim Laden, statt verzögert zu werden. Dafür brauchen Sie kein Plugin mehr.
  • Moderne Formate: WebP-Dateien können Sie seit WordPress 5.8 hochladen, AVIF-Dateien seit WordPress 6.5, jeweils sofern Ihr Server das Format verarbeiten kann.
  • Verarbeitung im Browser: Seit WordPress 7.1 rechnet der Block-Editor in Chrome und Edge die verkleinerten Größen direkt im Browser aus und lädt sie fertig hoch. Firefox und Safari verwenden weiterhin den Server. Am Ergebnis für Ihre Besucher ändert das wenig, es entlastet aber den Server beim Hochladen.

Was WordPress von sich aus nicht tut: Ihre JPG- und PNG-Bilder zusätzlich verlustfrei komprimieren und automatisch WebP-Versionen davon erzeugen und ausliefern. Dafür ist ein Plugin da, dazu gleich mehr.

Wie groß sollten Bilder für die Verwendung in WordPress sein?

Ein Bild muss nicht mehr Pixel haben, als es auf dem größten Bildschirm, der es anzeigt, tatsächlich braucht. Auf dieser Website ist die Textspalte am Desktop rund 750 Pixel breit. Bildschirme mit hoher Pixeldichte (fast alle Smartphones und viele Laptops) zeigen dort bis zu doppelt so viele Bildpunkte, also etwa 1500. Mehr als das bringt im Text keinen sichtbaren Gewinn.

Meine Faustregel daher: Bilder vor dem Hochladen auf höchstens 2000 Pixel an der längsten Seite bringen. Das reicht auch für ein Bild über die volle Breite, und die kleineren Größen erzeugt WordPress selbst. Fotos aus der Kamera mit 4000 oder 6000 Pixeln lade ich nie unverändert hoch. Viele Bildoptimierungs-Plugins können das beim Hochladen automatisch erledigen, so auch das, das ich verwende.

Im Editor wählen Sie im Bild-Block unter Auflösung dann die passende Größe: Groß für ein Bild in der Textbreite, Mittel für ein kleineres Bild neben dem Text. Originalgröße lohnt sich nur, wenn das Bild wirklich so groß angezeigt wird. Wie Bilder in WordPress grundsätzlich eingefügt werden, steht in meinem Artikel Bilder in WordPress, einfach erklärt.

Kompression: verlustfrei oder verlustbehaftet

Neben den Abmessungen entscheidet die Kompression über die Dateigröße. Es gibt zwei Arten:

  • Verlustfrei: Die Datei wird kleiner, das Bild bleibt Pixel für Pixel gleich. Entfernt werden Ballast wie eingebettete Kameradaten (EXIF) und ungünstig gespeicherte Daten. Der Gewinn ist meist bescheiden, aber kostet nichts.
  • Verlustbehaftet: Die Datei wird deutlich kleiner, und es gehen Bildinformationen verloren. Bei vernünftiger Einstellung sieht man das nicht, bei zu starker Kompression schon (verwaschene Flächen, Ränder um Schrift).

WordPress selbst speichert die verkleinerten Größen eines JPG-Bildes bereits verlustbehaftet, mit einer Qualitätsstufe von 82 von 100. Ihr Originalbild lässt es dabei unverändert. Ein gutes Plugin setzt danach an: Es komprimiert verlustfrei nach und erzeugt zusätzlich eine WebP-Fassung, die bei gleichem Aussehen deutlich kleiner ist.

Das passende Bildformat: JPG, PNG, WebP oder AVIF?

Verschiedene Bildformate haben unterschiedliche Stärken. Im Folgenden die gängigsten:

JPG (.jpg)

JPG ist das klassische Format für Fotos und Bilder mit vielen Farben. Es komprimiert verlustbehaftet und erzeugt kleine Dateien bei guter Qualität. Für Fotos, die Sie hochladen, ist JPG nach wie vor die richtige Wahl, auch weil jedes Programm es öffnen kann.

PNG (.png)

PNG speichert verlustfrei und unterstützt Transparenz. Es eignet sich für Logos, Grafiken mit wenigen Farben und Bildschirmfotos mit Text. Für Fotos ist PNG ungeeignet: Die Dateien werden ein Vielfaches größer als bei JPG.

GIF (.gif)

GIF kennt nur 256 Farben und wird heute fast nur noch für kleine Animationen verwendet. Für Fotos und Grafiken sind JPG und PNG besser.

WebP (.webp)

WebP wurde von Google entwickelt und kann sowohl verlustfrei als auch verlustbehaftet komprimieren, mit Transparenz. Bei gleichem Aussehen sind WebP-Dateien deutlich kleiner als JPG oder PNG. Alle aktuellen Browser zeigen WebP an, Safari seit Version 14 (MDN). Die frühere Einschränkung bei der Browserunterstützung ist damit kein Thema mehr.

AVIF (.avif)

AVIF ist das neueste der Formate und komprimiert noch stärker als WebP. Auch AVIF zeigen alle aktuellen Browser an, Safari seit Version 16.4. Der Haken liegt eher auf der Server-Seite: Das Umwandeln braucht mehr Rechenzeit, und nicht jedes Hosting und nicht jedes kostenlose Plugin erzeugt AVIF.

Welches Format für Ihre Website?

Laden Sie Fotos als JPG und Logos oder Grafiken als PNG hoch, und lassen Sie ein Plugin daraus WebP-Versionen erzeugen. Das Plugin liefert jedem Browser die WebP-Datei aus und hält das Original als Rückfall bereit. So bekommt jeder Besucher die kleinste Datei, die sein Browser versteht, und Sie müssen nichts von Hand umwandeln.

Ein gemessenes Beispiel von dieser Website

Das Bild oben in diesem Artikel ist ein JPG mit 1024 × 683 Pixel. Hier die Dateigrößen, wie sie am 10. Oktober 2026 auf dem Server lagen:

  • Die Größe „Mittel“ (300 × 200), so wie WordPress sie erzeugt hat: 29,5 kB
  • Dieselbe Datei, verlustfrei nachkomprimiert: 19,5 kB
  • Die WebP-Fassung davon (Qualität 80): 10,3 kB, also ein Drittel des Ausgangswerts. Diese Datei bekommt Ihr Browser gerade angezeigt.
  • Das Bild in voller Größe (1024 × 683): 154,6 kB, verlustfrei 142,9 kB, als WebP 71,1 kB

Die verlustfreie Nachkompression spart also etwas, den großen Gewinn bringt die WebP-Fassung. Und noch mehr bringt es, gar nicht erst ein 4000 Pixel breites Foto hochzuladen.

Plugins zur Bildoptimierung: lokal oder in der Cloud?

Von Hand lässt sich das alles nicht dauerhaft erledigen. Hier greifen wir, wie bei jeder Funktionserweiterung in WordPress, auf ein Plugin zurück. Die bekannten Bildoptimierungs-Plugins arbeiten auf eine von zwei Arten, und der Unterschied ist wichtiger als die Liste der Funktionen:

  • Lokal: Das Plugin bearbeitet die Bilder mit Programmen auf Ihrem eigenen Server. Die Bilder verlassen den Server nicht, es gibt kein Kontingent, und es kommt kein weiterer Dienstleister hinzu.
  • In der Cloud: Das Plugin schickt jedes Bild an die Server des Anbieters, dort wird es komprimiert und zurückgeschickt. Das funktioniert auf jedem Hosting, ist aber im kostenlosen Tarif meist auf eine Datenmenge pro Monat begrenzt, und Ihre Bilder gehen dabei an einen weiteren Dienstleister.

Verwenden Sie nur ein Bildoptimierungs-Plugin. Zwei Plugins, die dieselben Bilder nacheinander bearbeiten, sparen nichts mehr ein, können sich aber gegenseitig ins Gehege kommen.

Meine Wahl: EWWW Image Optimizer im lokalen Modus

Auf meinen Websites, auch auf dieser, verwende ich EWWW Image Optimizer. Es ist kostenlos und arbeitet lokal, mit Programmen wie jpegtran und cwebp auf dem eigenen Server. Dafür braucht es die PHP-Funktion exec(). Ist diese bei Ihrem Hosting gesperrt, weicht EWWW laut eigener Beschreibung auf seinen Cloud-Dienst aus. Dann verlassen die Bilder Ihren Server also doch. Fragen Sie deshalb Ihren Hosting-Anbieter, ob exec() auf Ihrem Server verfügbar ist.

Meine Einstellungen in Worten:

  • JPG, PNG und GIF verlustfrei komprimieren
  • WebP-Versionen erzeugen (Qualität 80) und über das HTML-Element <picture> ausliefern, mit dem Original als Rückfall
  • Neue Bilder beim Hochladen auf höchstens 2000 × 2000 Pixel verkleinern
  • Kameradaten (EXIF) entfernen
  • Das eigene Lazy Loading des Plugins aus, weil WordPress das bereits selbst macht
  • Bildgrößen, die das Theme nie verwendet, gar nicht erst erzeugen lassen

Beim ersten Durchlauf über die bestehende Mediathek lege ich eine Sicherung der Originale an. Danach schalte ich sie ab und lösche den Sicherungsordner wieder, weil er sonst in jeder Website-Sicherung mitwandert.

Imagify: die bekannte Cloud-Lösung

Das WordPress-Plugin ImagifyImagify stammt vom Team hinter dem Caching-Plugin WP Rocket und ist eines der meistverwendeten Bildoptimierungs-Plugins. Es arbeitet in der Cloud: Laut Anbieter werden die Bilder auf den Servern von Imagify komprimiert und zurückgeschickt. Dafür erzeugt es im kostenlosen Tarif sowohl WebP als auch AVIF und funktioniert auf jedem Hosting.

Die Einrichtung ist kurz:

  1. Plugin über Plugins → Plugin hinzufügen suchen, installieren und aktivieren.
  2. Ein kostenloses Konto mit Ihrer E-Mail-Adresse anlegen. Sie bekommen einen API-Schlüssel, den Sie in den Plugin-Einstellungen eintragen.
  3. Die Komprimierung wählen: Standardmäßig sucht Imagify das Verhältnis von Qualität und Dateigröße selbst aus („Smart Compression“). Wer keinerlei Qualitätsverlust will, stellt auf verlustfrei um. Außerdem legen Sie fest, welche der von WordPress erzeugten Bildgrößen mitoptimiert werden.
  4. Die bestehende Mediathek einmal im Ganzen optimieren lassen. Neue Bilder optimiert Imagify danach beim Hochladen automatisch.

Zwei Dinge sollten Sie wissen. Erstens ist der kostenlose Tarif laut Anbieter auf 20 MB pro Monat begrenzt, das sind rund 200 Bilder. Jede mitoptimierte Bildgröße zählt dabei mit. Deshalb lohnt es sich gerade hier, Bilder schon vor dem Hochladen zu verkleinern und nur die Größen optimieren zu lassen, die Ihr Theme tatsächlich verwendet. Zweitens legt Imagify standardmäßig eine Sicherung der Originale auf Ihrem Server an. Die wächst mit jeder Optimierung und landet in jeder Website-Sicherung.

Für eine kleine Website mit wenigen neuen Bildern im Monat ist Imagify eine bequeme Lösung. Erlaubt Ihr Hosting den lokalen Modus, ziehe ich EWWW vor, weil dann nichts den Server verlassen muss und es kein monatliches Limit gibt.

Bild-Optimierung per Content-Delivery-Network (CDN)

Ein Content-Delivery-Network (CDN) speichert Kopien Ihrer Bilder und anderer Dateien auf Servern in vielen Ländern und liefert sie vom nächstgelegenen Standort aus. Das verkürzt die Wege und entlastet Ihren eigenen Server. Diese Website läuft zum Beispiel hinter Cloudflare, ein anderer bekannter Anbieter ist Amazon CloudFront.

Ein CDN ersetzt die Bildoptimierung aber nicht automatisch: Es liefert zunächst genau die Datei aus, die auf Ihrem Server liegt, nur schneller. Komprimieren und Umwandeln ist bei den CDN-Anbietern eine eigene Funktion, die oft extra kostet. Bei Cloudflare zum Beispiel gibt es die Bildkomprimierung „Polish“ erst ab dem kostenpflichtigen Pro-Tarif. Optimieren Sie die Bilder deshalb auf Ihrer Website, und lassen Sie das CDN das tun, was es am besten kann: ausliefern.

Ausnahmen für die Bild-Optimierung auf Websites

Wie immer gibt es auch hier Ausnahmen. Wenn Bilder der Kern der Website sind, etwa bei einem Fotografen, einem Designer oder einem Ferienhotel, dürfen sie größer sein und weniger stark komprimiert werden. Verlustfreie Kompression und WebP-Versionen kosten aber auch dort keine sichtbare Qualität, und WordPress lädt Bilder weiter unten auf der Seite ohnehin erst, wenn der Besucher dorthin scrollt.

Logos und Bildschirmfotos mit Schrift vertragen verlustbehaftete Kompression schlecht. Lassen Sie diese als PNG verlustfrei, dann bleiben Kanten und Text scharf.

Fazit und weiterführende Links

Optimieren Sie die Bilder auf Ihrer Website unbedingt (das gilt übrigens auch, wenn Sie gar nicht mit WordPress arbeiten). In Kurzform:

  1. Fotos vor dem Hochladen auf höchstens 2000 Pixel an der längsten Seite verkleinern, oder das ein Plugin beim Hochladen erledigen lassen.
  2. Im Editor die passende Bildgröße wählen, nicht automatisch die Originalgröße.
  3. Ein einziges Bildoptimierungs-Plugin verwenden, das verlustfrei komprimiert und WebP-Versionen ausliefert, wenn möglich lokal auf Ihrem Server.
  4. Das Lazy Loading WordPress überlassen.

Bilder sind ein Teil der Optimierung einer Website. Was sonst noch dazugehört, von Caching bis zur Messung mit PageSpeed Insights, steht in meinem Artikel Optimierung in WordPress, einfach erklärt. Und zu Bildern in WordPress allgemein ist ein guter Ausgangspunkt mein Artikel Bilder in WordPress, einfach erklärt.

Feedback zu diesem Artikel

Über Feedback zu diesem Artikel freue ich mich, z.B. ob Sie die Bilder auf Ihrer Website bereits optimiert anbieten und wie genau. Falls Ihnen der Artikel nicht geholfen hat, kommentieren Sie bitte unbedingt ein paar Zeilen zu jenen Informationen, die Ihnen hier noch fehlen.

Oder lassen Sie unten einen allgemeinen Kommentar für mich da, ob Lob, Kritik oder eine Frage, die ich hier nicht beantwortet habe, ich bin immer für Hinweise und Anregungen dankbar, die diesen Artikel verbessern. Bitte beachten Sie: Um Spam zu vermeiden, lese ich jeden Kommentar persönlich und gebe ihn dann erst frei. Seien Sie also nicht überrascht, wenn es ein Bisschen dauert, bis er zu sehen ist. Danke für Ihr Verständnis!