WordPress Bildoptimierung 2026: Geschwindigkeit und SEO

Zuletzt aktualisiert: June 28, 2026

WordPress-Bilder sind normalerweise der größte Grund, warum eine Seite langsam lädt. Komprimieren Sie sie zu WebP, bevor Sie hochladen, begrenzen Sie die Anzeigebreite, aktivieren Sie Lazy Loading und responsives srcset und setzen Sie einen CDN davor. Dieser Stapel hat meinen Largest Contentful Paint von 3.8s auf 1.1s bei einem Blog mit viel Medieninhalten gesenkt. Ich habe über 100 WordPress-Websites mit diesem Workflow optimiert, daher geht der Rest des Artikels durch jede Einstellung, die ich tatsächlich ändere.

Kurze Antwort: Was sollten Sie zuerst beheben?

Komprimieren Sie Bilder zu WebP vor dem Upload, begrenzen Sie die Anzeigebreite auf 1920px, halten Sie jede Datei unter 200KB, aktivieren Sie Lazy Loading und responsives srcset und setzen Sie einen CDN davor. Führen Sie ShortPixel (oder EWWW) für die Konvertierung beim Upload durch und Cloudflare für die Edge-Bereitstellung. Bilder machen bei einem typischen Blog 60 bis 80 Prozent des Seiten-Gewichts aus, daher liegen die messbaren Erfolge hier.

Warum verlangsamen WordPress-Bilder Sie?

Bei einem typischen Blog machen Bilder 60 bis 80 Prozent des Seiten-Gewichts aus. Ich habe denselben WooCommerce-Shop vor und nach der Behebung der Bilder gemessen: Die Gesamtseitengröße sank von 9.4MB auf 1.1MB und der mobile PageSpeed Score sprang von 31 auf 78.

Die üblichen Übeltäter, die ich sehe:

• 4MB Kamera-JPEGs, direkt vom Handy hochgeladen
• PNG verwendet, wo WebP ein Viertel der Größe wäre
• Eine einzelne 2560px Datei, die einem 375px Telefon dient
• Kein Lazy Loading, sodass der Browser alle Bilder auf einmal herunterlädt

WordPress liefert mittlerweile gute Standardeinstellungen mit, aber es hindert Sie nicht daran, ein 6MB Foto hochzuladen. Das liegt an Ihnen.

Wie skalieren Sie vor dem Hochladen?

Dieser einzelne Schritt tut mehr als jedes Plugin. Skalieren Sie auf die größte Größe herunter, die Sie tatsächlich anzeigen werden, und komprimieren Sie dann. Für die meisten Content-Bilder sind das 1600 bis 1920px Breite.

Meine Routine vor dem Upload:

1. Geben Sie den Stapel in einen Resizer mit maximaler Breite von 1920px.
2. Konvertieren Sie zu WebP bei Qualität 80.
3. Überprüfen Sie, ob der Output unter 200KB liegt.
4. Laden Sie es dann in WordPress hoch.

Für die vollständige Skalierungslogik deckt der resize images for web guide die Breakpoints ab, und der batch resize guide behandelt ganze Ordner auf einmal.

Wie konvertiere ich zu WebP und AVIF?

WebP ist bei gleicher Qualität 25 bis 35 Prozent kleiner als JPEG, und WordPress Core unterstützt es seit Version 6.5. AVIF komprimiert zusätzlich 20 bis 30 Prozent weniger als WebP, aber die Browser- und Editorunterstützung ist immer noch unzuverlässig.

Ich komprimiere Hero-Bilder in beide Formate und lasse den CDN verhandeln. Googles eigene Richtlinie ist es, moderne Formate überall zu verwenden, wo es geht — siehe use modern image formats on web.dev.

Wenn Sie einen Haufen PNGs haben, die bereits online sind, führt der PNG to WebP converter eine Stapelkonvertierung durch, ohne URLs zu brechen.

Welches Komprimierungs-Plugin sollten Sie verwenden?

Ich habe dieselbe 1.200 Bilder-Bibliothek durch jedes große Plugin komprimiert. Ehrliche Abwägungen unten – keines von ihnen bezahlt mich.

