Der größte Teil der heruntergeladenen Datenmenge einer durchschnittlichen Website entfällt auf Bilder, weshalb die Bildoptimierung die einfachste und wirksamste Methode zur Beschleunigung darstellt. Ein mit einem Smartphone aufgenommenes Foto mit einer Größe von 5 MB kann in einem Blogbeitrag allein schon das Laden über das Mobilfunknetz um mehrere Sekunden verlangsamen, während eine gut aufbereitete Version mit einer Größe von 100–200 KB auf dem Bildschirm genauso gut aussieht.

In dieser Anleitung gehen wir darauf ein, welches Bildformat Sie wann verwenden sollten, wie Sie die Bilder vor dem Hochladen vorbereiten, was WordPress dabei automatisch übernimmt, welche Plugins hilfreich sind, wie Sie das verzögerte Laden und das wichtigste Bild (LCP) handhaben und worauf Sie bei der Bild-SEO achten sollten. Die meisten dieser Tipps gelten für jede Website, nicht nur für WordPress.

Warum ist das wichtig?

• Geschwindigkeit: Große Bilder verlangsamen das Laden, insbesondere auf Mobilgeräten. Unter den Google Core Web Vitals-Kennzahlen ist der „Largest Contentful Paint“ (LCP) – also die Ladezeit des größten sichtbaren Elements – auf den meisten Websites ein Bild; daher führt die Bildoptimierung zu einer unmittelbaren Verbesserung.
• Layout-Stabilität: Bilder ohne festgelegte Größe lassen den Text beim Laden „springen“; dies wird durch den Cumulative Layout Shift (CLS)-Indikator gemessen.
• Speicherplatz und Traffic: Kleinere Bilder beanspruchen weniger Speicherplatz und verursachen weniger Traffic, und auch die Sicherungen sind kleiner.
• SEO: Eine schnellere Seite sorgt für ein besseres Nutzererlebnis, und Bilder mit aussagekräftigen Namen und Alternativtext lassen sich auch über die Bildersuche finden.

Welches Format sollten Sie wählen?

Format	Wozu dient das?	Anmerkung
AVIF	Fotos – die kleinste Dateigröße	Wird von allen modernen Browsern unterstützt; kann seit WordPress 6.5 hochgeladen werden, sofern das Server-Bildverzeichnis dies unterstützt
WebP	Fotos und Grafiken, auch mit Transparenz	Die Dateigröße ist in der Regel um 25–35 % geringer als bei JPEG, und alle modernen Browser unterstützen dieses Format.
JPEG	Fotos	Universell einsetzbar, aber größer als WebP und AVIF
PNG	Screenshots, Grafiken mit scharfen Kanten, Transparenz	Für Fotos zu groß; lässt sich in der Regel durch WebP ersetzen
SVG	Logos, Symbole, einfache Grafiken	Vektorgrafik, die in jeder Größe scharf und kompakt bleibt; das Hochladen wird aus Sicherheitsgründen nur aus geprüften Quellen empfohlen
GIF	–	Auch für Animationen eignet sich ein kurzes MP4- oder WebM-Video besser

Die Faustregel lautet: WebP (oder AVIF) für Fotos, SVG für Logos und WebP oder PNG für Screenshots. Wenn Sie sich unsicher sind, ist WebP eine gute Standardwahl.

Vorbereitungen vor dem Hochladen

1. Passen Sie die Größe an. Der inhaltliche Teil eines Blogbeitrags ist in der Regel 700–1200 Pixel breit; ein Header-Bild in voller Breite ist 1920 Pixel breit. Laden Sie ein 6000-Pixel-Foto aus einer Kamera niemals in Originalgröße hoch.
2. Komprimieren Sie Ihre Bilder. Bei den meisten Fotos ist eine Qualität von 75–85 % (bei JPEG oder WebP) für das bloße Auge nicht vom Original zu unterscheiden, die Dateigröße beträgt jedoch nur einen Bruchteil. Ein guter Richtwert für ein Inhaltsfoto liegt bei 100–200 KB, für ein großes Header-Bild bei 200–400 KB.
3. Schneiden Sie alles Unnötige heraus: Ein kleinerer Bildausschnitt bedeutet auch eine kleinere Datei.
4. Entfernen Sie die Metadaten (EXIF): Kameradaten und GPS-Koordinaten vergrößern die Datei unnötig und stellen zudem ein Datenschutzrisiko dar.
5. Verwenden Sie aussagekräftige Dateinamen: Anstelle von „budapest-iroda-tárgyaló.webp“ beispielsweise „budapest-iroda-targyalo.webp“ ohne Akzente, nicht „IMG_4567.jpg“.

