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 ungewohnlich, dass ein einzelnes nicht optimiertes Hero-Bild mehr wiegt als das gesamte HTML, CSS und JavaScript zusammen. Wenn sich deine Seite langsam anfuhlt, sind Bilder das Erste, was du dir ansehen solltest. Die gute Nachricht: Bildoptimierung bietet einige der großten und unkompliziertesten Performance-Gewinne, die du erzielen kannst.

Warum Bilder der groß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 hochladst, ist das genau das, was deine Besucher herunterladen mussen. Multipliziere das mit 5-10 Bildern auf einer Seite, und du kommst auf 30-80 MB an Bilddaten, was selbst schnelle Verbindungen tragt wirken lasst.

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 Bildgroße beeinflusst. Jedes Kilobyte, das du bei deinen Bildern einsparst, bedeutet schnellere Ladezeiten, niedrigere Absprungraten und bessere Suchrankings.

Das richtige Bildformat wahlen

Das Format, das du fur jedes Bild wahlst, kann einen enormen Unterschied bei der Dateigroße machen. Hier ist, wann du welches Format verwenden solltest:

• WebP: Das beste Allzweckformat fur Webbilder heute. WebP liefert 25-35% kleinere Dateien als JPEG bei gleicher visueller Qualitat und unterstutzt sowohl verlustbehaftete als auch verlustfreie Komprimierung sowie Transparenz. Alle modernen Browser unterstutzen WebP (Chrome, Firefox, Safari 14+, Edge). Sofern du nicht sehr alte Browser unterstutzen musst, sollte WebP deine Standardwahl sein.
• AVIF: Das neueste Format, das 20-30% kleinere Dateien als WebP bietet. AVIF erzielt hervorragende Ergebnisse bei niedrigen Qualitatseinstellungen und ist damit ideal fur große Hero-Bilder, wo jedes Kilobyte zahlt. Die Browser-Unterstutzung wachst (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 fur Fotografien. Verwende Qualitatseinstellungen zwischen 80-85% fur ein gutes Gleichgewicht aus Dateigroße und visueller Qualitat. Unter 75% werden Komprimierungsartefakte sichtbar. Uber 90% ist die Qualitatsverbesserung kaum sichtbar, aber die Dateigroße steigt erheblich.
• PNG: Verwende PNG nur, wenn du Transparenz brauchst (Logos, Icons mit transparentem Hintergrund) oder pixelgenaue Reproduktion (Screenshots, Diagramme). PNG-Dateien sind fur fotografische Inhalte typischerweise 3-5x großer als JPEG/WebP. Wenn du Transparenz und kleinere Dateigrößen brauchst, erwage stattdessen WebP mit Alphakanal.
• SVG: Perfekt fur Logos, Icons und einfache Illustrationen. SVGs sind vektorbasiert, skalieren daher auf jede Große ohne Qualitatsverlust und wiegen typischerweise nur wenige Kilobyte. Sie lassen sich außerdem mit CSS stylen. Verwende SVG nicht fur Fotografien.

Bildkomprimierung verstehen: Verlustbehaftet vs. Verlustfrei

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

Verlustbehaftete Komprimierung entfernt Bilddaten, die fur das menschliche Auge weniger wahrnehmbar sind. Das erreicht wesentlich hohere Komprimierungsraten (oft 70-90% Dateigroßenreduktion), aber der Prozess ist irreversibel. Du kannst die Originalqualitat nicht zuruckbekommen. Fur Webbilder ist verlustbehaftete Komprimierung bei der richtigen Qualitatstufe fast immer die richtige Wahl, weil die Dateigroßeneinsparungen enorm sind und der Qualitatsunterschied bei typischen Bildschirmbetrachtungsabstanden unsichtbar ist.

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

Fur die meisten WordPress-Seiten bietet eine verlustbehaftete Komprimierungseinstellung von 80-85% Qualitat ein hervorragendes Gleichgewicht. Auf diesem Niveau ist der visuelle Unterschied zum Original praktisch nicht erkennbar, aber die Dateigroße ist typischerweise 60-75% kleiner.

Empfohlene Bildabmessungen fur WordPress

Bilder hochzuladen, die großer sind als notig, verschwendet Bandbreite und verlangsamt deine Seite. Hier sind praktische Richtlinien fur gangige WordPress-Bildgrößen:

• Hero-Bilder in voller Breite: 1920px Breite reicht fur die meisten Bildschirme. 2560px ist sinnvoll, wenn du hochauflosende (Retina) Displays in voller Breite abdecken mochtest.
• Beitragsbilder fur Blogartikel: 1200px Breite deckt die meisten Theme-Layouts ab und sieht auf Retina-Displays scharf aus.
• Inhaltsbilder innerhalb von Beitragen: Richte dich nach der Inhaltspaltenbreite deines Themes. Wenn dein Inhaltsbereich 800px breit ist, lade Bilder mit 1600px hoch (2x fur Retina).
• Thumbnails und Archivbilder: 600x400px ist eine gangige Große, aber prufe, was dein Theme tatsachlich verwendet.
• WooCommerce-Produktbilder: 800-1200px auf der langsten Seite, abhangig davon, ob dein Theme Zoom unterstutzt.

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 hochladst, generiert WordPress automatisch mehrere Großen: Thumbnail (150x150), Medium (300x300), Medium_Large (768px breit) und Large (1024x1024). Dein Theme und deine Plugins konnen zusatzliche Großen registrieren.

Du kannst die Standardgrößen unter Einstellungen, dann Medien ansehen und anpassen. Wenn du diese Abmessungen nach dem Hochladen von Bildern anderst, 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 fur ein bestimmtes Bild neu generieren
wp media regenerate 42

Wenn dein Theme benutzerdefinierte Bildgrößen registriert, die du selten verwendest, verschwenden diese unnotigen Großen Speicherplatz und Verarbeitungszeit bei jedem Upload. Du kannst das Plugin Stop Generating Unnecessary Thumbnails verwenden, um nicht benotigte Groß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 uber eine Cloud-API, belastet also deinen Server nicht. Der kostenlose Plan umfasst 100 Credits pro Monat (ein Credit pro generierter Bildgroße). Der Glossy-Modus ist besonders gut, da er nahezu verlustfreie visuelle Qualitat 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 Oberflache ist ubersichtlich und leicht verstandlich. 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 fugt verlustbehaftete Komprimierung, WebP-Konvertierung und CDN-Auslieferung hinzu.
• EWWW Image Optimizer: Einzigartig, da es die Komprimierung lokal auf deinem Server ausfuhren kann, ohne eine externe API. Gute Wahl fur Seiten mit Datenschutzbedenken oder hohem Volumen. Unterstutzt WebP-Konvertierung, Lazy Loading und automatische Bildgroßenanpassung. Der API-basierte Modus bietet bessere Komprimierungsraten.

Alle diese Plugins konnen 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 unterstutzen.

Fur 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 unterstutzende Browser auszuliefern und fur altere Browser auf JPEG/PNG zuruckzufallen, kannst du Folgendes in deine .htaccess-Datei einfugen:

<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 verzogert 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 verkurzen, besonders auf Seiten mit vielen Bildern.

Seit WordPress 5.5 fugt die Plattform automatisch loading="lazy" zu Bildern hinzu. Dieses native Lazy Loading auf Browser-Ebene wird von allen modernen Browsern unterstutzt und benotigt 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 fur diese Bilder schadet der Performance, weil der Browser das Laden von Inhalten verzogert, die der Nutzer bereits sehen kann. Seit WordPress 5.9 uberspringt die Plattform automatisch Lazy Loading fur das erste Bild auf der Seite.
• fetchpriority="high" fur Hero-Bilder verwenden: Das Hinzufugen 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.
• Prufen, ob dein Theme Lazy Loading nicht entfernt: Einige altere Themes oder Page Builder entfernen das loading-Attribut. Prufe deinen Seitenquelltext, um zu bestatigen, dass es vorhanden ist.

Responsive Bilder mit srcset

WordPress generiert automatisch die srcset- und sizes-Attribute fur Bilder, die uber den Content-Editor hinzugefugt werden. Diese Attribute teilen dem Browser mit, welche Bildgroß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 uberschreibt. 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 uber benutzerdefinierten Code oder einen Page Builder hinzufugst, verwende wp_get_attachment_image() anstatt manuell <img>-Tags zu schreiben. Diese Funktion fugt automatisch srcset- und sizes-Attribute hinzu.

CDN fur 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 nachsten ist. Das reduziert Latenz und beschleunigt die Bildauslieferung, besonders fur Besucher, die weit von deinem Hosting-Server entfernt sind.

Beliebte CDN-Optionen fur WordPress-Bilder:

• Cloudflare: Der kostenlose Plan beinhaltet ein CDN mit globaler Abdeckung. Der Pro-Plan fugt Bildoptimierungsfunktionen wie Polish (automatische Komprimierung) und WebP-Konvertierung hinzu.
• BunnyCDN: Gunstiges Pay-as-you-go-Preismodell mit ausgezeichneter Performance. Beinhaltet eine Bildoptimierungsfunktion namens Bunny Optimizer, die Großenanpassung, Komprimierung und WebP-Konvertierung on-the-fly ubernimmt.
• KeyCDN: Entwicklerfreundliches CDN mit verfugbaren 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 Dateigroße. Richtige SEO-Praktiken helfen deinen Bildern, in der Google-Bildersuche zu erscheinen, was bedeutsamen Traffic bringen kann:

• Alt-Text: Schreibe beschreibenden Alt-Text fur jedes Bild. Das hilft Suchmaschinen, den Bildinhalt zu verstehen, und ist essenziell fur 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 fur die Bildersuche.
• Title-Attribute: Weniger wichtig fur SEO als Alt-Text, aber nutzlich fur zusatzlichen Kontext beim Hovern in einigen Browsern.
• Bildunterschriften: Bildunterschriften werden von vielen Besuchern haufiger gelesen als der Fließtext. Verwende sie, wenn sie dem Inhalt einen Mehrwert bieten.

Bildoptimierung mit InspectWP uberprufen

Fuhre nach der Optimierung deiner Bilder einen InspectWP-Scan durch, um die Ergebnisse zu prufen. InspectWP meldet die Gesamtanzahl der Bilder auf deiner Seite und hilft dir zu verstehen, wie Bildanzahl und Seitengewicht mit deinen gesamten Performance-Metriken zusammenhangen. Nutze die automatische Berichtsfunktion von InspectWP, um deine Bildoptimierung im Laufe der Zeit zu uberwachen und Ruckschritte nach Inhaltsaktualisierungen oder Plugin-Anderungen zu erkennen.