WordPress Bilder optimieren – in 15 Schritten

Optimierte Bilder sind entscheidend für die Leistung deiner WordPress-Website.

Doch die Bildoptimierung endet nicht bei Photoshop. In diesem Leitfaden erfährst du, wie du deine Bilder effektiv für WordPress optimieren kannst, um Ladezeiten zu verkürzen und deine SEO zu verbessern.

1. Wähle einen Bildoptimierungsdienst

Die Wahl des richtigen Bildoptimierungsdienstes ist entscheidend, um alle möglichen Bildoptimierungen zu gewährleisten. Unterschiedliche Dienste bieten verschiedene Funktionen wie Caching, Bildkompression und Content Delivery Networks (CDNs).

Empfohlene Kombinationen:

• FlyingPress + FlyingCDN: Einfach zu bedienen, unterstützt das Vorladen von Above-the-Fold Bildern und das Lazy Load von Hintergrundbildern.
• FlyingPress + Cloudflare Pro: Inklusive Mirage, Polish und APO für eine umfassende Bildoptimierung.
• FlyingPress + Cloudflare Enterprise auf Rocket.net: Bietet robuste Bildoptimierungsfunktionen und schnelle Server.

Vorteile von Image CDNs gegenüber Plugins:

• Weniger Plugins notwendig, wodurch die Website schlanker bleibt.
• Keine zusätzliche Speicherbelastung.
• Automatische Größenanpassung für mobile Geräte.
• Vermeidung von erhöhtem Speicherverbrauch.

Beispiele für gute Image CDNs:

• BunnyCDN’s Bunny Optimizer
• Imagify
• Cloudflare Mirage/Polish
• QUIC.cloud
• ShortPixel + Adaptive Images

2. Bilder auf richtige Abmessungen skalieren

Stelle sicher, dass deine Bilder die richtigen Dimensionen haben, um unnötige Ladezeiten zu vermeiden.

Beispiel für eine Abmessungstabelle:

Tools zur Größenanpassung:

• Canva: Einfaches Skalieren von Bildern je nach Verwendungszweck.
• Zoom Chrome Extension: Präzises Aufnehmen von Screenshots in den benötigten Abmessungen.
• GIMP: Zuschneiden und Bearbeiten von Bildern nach Bedarf.

3. Bilder für mobile Geräte skalieren

Die Optimierung für mobile Geräte ist unerlässlich, um eine gute Ladegeschwindigkeit und Benutzererfahrung zu gewährleisten.

Empfehlungen:

• Verwende Image CDNs wie Cloudflare Image Resizing oder Bunny Optimizer, die automatische Größenanpassung für mobile Geräte bieten.
• Alternativ kannst du ShortPixel Adaptive Images verwenden, das ebenfalls mobile Größenanpassung unterstützt.

4. Komprimierung auf 85%

Die Kompression von Bildern reduziert die Dateigröße ohne signifikanten Qualitätsverlust.

Warum 85%?

• Lighthouse testet Bilder bei 85% Kompression, daher ist dies der empfohlene Wert.
• Reduziert die Serverlast und verbessert die Ladezeiten.

Tipp: Komprimiere deine Bilder vor dem Hochladen, um den Server zu entlasten.

5. Verwende WebP oder konvertiere sie manuell

WebP ist ein modernes Bildformat, das bis zu 50% kleinere Dateigrößen im Vergleich zu PNG bietet.

Vorteile von WebP:

• Schnellere Ladezeiten.
• Bessere Kompression ohne Qualitätsverlust.

Umsetzung:

• Automatisch: Viele Image CDNs und Plugins konvertieren Bilder automatisch in WebP.
• Manuell: Nutze Tools wie WebP Converter For Media oder WebP Express für die manuelle Konvertierung wichtiger Bilder.

Überprüfung:

• Öffne deine Website in den Chrome Dev Tools und überprüfe den Bildtyp im Netzwerk-Tab.

Beispiel:

<img src="beispiel.webp" width="680" height="680" />

6. Lade Above-the-Fold Bilder vor

Above-the-Fold Bilder sind die ersten Bilder, die ein Besucher sieht. Diese sollten vorab geladen werden, um die Largest Contentful Paint (LCP) zu verbessern.

Methoden:

• Manuell: Füge preload-Anweisungen für diese Bilder hinzu.
• Automatisch: Nutze die Einstellung „Preload Critical Images“ in Plugins wie FlyingPress oder Perfmatters.

7. Schließe Above-the-Fold Bilder von Lazy Load aus

Da Above-the-Fold Bilder sofort sichtbar sind, sollten sie nicht verzögert geladen werden.

Umsetzung:

• FlyingPress und Perfmatters bieten Einstellungen, um eine bestimmte Anzahl von Bildern auszuschließen.
• WP Rocket: Erfordert zusätzliche Schritte, um spezifische Bilder vom Lazy Load auszunehmen.

8. Lazy Load von Hintergrundbildern (oder schließe sie aus)

Hintergrundbilder werden standardmäßig nicht lazy geladen, da sie über CSS geladen werden. Du kannst sie jedoch mit speziellen Klassen lazy laden.

Lösungen:

• Verwende die lazy-bg-Klasse in Plugins wie FlyingPress, Elementor, SG Optimizer oder Optimole.
• Falls nicht unterstützt, füge eigene CSS-Klassen hinzu.

Beispiel:

.lazy-bg {
  /* CSS für Lazy Load von Hintergrundbildern */
}

9. Spezifiziere Abmessungen

Das Festlegen von Breiten und Höhen für Bilder verhindert Layoutverschiebungen und verbessert die Ladegeschwindigkeit.

Beispiel:

<img src="beispiel.png" width="680" height="680" />