Tools: Im Browser Squoosh (das kostenlose Tool von Google) und TinyPNG (zu dem es einen eigenen Artikel gibt), auf dem Desktop GIMP oder die Funktion „Für das Web exportieren“ in Photoshop sowie ImageMagick für die Stapelverarbeitung vieler Bilder.

Was macht WordPress von selbst?

• Für jedes hochgeladene Bild werden mehrere Größen generiert (Miniaturansicht, mittel, groß), und mithilfe des „srcset“-Attributs lädt der Browser die für das Display geeignete Größe herunter.
• Verkleinert zu große Bilder: Bei Bildern, die breiter als 2560 Pixel sind, wird eine verkleinerte Version verwendet (das Original bleibt erhalten).
• Lazy Loading: Bilder, die sich außerhalb des sichtbaren Bereichs befinden, werden automatisch mit dem Attribut „loading="lazy"“ versehen, sodass sie erst geladen werden, wenn der Besucher dorthin scrollt.
• Priorität des Hauptbildes: Beim ersten, vermutlich größten Bild wird das verzögerte Laden übersprungen und es wird mit der Angabe „fetchpriority="high"“ vorrangig geladen.
• Abmessungen: Die Attribute „width“ und „height“ werden angegeben, wodurch das Springen des Layouts verringert wird.
• WebP und AVIF: WordPress unterstützt WebP und seit Version 6.5 auch AVIF, sofern die Bildbibliothek des Servers (Imagick oder GD) dies unterstützt.

Was nicht automatisch erfolgt: die Komprimierung der hochgeladenen Bilder und deren Konvertierung in ein neues Format. Hierfür sind die Plugins vorgesehen.

Plugins zur Bildoptimierung

Plugin	Merkmale
ShortPixel	Cloud-basierte Komprimierung, WebP/AVIF, gebündelte Optimierung bestehender Bilder; mit monatlichem Gratis-Kontingent
Imagify	Einfache Handhabung, drei Komprimierungsstufen, WebP/AVIF
EWWW Image Optimizer	Sie können die Daten direkt auf dem Server komprimieren, sodass kein externes Kontingent erforderlich ist
Smush	Kostenlose Basisversion mit verlustfreier Komprimierung; die erweiterten Funktionen sind kostenpflichtig

Jedes dieser Programme ist in der Lage, bereits hochgeladene Bilder nachträglich zu optimieren (Stapelverarbeitung). Einige Tipps:

• Verwenden Sie ein Plugin, und falls Ihr Caching-Plugin ebenfalls Bilder optimiert, deaktivieren Sie diese Funktion dort.
• Behalten Sie das Original bei (die meisten Plugins bieten diese Option an), damit Sie es später wiederherstellen können.
• Bei Shared Hosting kann die lokale Verarbeitung bei einer großen Anzahl von Bildern das CPU-Limit Ihres Kontos erreichen; Cloud-basierte Plugins vermeiden dies, oder führen Sie die Stapelverarbeitung in kleineren Chargen während Zeiten mit geringem Datenverkehr durch.
• Die Bereitstellung von WebP/AVIF kann über das <picture>-Element oder über die .htaccess-Regeln des Servers erfolgen; falls Sie ein CDN nutzen, prüfen Sie bitte, welche Methode unterstützt wird.

Video: Image optimization (WordPress, auf Englisch)

Lazy Loading und das LCP-Bild

Lazy Loading beschleunigt das Laden von Bildern unterhalb der Scrollgrenze, doch das Hauptbild (Hero-Bild, hervorgehobenes Bild) sollten Sie niemals per Lazy Loading laden: Es muss so früh wie möglich angezeigt werden, da sich sonst der LCP-Wert verschlechtert. WordPress handhabt dies standardmäßig gut, doch manche WordPress-Themes, Page-Builder oder Plugins wenden das Lazy Loading auf alle Bilder an. Überprüfen Sie dies im PageSpeed Insights-Bericht: Wenn Sie die Warnung „Largest Contentful Paint image was lazily loaded“ sehen, deaktivieren Sie das Lazy Loading für das erste Bild.

Weitere Tipps zum LCP-Bild:

• soll so klein wie möglich sein (WebP oder AVIF, angemessene Größe),
• Es soll nicht als Hintergrundbild über CSS geladen werden, sondern als <img>-Element,
• Verwenden Sie anstelle eines langsamen Sliders ein einziges statisches Bild.

CDN

