WordPress Bilder optimieren: Anleitung für schnelle Websites

Bilder sind meist der größte Bremsklotz für die Ladezeit. Mit der richtigen Optimierung wird deine WordPress-Website deutlich schneller. Diese Anleitung zeigt alle Methoden.

Warum Bildoptimierung wichtig ist

Der Impact auf die Ladezeit

Typische Website ohne Optimierung:

• Gesamtgröße: 3-5 MB
• Davon Bilder: 2-4 MB (60-80%!)

Mit Optimierung:

• Gesamtgröße: 500 KB - 1 MB
• Ladezeit: 2-3x schneller

Die Auswirkungen

Außerdem: Google berücksichtigt Ladezeit im Ranking (Core Web Vitals).

Die 5 Säulen der Bildoptimierung

1. Richtige Größe

Das häufigste Problem: Bilder sind viel größer als nötig.

Beispiel:

• Hochgeladen: 4000 x 3000 px (12 Megapixel)
• Angezeigt: 800 x 600 px
• Verschwendet: 80% der Daten!

Faustregel:

• Hero-Bilder: Max. 1920px breit
• Content-Bilder: Max. 1200px breit
• Thumbnails: Max. 400px breit

Vor dem Upload:

1. Bild in Bildbearbeitung öffnen
2. Auf benötigte Größe verkleinern
3. Dann erst hochladen

2. Komprimierung

Bilder enthalten oft unnötige Daten. Komprimierung entfernt diese.

Arten der Komprimierung:

Empfehlung: Verlustbehaftet mit Qualität 80-85% – Unterschied kaum sichtbar, große Ersparnis.

3. Modernes Format (WebP/AVIF)

Moderne Formate sind effizienter als JPG/PNG:

Empfehlung: WebP mit JPG-Fallback für ältere Browser.

4. Lazy Loading

Bilder erst laden, wenn sie im Sichtbereich sind.

Vorteile:

• Schnellerer initialer Seitenaufbau
• Weniger Datenverbrauch (mobil)
• Bessere Core Web Vitals

Seit WordPress 5.5: Native Lazy Loading ist automatisch aktiv.

5. Responsive Images

Verschiedene Bildgrößen für verschiedene Geräte.

WordPress erstellt automatisch mehrere Größen:

• Thumbnail (150px)
• Medium (300px)
• Large (1024px)
• Full Size (Original)

Mit srcset wird die passende Größe geladen.

Bildoptimierungs-Plugins

ShortPixel (Empfehlung)

Preis: 100 Bilder/Monat gratis, dann ab 4,99€/Monat

Vorteile:

• Sehr gute Komprimierung
• WebP-Konvertierung
• Auch bestehende Bilder
• Backup der Originale
• CDN optional

Einrichtung:

1. Plugin installieren
2. API-Key holen (kostenlos registrieren)
3. Einstellungen: "Lossy" + "WebP erstellen"
4. Bulk-Optimierung starten

Imagify

Preis: 20 MB/Monat gratis, dann ab 4,99€/Monat

Vorteile:

• Einfache Bedienung
• WebP-Konvertierung
• Integriert mit WP Rocket
• Gute Kompressionsraten

Smush

Preis: Kostenlose Version (limitiert), Pro ab 6$/Monat

Vorteile:

• Kostenlos für Basis-Features
• Lazy Loading integriert
• CDN in Pro-Version
• Bulk-Optimierung

EWWW Image Optimizer

Preis: Kostenlos (lokale Optimierung), Cloud ab 0,003$/Bild

Vorteile:

• Lokale Verarbeitung möglich (DSGVO!)
• WebP-Konvertierung
• Lazy Loading
• Keine monatlichen Limits bei lokaler Nutzung

Schritt-für-Schritt: Bilder optimieren

Schritt 1: Plugin installieren

Empfehlung: ShortPixel

1. Plugins → Installieren → "ShortPixel"
2. Aktivieren
3. API-Key von shortpixel.com holen
4. In den Einstellungen eintragen

Schritt 2: Einstellungen konfigurieren

Empfohlene Einstellungen:

• Komprimierungstyp: Lossy (beste Ersparnis)
• WebP erstellen: Ja
• AVIF erstellen: Optional (noch nicht überall unterstützt)
• Originale behalten: Ja (als Backup)
• Größe beschränken: 1920px (verhindert zu große Uploads)