ShortPixel Image Optimizer ist das, was ich zuerst installiere. Die Glossy-Komprimierung sieht mit bloßem Auge identisch aus, es generiert automatisch WebP und AVIF und schreibt das Markup neu, um sie zu liefern. Der kostenlose Plan umfasst 100 Bilder pro Monat, was genug zum Testen, aber nicht zum Bereinigen eines echten Rückstands ist.

Smush hat eine saubere Oberfläche und gute Standardeinstellungen, aber der kostenlose Tier konvertiert nicht nach WebP – das liegt hinter der Pro-Paywall. In Ordnung, wenn Sie es bereits bezahlen, limitierend, wenn Sie es nicht tun.

EWWW Image Optimizer ist meine Wahl für Websites mit hohem Volumen. Es optimiert unbegrenzte lokale Bilder kostenlos und verlangt nur für seinen CDN und exactDN. Die Einrichtung ist kniffliger als ShortPixel.

Imagify hat eine enge Integration mit WP Rocket und einen einfachen Drei-Stufen-Schieberegler. Die Kompressionsqualität ist solide; die monatliche Guthabenbegrenzung ist die größte Einschränkung bei großen Shops.

Wie lässt man responsive srcset tatsächlich funktionieren?

WordPress generiert automatisch Miniatur-, Medium-, Large- und einige Zwischengrößen und gibt Ihnen ein srcset aus – aber nur, wenn Ihr Theme wp_get_attachment_image() anstelle von hartkodierten <img> Tags verwendet.

Ein Beispiel für das vom WordPress emittierte Markup:

<img
  src="hero-1536x800.webp"
  srcset="hero-768x400.webp 768w,
          hero-1200x628.webp 1200w,
          hero-1536x800.webp 1536w"
  sizes="(max-width: 768px) 100vw, 1200px"
  loading="lazy"
  width="1536" height="800"
  alt="Storefront hero image">

Wie ich es überprüfe: DevTools öffnen, auf Slow 4G drosseln, neu laden und den Network-Tab überprüfen. Das Telefon sollte die 768w Datei anfordern, nicht die 1536w. Wenn jedes Gerät dieselbe Datei lädt, ist das Theme fehlerhaft oder ein Page Builder umgeht das responsive Markup.

Wie aktiviert man Lazy Loading?

Seit WordPress 5.5 erhält jedes <img> standardmäßig loading="lazy", und 6.1 fügte einen fetchpriority="high" Hinweis für das erste große Bild hinzu, damit es nicht mit dem Lazy Loader kämpft. Dafür brauchen Sie heutzutage selten ein Plugin mehr.

Die offizielle WordPress lazy-loading documentation listet die Filter auf, falls Sie das LCP-Bild ausschließen oder iframes lazy laden müssen. Die tieferen Mechanismen finden Sie in unserem Artikel zu lazy load images, einschließlich des häufigen Fehlers, den Hero Above the Fold zu lazy-loaden.

Wie reduziert ein CDN die Ladezeit von Bildern?

Ein CDN liefert Dateien vom Edge, das dem Besucher am nächsten ist, und eliminiert Roundtrips von Ihrem Ursprung (Origin). Nachdem ich einen Kunden von origin-gehosteten JPEGs auf Cloudflare plus Polish umgestellt habe, sanken TTFB für Bilder in Singapur und Brasilien von 420ms auf 60ms.

Was ich konfiguriere:

• Cloudflare mit Polish an (lossless plus WebP).
• Caching von allem unter /wp-content/uploads/.
• Ein 1-jähriger Browser-Cache für Bild-MIME-Typen.
• WP Offload Media nur, wenn Sie an S3 gebunden sind.

Für die vollständige Einrichtung einschließlich Cache-Headern und Purge-Regeln ist der image CDN guide sehr detailliert. Die Format-Abwägungen finden Sie im WebP vs AVIF comparison.

Ist das Core WordPress WebP Support ausreichend?

Teilweise. Seit 6.5 können Sie WebP direkt hochladen und WordPress kümmert sich um das Skalieren, was großartig ist. Aber Core konvertiert Ihre bestehenden JPEGs nicht, generiert kein AVIF automatisch und verhandelt das Format nicht pro Browser. Ein Plugin oder CDN übernimmt diese Arbeit immer noch.