Ein Content-Delivery-Netzwerk (CDN) stellt Bilder von einem Server bereit, der sich in der Nähe des Besuchers befindet, und viele CDNs sind in der Lage, die Bilder während der Übertragung in der Größe anzupassen und in das WebP-/AVIF-Format zu konvertieren. Dies ist besonders nützlich, wenn viele Ihrer Besucher aus weiter entfernten Regionen kommen oder Sie eine große Anzahl an Bildern hochladen. In unserer CDN-Anleitung erfahren Sie, wie Sie dies einrichten können.

Bild-SEO und Barrierefreiheit

• Alternativtext (Alt): Beschreiben Sie kurz, was auf dem Bild zu sehen ist. Für Besucher, die einen Screenreader verwenden, stellt dies den Inhalt des Bildes dar, während es für Suchmaschinen das wichtigste Signal ist. Bei rein dekorativen Bildern kann dieses Feld leer gelassen werden.
• Dateiname: beschreibend, ohne Akzente, durch Bindestriche gegliedert.
• Bildunterschrift und Begleittext: Der Text neben dem Bild hilft Suchmaschinen dabei, das Bild besser zu verstehen.
• Bild-Sitemap: SEO-Plugins nehmen in der Regel auch Bilder in die Sitemap auf.

Überprüfung

• PageSpeed Insights und Lighthouse: Sie zeigen LCP-Bilder an, die zu groß, falsch formatiert oder verzögert geladen sind. Mehr über die Messung erfahren Sie in unserem Leitfaden zur Messung der Website-Geschwindigkeit.
• Die Entwicklertools des Browsers (F12 › Netzwerk, mit dem Filter „Img“): Hier sehen Sie, wie groß die Bilder tatsächlich sind, die heruntergeladen werden.

Zusammenfassung

Passen Sie die Größe Ihrer Bilder an und komprimieren Sie sie vor dem Hochladen, verwenden Sie WebP (oder AVIF) für Fotos und SVG für Logos, bearbeiten Sie vorhandene Bilder mit einem Bildoptimierungs-Plugin, laden Sie das Hauptbild nicht als Lazy-Load-Element hoch und fügen Sie jedem Inhaltsbild einen Alternativtext hinzu. Mit diesen Maßnahmen lässt sich die Ladezeit der meisten Websites erheblich verkürzen.

Die WordPress-Hosting-Pakete von aWh laufen auf NVMe-SSDs mit HTTP/2 und täglichen Backups, sodass schnelle Bilder mit einer schnellen Bereitstellung einhergehen.

Häufig gestellte Fragen

Welches ist das beste Bildformat für WordPress?

Für Fotos WebP oder AVIF, für Logos und Symbole SVG, für Screenshots WebP oder PNG.

Beeinträchtigt die Komprimierung die Bildqualität?

Verlustbehaftete Komprimierung ist grundsätzlich möglich, doch bei einer Qualität von 75–85 % ist der Unterschied mit bloßem Auge in der Regel nicht erkennbar, während die Dateigröße nur noch einen Bruchteil beträgt. Wenn die Qualität entscheidend ist (beispielsweise bei einem Fotografenportfolio), wählen Sie eine geringere Komprimierung.

Wie groß sollte ein Bild sein?

Ein Inhaltsfoto sollte 100–200 KB groß sein, ein Header-Bild in voller Breite etwa 200–400 KB – mit einer Pixelgröße, die der Anzeigegröße entspricht.

Wie optimiere ich bereits hochgeladene Bilder?

Massenverarbeitung (Bulk Optimization) mit einem Plugin zur Bildoptimierung. Erstellen Sie zuvor eine Sicherungskopie und führen Sie den Vorgang bei großen Medienbibliotheken in Zeiten mit geringem Datenverkehr durch.

Ist für jedes Bild ein Alternativtext erforderlich?

Für alle Bilder mit Inhalt: „Ja“; bei rein dekorativen Bildern kann das Feld leer gelassen werden, damit der Bildschirmleser diese überspringt.

Warum empfiehlt PageSpeed die Verwendung eines modernen Bildformats?

Denn Ihre Bilder liegen im JPEG- oder PNG-Format vor und wären im WebP- oder AVIF-Format deutlich kleiner. Ein Plugin zur Bildoptimierung erledigt dies automatisch.

Kann ein Plugin zur Bildoptimierung die Ladegeschwindigkeit der Seite verlangsamen?

Der Server selbst wird dadurch nicht belastet, doch die Ausführung der Komprimierung auf einem Shared Hosting kann das Konto belasten, insbesondere bei lokaler Verarbeitung. Wählen Sie in diesem Fall eine cloudbasierte Komprimierung oder führen Sie die Verarbeitung in kleineren Schritten durch.

• Bildoptimierung
• WordPress
• Website-Geschwindigkeit
• Core Web Vitals
• Anleitungen