Schritt 3: Bestehende Bilder optimieren

1. Medien → ShortPixel Bulk
2. "Start Optimizing" klicken
3. Warten (kann bei vielen Bildern dauern)

Schritt 4: WebP-Auslieferung aktivieren

Je nach Plugin unterschiedlich:

• ShortPixel: Automatisch mit .htaccess
• EWWW: JavaScript-Methode oder .htaccess
• Imagify: Mit WP Rocket oder .htaccess

Lazy Loading richtig einsetzen

Native Lazy Loading (WordPress 5.5+)

WordPress fügt automatisch loading="lazy" zu Bildern hinzu.

Wichtig: Bilder "above the fold" (im Sichtbereich) sollten NICHT lazy loaded werden!

Above-the-fold-Bilder ausschließen

Das wichtigste Bild (Hero, Logo) sollte sofort laden:

// In functions.php
add_filter('wp_img_tag_add_loading_attr', 'disable_lazy_loading_for_hero', 10, 3);
function disable_lazy_loading_for_hero($value, $image, $context) {
    if (strpos($image, 'hero-image') !== false) {
        return false;
    }
    return $value;
}

Oder mit Plugin (z.B. Perfmatters, WP Rocket) konfigurieren.

Bilder richtig vorbereiten (vor dem Upload)

Desktop-Tools

Workflow vor dem Upload

1. Zuschneiden auf gewünschten Ausschnitt
2. Größe anpassen (max. 1920px breit)
3. Komprimieren (80-85% Qualität)
4. Als WebP speichern (oder JPG)
5. Hochladen

Oder: Einfach normal hochladen und Plugin machen lassen.

CDN für Bilder

Ein CDN (Content Delivery Network) liefert Bilder vom nächsten Server aus.

Vorteile

• Schnellere Ladezeit (geografisch näher)
• Weniger Last auf deinem Server
• Oft zusätzliche Optimierung

CDN-Optionen

Häufige Fehler vermeiden

Fehler 1: Originale hochladen

Problem: 5 MB Foto direkt von der Kamera hochgeladen.

Lösung: Vor Upload oder per Plugin auf sinnvolle Größe beschränken.

Fehler 2: PNG für Fotos

Problem: PNG für Fotos ist 3-5x größer als JPG.

Lösung:

• Fotos → JPG oder WebP
• Grafiken mit Transparenz → PNG
• Logos → SVG (wenn möglich)

Fehler 3: Thumbnails nicht optimiert

Problem: Plugin optimiert nur Originale, nicht die von WordPress erstellten Größen.

Lösung: In Plugin-Einstellungen "Thumbnails optimieren" aktivieren.

Fehler 4: Lazy Loading für alle Bilder

Problem: Auch das Hero-Bild wird lazy loaded → schlechter LCP.

Lösung: Bilder above-the-fold vom Lazy Loading ausschließen.

Fehler 5: Falsche Bildmaße im HTML

Problem: Bild hat keine width/height-Angaben → CLS (Layout-Shift).

Lösung: WordPress fügt diese automatisch hinzu. Bei manuellen <img>-Tags selbst angeben.

Erfolgskontrolle

Tools zum Messen

Metriken

• Largest Contentful Paint (LCP): < 2,5s
• Cumulative Layout Shift (CLS): < 0,1
• Gesamte Bildgröße: Möglichst < 1 MB

Zusammenfassung

WordPress Bilder optimieren in 5 Schritten:

1. Richtige Größe – Max. 1920px für Hero, 1200px für Content
2. Komprimierung – Plugin wie ShortPixel nutzen
3. WebP aktivieren – 25-35% kleiner als JPG
4. Lazy Loading – Bilder erst bei Bedarf laden
5. CDN nutzen – Optional für noch mehr Speed

Schnellster Weg:

1. ShortPixel installieren
2. "Lossy" + "WebP" aktivieren
3. Bulk-Optimierung starten
4. Fertig!

Ergebnis: 50-80% kleinere Bilder, deutlich schnellere Website.

Weiterführende Artikel

• WordPress zu langsam: Ursachen & Lösungen
• WordPress Pagespeed optimieren
• WordPress Cache leeren: Alle Methoden

Keine Lust auf Technik?

Bei unserer WordPress Wartung optimieren wir auch die Performance deiner Website – inklusive Bildoptimierung.