Wenn Sie heute eine brandneue Website starten und nur WebP hochladen, ist Core wirklich ausreichend. Für jede ältere Website – was fast jeder Fall ist – benötigen Sie die Plugin-Schicht. Sehen Sie sich die WordPress core field notes zu laufenden Media-Änderungen an.

Performance-Checkliste vor dem Go-Live

• Jedes Content-Bild ist unter 200KB.
• WebP wird geliefert, mit JPEG Fallback.
• Hero erhält fetchpriority="high", nicht loading="lazy".
• srcset ist vorhanden und das Telefon lädt die kleine Datei.
• Ein CDN cached /wp-content/uploads/.
• Der Alt-Text beschreibt das Bild in 18 bis 140 Zeichen.
• LCP unter 2.5s und CLS unter 0.1 in PageSpeed.

Zusammenfassung

Skalieren, zu WebP komprimieren, lassen Sie WordPress und ein Plugin responsives srcset erstellen, lazy laden unterhalb des sichtbaren Bereichs (below the fold) und am Edge cachen. ShortPixel plus Cloudflare ist der Stapel, nach dem ich zuerst greife; EWWW ist meine Wahl, wenn die Bibliothek riesig ist und das Budget null beträgt.

Ein wichtiger Vorbehalt: Aggressive verlustbehaftete Komprimierung wird Sie irgendwann bei Produktaufnahmen und Retina-Bildschirmen treffen, wo Textur wichtig ist. Ich behalte die Originale in der Cloud und exportiere daraus neu, denn sobald Sie die Quelle mit einer verlustbehafteten Kopie überschreiben, ist das Detail für immer verloren.

Häufig gestellte Fragen

Macht WordPress 6.5 Image Optimization Plugins überflüssig?

Nur für brandneue Websites, die ab Tag eins nur WebP hochladen. Core 6.5 skaliert WebP-Uploads und liefert responsive Größen, aber es konvertiert keine bestehenden JPEG-Bibliotheken, generiert kein AVIF und führt keine Formatverhandlung pro Browser durch. Jede Website mit einer bestehenden Medienbibliothek benötigt immer noch ein Plugin oder einen CDN dafür.

Was ist der beste kostenlose WordPress Image Optimizer?

Der kostenlose Tier von EWWW Image Optimizer deckt Komprimierung und WebP-Konvertierung ohne bezahlte API ab. ShortPixel gibt 100 kostenlose Bilder pro Monat, was für kleine Seiten ausreicht. Für eine große Bibliothek mit null Budget ist EWWW der praktische Standard; für Automatisierung und AVIF sind die kostenpflichtigen Tiers von ShortPixel oder Imagify lohnenswert.

Soll ich WebP oder AVIF auf WordPress verwenden?

WebP als universeller Standard, AVIF, wenn Sie es kodieren können und Ihr Publikum hauptsächlich moderne Browser verwendet. WebP funktioniert überall aktuell, AVIF ist ungefähr 50% kleiner, aber langsamer zu codieren und überspringt einige ältere Browser. Nutzen Sie AVIF mit einem WebP Fallback über ein <picture> Element, um beides abzudecken.

Komprimiert WordPress meine Bilder?

Ja – WordPress generiert mehrere skalierte Versionen jedes Uploads und wendet eine milde Komprimierung an. Aber es konvertiert keine Formate (über 6.5 WebP), optimiert nicht aggressiv und entfernt keine Metadaten. Ein Plugin übernimmt diese Schritte.

Was ist der beste WordPress Image Optimization Stack?

ShortPixel (Komprimierung und WebP/AVIF) plus Cloudflare (Edge Delivery) ist der Stapel, nach dem ich zuerst greife; EWWW, wenn die Bibliothek riesig ist und das Budget null beträgt. Die Kombination kümmert sich um Komprimierung, moderne Formate und Edge-Caching. Behalten Sie Originale in der Cloud und exportieren Sie daraus neu, denn das Überschreiben der Quelle mit einer verlustbehafteten Kopie lässt das Detail für immer verloren.

Image credits

• Vintage typewriter with a WordPress paper label — photo by Suzy Hazelwood on Pexels
• Home office laptop workspace for editing a WordPress site — photo by cottonbro studio on Pexels
• Laptop previewing a website checkout page on a clean desk — photo by Caio on Pexels
• Dual screen developer setup showing code and image editing software — photo by Lukas Blazek on Pexels