Hinweis: Die meisten Cache-Plugins wie Perfmatters fügen fehlende Bildabmessungen automatisch hinzu.

10. Setze Cache-Ablauf auf 1 Jahr

Da Bilder sich selten ändern, empfiehlt Google, die Browser-Caching-Dauer auf ein Jahr (31536000 Sekunden) zu setzen.

Umsetzung:

• Cloudflare: Konfiguriere die Cache-Einstellungen entsprechend.
• Hosting-Kontrollpanel: Suche nach „Cache Expiration“ oder ähnlichen Einstellungen und setze diese auf 1 Jahr.

Beispiel für Nginx:

location ~* .(jpg|jpeg|png|gif|webp|svg)$ {
    expires 365d;
    add_header Cache-Control "public, max-age=31536000, immutable";
}

11. Deaktiviere Hotlinking

Hotlinking verhindert, dass andere Websites deine Bilder direkt von deinem Server laden, was deine Serverressourcen schont.

Umsetzung:

• Cloudflare: Aktiviere den Hotlink-Schutz in den Einstellungen.
• Hosting-Dashboard: Viele Hosting-Anbieter bieten Optionen zur Deaktivierung von Hotlinking.

12. Verwende lokale YouTube-Thumbnails

Beim Einbetten von Videos können externe Anfragen zu i.ytimg.com die Ladegeschwindigkeit beeinträchtigen. Nutze lokale Platzhalterbilder.

Lösung:

• FlyingPress: Ermöglicht das lokale Hosten von YouTube-Placeholder-Bildern.

13. Verwende lokale Avatare

Kommentare können externe Anfragen zu gravatar.com verursachen. Lokale Avatare reduzieren diese Anfragen.

Umsetzung:

• Nutze Plugins wie Simple Local Avatars, um Avatare lokal zu hosten.
• Verzögere die Kommentarsektion oder verwende native CSS-Kommentare für bessere Leistung.

14. Entferne EXIF-Daten

EXIF-Daten enthalten Metainformationen wie den Aufnahmezeitpunkt eines Fotos. Diese Daten können entfernt werden, um die Dateigröße zu reduzieren.

Tools:

• ShortPixel: Entfernt EXIF-Daten automatisch während der Bildoptimierung.

15. Verringere die Qualität bei langsamen Verbindungen

Für Besucher mit langsamen Internetverbindungen kann die Bildqualität reduziert werden, um die Ladezeiten zu verbessern.

Lösungen:

• Optimole und Cloudflare Mirage bieten Netzwerk-basierte Optimierungen, die die Bildqualität je nach Verbindungsgeschwindigkeit anpassen.

Häufig gestellte Fragen (FAQs)

Wie optimiere ich Bilder für WordPress?

Eine effektive Bildoptimierung kombiniert Image CDNs oder Bildoptimierungs-Plugins mit Caching-Plugins. Achte auf Bildkompression, moderne Formate (wie WebP), mobile Größenanpassung und das Vorladen von Above-the-Fold Bildern.

Wie komprimiere ich Bilder in WordPress?

Bildkompression kann mit Plugins erfolgen, aber Image CDNs sind vorzuziehen, da sie keine zusätzliche Belastung für den Server darstellen. Die empfohlene Kompressionsstufe liegt bei 85%.

Was ist das beste kostenlose Bildoptimierungs-Plugin?

Optimole und ShortPixel sind zwei der besten kostenlosen Bildoptimierungs-Plugins, die erweiterte Funktionen wie das Lazy Load von Hintergrundbildern bieten.

Welches CDN sollte ich zur Optimierung von Bildern verwenden?

Cloudflare mit Mirage und Polish sowie BunnyCDN’s Bunny Optimizer bieten hervorragende Bildoptimierungsfunktionen und ein großes, schnelles Netzwerk.

Wie lade ich LCP-Bilder in WordPress vor?

Verwende die Einstellung „Preload Critical Images“ in Plugins wie FlyingPress oder Perfmatters. Lege die Anzahl der Typically Above-the-Fold Bilder fest, die vorab geladen werden sollen.

Wie optimiere ich Bilder für mobile Geräte?

Nutze Image CDNs wie Cloudflare Image Resizing oder Bunny Optimizer, die automatische Größenanpassungen für mobile Geräte bieten.

Wie serviere ich Bilder im WebP-Format?

Verwende Image CDNs oder Plugins wie WebP Converter For Media oder WebP Express, um Bilder automatisch in WebP zu konvertieren. Alternativ kannst du wichtige Bilder manuell konvertieren und hochladen.

Wie optimiere ich Hintergrundbilder?

Hintergrundbilder, die über CSS geladen werden, sollten mit speziellen Klassen wie lazy-bg lazy geladen oder von Lazy Load ausgeschlossen werden. Nutze Einstellungen in Plugins wie Perfmatters oder FlyingPress.

Reicht Photoshop aus, um Bilder zu optimieren?

Nein, Photoshop kann zwar die Größe und Kompression von Bildern anpassen, jedoch nicht weitere Optimierungen wie Lazy Load, Preload oder mobile Größenanpassung durchführen.

Wie optimiere ich Bilder ohne WordPress-Plugins?

Nutze Image CDNs, die Bildkompression, moderne Formate und mobile Größenanpassung ohne zusätzliche Plugins bieten.

Wie hoste ich externe Bilder lokal?

Verwende Plugins wie FlyingPress für YouTube-Thumbnails oder Simple Local Avatars für Avatare, um externe Bilder lokal zu hosten.

Durch die Umsetzung dieser Strategien zur Bildoptimierung kannst du die Leistung deiner WordPress-Website erheblich verbessern, die Ladezeiten verkürzen und eine bessere Benutzererfahrung bieten.