Bilder für WordPress optimieren

Bilder sind fast immer der schwerste Teil jeder WordPress-Seite. Auf einer typischen Website machen Bilder 50-80% des gesamten Seitengewichts aus, und es ist nicht ungewöhnlich, dass ein einzelnes nicht optimiertes Hero-Bild mehr wiegt als das gesamte HTML, CSS und JavaScript zusammen. Wenn sich deine Seite langsam anfühlt, sind Bilder das Erste, was du dir ansehen solltest. Die gute Nachricht: Bildoptimierung bietet einige der größten und unkompliziertesten Performance-Gewinne, die du erzielen kannst.

Warum Bilder der größte Faktor beim Seitengewicht sind

Eine moderne Smartphone-Kamera produziert Fotos, die jeweils 3-8 MB groß sind. Wenn du diese direkt ohne Verarbeitung in WordPress hochlädst, ist das genau das, was deine Besucher herunterladen müssen. Multipliziere das mit 5-10 Bildern auf einer Seite, und du kommst auf 30-80 MB an Bilddaten, was selbst schnelle Verbindungen träge wirken lässt.

Das Seitengewicht beeinflusst direkt die Ladezeit, die wiederum die Nutzererfahrung und SEO beeinflusst. Google verwendet die Seitengeschwindigkeit als Rankingfaktor, und die Core Web Vitals (insbesondere Largest Contentful Paint) werden stark von der Bildgröße beeinflusst. Jedes Kilobyte, das du bei deinen Bildern einsparst, bedeutet schnellere Ladezeiten, niedrigere Absprungraten und bessere Suchrankings.

Das richtige Bildformat wählen

Das Format, das du für jedes Bild wählst, kann einen enormen Unterschied bei der Dateigröße machen. Hier ist, wann du welches Format verwenden solltest:

• WebP: Das beste Allzweckformat für Webbilder heute. WebP liefert 25-35% kleinere Dateien als JPEG bei gleicher visueller Qualität und unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung sowie Transparenz. Alle modernen Browser unterstützen WebP (Chrome, Firefox, Safari 14+, Edge). Sofern du nicht sehr alte Browser unterstützen musst, sollte WebP deine Standardwahl sein.
• AVIF: Das neueste Format, das 20-30% kleinere Dateien als WebP bietet. AVIF erzielt hervorragende Ergebnisse bei niedrigen Qualitätseinstellungen und ist damit ideal für große Hero-Bilder, wo jedes Kilobyte zählt. Die Browser-Unterstützung wächst (Chrome, Firefox, Safari 16.4+), aber die Kodierung ist langsamer als bei WebP. Verwende es, wo maximale Komprimierung wichtig ist.
• JPEG: Immer noch das am weitesten verbreitete Format und eine solide Wahl für Fotografien. Verwende Qualitätseinstellungen zwischen 80-85% für ein gutes Gleichgewicht aus Dateigröße und visueller Qualität. Unter 75% werden Komprimierungsartefakte sichtbar. Über 90% ist die Qualitätsverbesserung kaum sichtbar, aber die Dateigröße steigt erheblich.
• PNG: Verwende PNG nur, wenn du Transparenz brauchst (Logos, Icons mit transparentem Hintergrund) oder pixelgenaue Reproduktion (Screenshots, Diagramme). PNG-Dateien sind für fotografische Inhalte typischerweise 3-5x größer als JPEG/WebP. Wenn du Transparenz und kleinere Dateigrößen brauchst, erwäge stattdessen WebP mit Alphakanal.
• SVG: Perfekt für Logos, Icons und einfache Illustrationen. SVGs sind vektorbasiert, skalieren daher auf jede Größe ohne Qualitätsverlust und wiegen typischerweise nur wenige Kilobyte. Sie lassen sich außerdem mit CSS stylen. Verwende SVG nicht für Fotografien.

Bildkomprimierung verstehen: Verlustbehaftet vs. Verlustfrei

Es gibt zwei grundlegende Arten der Komprimierung, und das Verständnis des Unterschieds hilft dir, bessere Optimierungsentscheidungen zu treffen:

Verlustbehaftete Komprimierung entfernt Bilddaten, die für das menschliche Auge weniger wahrnehmbar sind. Das erreicht wesentlich höhere Komprimierungsraten (oft 70-90% Dateigrößenreduktion), aber der Prozess ist irreversibel. Du kannst die Originalqualität nicht zurückbekommen. Für Webbilder ist verlustbehaftete Komprimierung bei der richtigen Qualitätsstufe fast immer die richtige Wahl, weil die Dateigrößeneinsparungen enorm sind und der Qualitätsunterschied bei typischen Bildschirmbetrachtungsabständen unsichtbar ist.

Verlustfreie Komprimierung reduziert die Dateigröße, ohne Daten zu verwerfen. Das Originalbild kann perfekt wiederhergestellt werden. Der Kompromiss ist, dass verlustfreie Komprimierung typischerweise nur 10-30% Dateigrößenreduktion erreicht. Verwende verlustfreie Komprimierung für Bilder, bei denen jedes Pixel zählt, wie Produktfotografie für E-Commerce-Zoomansichten, medizinische Bilder oder Screenshots von Text.

Für die meisten WordPress-Seiten bietet eine verlustbehaftete Komprimierungseinstellung von 80-85% Qualität ein hervorragendes Gleichgewicht. Auf diesem Niveau ist der visuelle Unterschied zum Original praktisch nicht erkennbar, aber die Dateigröße ist typischerweise 60-75% kleiner.

Empfohlene Bildabmessungen für WordPress

Bilder hochzuladen, die größer sind als nötig, verschwendet Bandbreite und verlangsamt deine Seite. Hier sind praktische Richtlinien für gängige WordPress-Bildgrößen:

• Hero-Bilder in voller Breite: 1920px Breite reicht für die meisten Bildschirme. 2560px ist sinnvoll, wenn du hochauflösende (Retina) Displays in voller Breite abdecken möchtest.
• Beitragsbilder für Blogartikel: 1200px Breite deckt die meisten Theme-Layouts ab und sieht auf Retina-Displays scharf aus.
• Inhaltsbilder innerhalb von Beiträgen: Richte dich nach der Inhaltsspaltenbreite deines Themes. Wenn dein Inhaltsbereich 800px breit ist, lade Bilder mit 1600px hoch (2x für Retina).
• Thumbnails und Archivbilder: 600x400px ist eine gängige Größe, aber prüfe, was dein Theme tatsächlich verwendet.
• WooCommerce-Produktbilder: 800-1200px auf der längsten Seite, abhängig davon, ob dein Theme Zoom unterstützt.

Es hat keinen Sinn, ein 6000px-Bild hochzuladen, wenn es maximal mit 1920px angezeigt wird. Verkleinere vor dem Hochladen, oder verwende ein Plugin, das beim Upload automatisch verkleinert.

WordPress-Bildgrößen und Regenerierung

Wenn du ein Bild hochlädst, generiert WordPress automatisch mehrere Größen: Thumbnail (150x150), Medium (300x300), Medium_Large (768px breit) und Large (1024x1024). Dein Theme und deine Plugins können zusätzliche Größen registrieren.

Du kannst die Standardgrößen unter Einstellungen, dann Medien ansehen und anpassen. Wenn du diese Abmessungen nach dem Hochladen von Bildern änderst, werden die bestehenden Thumbnails nicht automatisch aktualisiert. Du musst sie mit einem Plugin wie Regenerate Thumbnails oder per WP-CLI neu generieren:

# Alle Thumbnails neu generieren
wp media regenerate --yes

# Thumbnails für ein bestimmtes Bild neu generieren
wp media regenerate 42

Wenn dein Theme benutzerdefinierte Bildgrößen registriert, die du selten verwendest, verschwenden diese unnötigen Größen Speicherplatz und Verarbeitungszeit bei jedem Upload. Du kannst das Plugin Stop Generating Unnecessary Thumbnails verwenden, um nicht benötigte Größen zu deaktivieren.

Plugins zur Bildoptimierung

Der einfachste Weg, Bilder in WordPress zu optimieren, ist ein dediziertes Plugin, das Bilder automatisch beim Hochladen komprimiert. Hier sind die beliebtesten Optionen:

• ShortPixel Image Optimizer: Bietet verlustbehaftete, Glossy- und verlustfreie Komprimierungsmodi. Beinhaltet WebP- und AVIF-Konvertierung. Funktioniert über eine Cloud-API, belastet also deinen Server nicht. Der kostenlose Plan umfasst 100 Credits pro Monat (ein Credit pro generierter Bildgröße). Der Glossy-Modus ist besonders gut, da er nahezu verlustfreie visuelle Qualität bei verlustbehafteten Dateigrößen bietet.
• Imagify: Vom selben Team wie WP Rocket entwickelt. Bietet Normal (verlustfrei), Aggressive (verlustbehaftet) und Ultra (maximale Komprimierung) Modi. Beinhaltet WebP-Konvertierung und ein Massenoptimierungstool. Die Oberfläche ist übersichtlich und leicht verständlich. Der kostenlose Plan umfasst 20 MB pro Monat.
• Smush: Beliebte kostenlose Option, die verlustfreie Komprimierung ohne monatliches Limit bietet. Die kostenlose Version komprimiert Bilder bis 5 MB und verarbeitet bis zu 50 Bilder gleichzeitig in der Massenoptimierung. Die Pro-Version fügt verlustbehaftete Komprimierung, WebP-Konvertierung und CDN-Auslieferung hinzu.
• EWWW Image Optimizer: Einzigartig, da es die Komprimierung lokal auf deinem Server ausführen kann, ohne eine externe API. Gute Wahl für Seiten mit Datenschutzbedenken oder hohem Volumen. Unterstützt WebP-Konvertierung, Lazy Loading und automatische Bildgrößenanpassung. Der API-basierte Modus bietet bessere Komprimierungsraten.

Alle diese Plugins können auch Bilder optimieren, die vor der Plugin-Installation hochgeladen wurden. Suche nach der "Massenoptimierung"-Funktion, um deine bestehende Mediathek zu verarbeiten.

Bilder in WebP konvertieren

Wenn du noch JPEG- und PNG-Dateien auslieferst, ist die Konvertierung zu WebP einer der einfachsten Gewinne. Die meisten Bildoptimierungs-Plugins beinhalten die WebP-Konvertierung als eingebaute Funktion. Sie erzeugen eine WebP-Version neben dem Original und liefern sie an Browser aus, die das Format unterstützen.

Für manuelle WebP-Konvertierung kannst du Kommandozeilentools verwenden:

# Ein einzelnes Bild in WebP konvertieren
cwebp -q 80 input.jpg -o output.webp

# Alle JPEGs in einem Verzeichnis konvertieren
for file in *.jpg; do cwebp -q 80 "$file" -o "${file%.jpg}.webp"; done

Um WebP-Bilder an unterstützende Browser auszuliefern und für ältere Browser auf JPEG/PNG zurückzufallen, kannst du Folgendes in deine .htaccess-Datei einfügen:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+).(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule (.+).(jpe?g|png)$ $1.$2.webp [T=image/webp,E=REQUEST_image]
</IfModule>

Lazy Loading von Bildern in WordPress

Lazy Loading verzögert das Laden von Bildern, die derzeit nicht im sichtbaren Bereich des Browsers sind. Statt alle Bilder beim ersten Laden der Seite herunterzuladen, ruft der Browser Bilder erst ab, wenn der Nutzer zu ihnen scrollt. Das kann die initiale Ladezeit erheblich verkürzen, besonders auf Seiten mit vielen Bildern.

Seit WordPress 5.5 fügt die Plattform automatisch loading="lazy" zu Bildern hinzu. Dieses native Lazy Loading auf Browser-Ebene wird von allen modernen Browsern unterstützt und benötigt kein JavaScript.

Ein paar wichtige Punkte:

• Above-the-Fold-Bilder nicht lazy laden: Dein Hero-Bild, Logo und alle Bilder, die ohne Scrollen sichtbar sind, sollten sofort geladen werden. Lazy Loading für diese Bilder schadet der Performance, weil der Browser das Laden von Inhalten verzögert, die der Nutzer bereits sehen kann. Seit WordPress 5.9 überspringt die Plattform automatisch Lazy Loading für das erste Bild auf der Seite.
• fetchpriority="high" für Hero-Bilder verwenden: Das Hinzufügen von fetchpriority="high" zu deinem wichtigsten Above-the-Fold-Bild teilt dem Browser mit, den Download zu priorisieren. Das kann die Largest Contentful Paint Werte deutlich verbessern.
• Prüfen, ob dein Theme Lazy Loading nicht entfernt: Einige ältere Themes oder Page Builder entfernen das loading-Attribut. Prüfe deinen Seitenquelltext, um zu bestätigen, dass es vorhanden ist.

Responsive Bilder mit srcset

WordPress generiert automatisch die srcset- und sizes-Attribute für Bilder, die über den Content-Editor hinzugefügt werden. Diese Attribute teilen dem Browser mit, welche Bildgröße basierend auf der Viewport-Breite heruntergeladen werden soll, sodass ein Mobilnutzer ein kleineres Bild herunterladet als ein Desktop-Nutzer.

Stelle sicher, dass dein Theme dieses Verhalten nicht überschreibt. Ein korrekt konfiguriertes responsives Bild-Tag sieht so aus:

<img src="foto-1024.jpg"
     srcset="foto-300.jpg 300w, foto-768.jpg 768w, foto-1024.jpg 1024w, foto-1536.jpg 1536w"
     sizes="(max-width: 768px) 100vw, 800px"
     width="1024" height="768"
     loading="lazy"
     alt="Ein beschreibender Alternativtext" />

Wenn du Bilder über benutzerdefinierten Code oder einen Page Builder hinzufügst, verwende wp_get_attachment_image() anstatt manuell <img>-Tags zu schreiben. Diese Funktion fügt automatisch srcset- und sizes-Attribute hinzu.

CDN für die Bildauslieferung nutzen

Ein Content Delivery Network (CDN) speichert Kopien deiner Bilder auf Servern weltweit und liefert sie vom Standort aus, der jedem Besucher am nächsten ist. Das reduziert Latenz und beschleunigt die Bildauslieferung, besonders für Besucher, die weit von deinem Hosting-Server entfernt sind.

Beliebte CDN-Optionen für WordPress-Bilder:

• Cloudflare: Der kostenlose Plan beinhaltet ein CDN mit globaler Abdeckung. Der Pro-Plan fügt Bildoptimierungsfunktionen wie Polish (automatische Komprimierung) und WebP-Konvertierung hinzu.
• BunnyCDN: Günstiges Pay-as-you-go-Preismodell mit ausgezeichneter Performance. Beinhaltet eine Bildoptimierungsfunktion namens Bunny Optimizer, die Größenanpassung, Komprimierung und WebP-Konvertierung on-the-fly übernimmt.
• KeyCDN: Entwicklerfreundliches CDN mit verfügbaren WordPress-Integrationsplugins.

Die meisten Caching-Plugins (WP Rocket, LiteSpeed Cache, W3 Total Cache) bieten CDN-Integrationseinstellungen, die die Einrichtung unkompliziert machen.

Bild-SEO: Alt-Text und Dateinamen

Bildoptimierung betrifft nicht nur die Dateigröße. Richtige SEO-Praktiken helfen deinen Bildern, in der Google-Bildersuche zu erscheinen, was bedeutsamen Traffic bringen kann:

• Alt-Text: Schreibe beschreibenden Alt-Text für jedes Bild. Das hilft Suchmaschinen, den Bildinhalt zu verstehen, und ist essenziell für Barrierefreiheit (Screenreader). Halte ihn knapp, aber beschreibend: "Rote Laufschuhe auf weißem Hintergrund" ist besser als "Schuhe" oder "IMG_4532."
• Dateinamen: Benenne Bilddateien vor dem Hochladen um. Verwende beschreibende, mit Bindestrichen getrennte Namen wie rote-laufschuhe.jpg statt DSC_0042.jpg. Suchmaschinen verwenden Dateinamen als Ranking-Signal für die Bildersuche.
• Title-Attribute: Weniger wichtig für SEO als Alt-Text, aber nützlich für zusätzlichen Kontext beim Hovern in einigen Browsern.
• Bildunterschriften: Bildunterschriften werden von vielen Besuchern häufiger gelesen als der Fließtext. Verwende sie, wenn sie dem Inhalt einen Mehrwert bieten.

Bildoptimierung mit InspectWP überprüfen

Führe nach der Optimierung deiner Bilder einen InspectWP-Scan durch, um die Ergebnisse zu prüfen. InspectWP meldet die Gesamtanzahl der Bilder auf deiner Seite und hilft dir zu verstehen, wie Bildanzahl und Seitengewicht mit deinen gesamten Performance-Metriken zusammenhängen. Nutze die automatische Berichtsfunktion von InspectWP, um deine Bildoptimierung im Laufe der Zeit zu überwachen und Rückschritte nach Inhaltsaktualisierungen oder Plugin-Änderungen zu erkennen.