Bilder komprimieren und optimieren: So wird deine Website schneller

Die gute Nachricht: Bildoptimierung ist einfacher als gedacht. Mit den richtigen Handgriffen lässt sich die Performance deutlich verbessern, ohne dass die visuelle Qualität leidet. Dieser Guide zeigt dir, worauf es ankommt.

Warum Bilder die Performance bremsen

Bilder machen typischerweise 60 bis 75 Prozent des Gesamtgewichts einer Webseite aus. Das hat mehrere Gründe: Moderne Kameras produzieren Fotos mit 12 Megapixeln oder mehr. Ein solches Bild kann als JPEG leicht 8 MB groß sein. WordPress reduziert es beim Upload auf etwa 2 MB – aber das ist immer noch viel zu groß für eine Website.

Das eigentliche Problem: Viele Website-Betreiber laden Bilder unverändert hoch und verlassen sich darauf, dass das CMS schon das Richtige tut. Tut es aber nicht – zumindest nicht ausreichend. Das Ergebnis sind lange Ladezeiten und frustrierte Besucher.

Die drei wichtigsten Stellschrauben

Bevor wir in Details gehen: Diese drei Maßnahmen haben den größten Effekt.

1. Das richtige Format wählen

Nicht alle Bildformate sind gleich effizient. JPEG ist der Standard für Fotos, aber WebP komprimiert besser – typischerweise 25 bis 35 Prozent kleinere Dateien bei vergleichbarer Qualität. Ein Produktfoto, das als JPEG 400 KB groß ist, bringt als WebP nur noch 280 KB auf die Waage.

WebP funktioniert in modernen Browsern (über 95 Prozent Marktanteil). Für ältere Browser solltest du ein JPEG als Fallback bereitstellen. Das erledigt WordPress ab Version 5.8 automatisch, wenn du WebP-Bilder hochlädst.

SVG ist eine andere Kategorie: Vektorbasiert, beliebig skalierbar, perfekt für Logos und Icons. Ein Logo als PNG kann 50 KB groß sein, dasselbe Logo als SVG nur 5 KB.

PNG bleibt wichtig für Screenshots und Grafiken mit Text – hier ist die verlustfreie Kompression entscheidend, damit Schrift scharf bleibt.

2. Vor dem Upload komprimieren

Der größte Hebel ist Kompression. Tools wie Squoosh.app oder TinyPNG reduzieren die Dateigröße um 60 bis 80 Prozent, ohne dass der Unterschied visuell erkennbar wäre. Das funktioniert so gut, weil diese Tools irrelevante Bildinformationen entfernen – Metadaten wie GPS-Koordinaten, Kameramodell, Aufnahmedatum.

Ein Beispiel: Ein Landschaftsfoto vom iPhone, 3,8 MB groß. Nach dem Upload zu Squoosh, Qualität auf 82 Prozent, Format WebP: 320 KB. Faktor 12 kleiner, visuell identisch.

Wer regelmäßig viele Bilder optimiert, sollte zu Desktop-Tools greifen. ImageOptim für macOS oder FileOptimizer für Windows komprimieren automatisch und verlustfrei. Für Batch-Verarbeitung eignet sich ImageMagick – ein Kommandozeilen-Tool, das ganze Ordner in Sekunden verarbeitet.

3. Dimensionen anpassen

Ein häufiger Fehler: Bilder werden mit 4.000 Pixeln Breite hochgeladen, obwohl sie auf der Website nur 800 Pixel breit dargestellt werden. Der Browser skaliert zwar, muss aber trotzdem die gesamte 4.000-Pixel-Version herunterladen.

Die Faustregel: Große Bilder oben auf der Startseite maximal 2.000 Pixel breit, normale Bilder im Text 1.200 Pixel, kleine Vorschaubilder 400 bis 600 Pixel. Alles darüber ist Verschwendung.

Moderne Ladetechniken: Lazy Loading und Responsive Images

Lazy Loading: Laden, was sichtbar ist

Lazy Loading verzögert das Laden von Bildern, die sich außerhalb des sichtbaren Bereichs befinden. Ein Blogartikel mit 15 Bildern lädt zunächst nur die ersten drei – der Rest wird nachgeladen, sobald du scrollst.

Moderne Browser unterstützen das nativ über das loading="lazy"-Attribut. WordPress fügt das ab Version 5.5 automatisch hinzu. Wichtige Ausnahme: Bilder im direkt sichtbaren Bereich sollten nicht lazy geladen werden, weil das die Ladezeit verschlechtert.

Der Effekt: Bei Seiten mit vielen Bildern kann Lazy Loading die initiale Ladezeit um 40 bis 60 Prozent reduzieren.

Responsive Images: Die richtige Größe für jedes Gerät

WordPress generiert beim Upload automatisch mehrere Bildgrößen. Ein Smartphone mit 375 Pixel Breite bekommt die kleine Version, ein Desktop-Monitor mit 1920 Pixel die große. Das funktioniert über das srcset-Attribut, das der Browser automatisch auswertet.

Das Problem: Viele Themes generieren zu viele Größen. Prüfe unter Einstellungen → Medien, welche Größen erstellt werden. Nicht genutzte Größen kannst du deaktivieren – das spart Speicherplatz.

WordPress-Optimierung: Plugins und Einstellungen

WordPress-Nutzer können die Optimierung automatisieren. Plugins wie ShortPixel, Imagify oder Smush komprimieren Bilder direkt nach dem Upload und konvertieren sie zu WebP.

ShortPixel bietet verlustfreie und verlustbehaftete Kompression, eine Bulk-Funktion für bereits hochgeladene Bilder und WebP-Konvertierung. Die kostenlose Version reicht für 100 Bilder pro Monat.

Imagify hat drei Kompressionsstufen – Normal, Aggressiv, Ultra – und integriert sich nahtlos in WordPress.

Smush komprimiert verlustfrei im kostenlosen Modus und bietet Lazy Loading Integration.

Wichtig: Plugins benötigen Server-Ressourcen. Bei Shared-Hosting kann die Performance während der Verarbeitung spürbar sinken. Die manuelle Optimierung vor dem Upload ist oft effizienter.

SEO und Accessibility: Alt-Texte richtig einsetzen

Alt-Texte werden oft vernachlässigt, erfüllen aber drei wichtige Funktionen:

Barrierefreiheit: Screenreader lesen Alt-Texte für sehbehinderte Nutzer vor.

SEO: Google kann Bilder nicht „sehen" und verlässt sich auf Alt-Texte zur Indexierung. Gut formulierte Alt-Texte verbessern das Ranking in der Bildersuche.

Fallback: Wenn ein Bild nicht lädt (z.B. bei Verbindungsproblemen), wird der Alt-Text angezeigt.

Ein guter Alt-Text ist präzise und beschreibend. Statt „Produkt" sollte es heißen: „Schwarzes Ledersofa mit drei Sitzplätzen und Chromfüßen". Dateinamen wie „DSC_0847.jpg" sind unbrauchbar.

Rein dekorative Bilder erhalten ein leeres Alt-Attribut (alt=""), damit Screenreader sie überspringen.

Performance messen: Tools und Metriken

Die richtigen Tools nutzen

Drei Tools sind besonders hilfreich:

Google PageSpeed Insights analysiert deine Website und gibt konkrete Verbesserungsvorschläge.

GTmetrix zeigt detailliert, welche Bilder wie groß sind und wo Optimierungsbedarf besteht. GTmetrix liefert außerdem einen Performance Score und zeigt, welche Bilder komprimiert werden sollten.

WebPageTest bietet erweiterte Analysen und zeigt, in welcher Reihenfolge Ressourcen geladen werden.

Wichtige Werte

Ladezeit des größten Elements: Misst, wann das größte sichtbare Element geladen ist – oft ein Bild. Zielwert: unter 2,5 Sekunden.

Erste sichtbare Inhalte: Misst, wann der erste Inhalt sichtbar wird. Zielwert: unter 1,8 Sekunden.

Blockierte Zeit: Misst, wie lange der Browser blockiert ist. Zielwert: unter 200 Millisekunden.

So optimierst du deine Website – praktischer Workflow

Schritt 1: Analyse

Öffne GTmetrix und analysiere deine Website. Notiere dir die größten Bilder und die Gesamtgröße der Seite.

Schritt 2: Die größten Bilder optimieren

1. Lade die 5 bis 10 schwersten Bilder herunter
2. Komprimiere sie mit Squoosh.app (Format: WebP, Qualität: 80-85%)
3. Ersetze die Originale in WordPress

Dieser Schritt allein kann die Seitengröße um 50 bis 70 Prozent reduzieren.

Schritt 3: WordPress-Plugin installieren

Installiere ShortPixel oder Imagify und nutze die Bulk-Optimierung für alle bestehenden Bilder. Aktiviere WebP-Konvertierung.

Schritt 4: Alt-Texte ergänzen

Gehe die Mediathek durch und ergänze fehlende Alt-Texte bei wichtigen Bildern.

Schritt 5: Erfolgskontrolle

Führe erneut einen Test mit GTmetrix durch. Die Seitengröße sollte deutlich kleiner sein, die Ladezeit kürzer.

Fortgeschrittene Techniken (optional)

Das Picture-Element für Format-Fallbacks

Das <picture>-Element ermöglicht die Bereitstellung mehrerer Formate. Der Browser lädt automatisch das beste unterstützte Format:

<picture>   <source srcset="startseite.webp" type="image/webp">   <img src="startseite.jpg" alt="Hauptbild"> </picture>

Preloading für wichtige Bilder

Für das wichtigste Bild auf der Startseite kannst du dem Browser sagen, dass er es mit höchster Priorität laden soll:

<link rel="preload" as="image" href="startseite.webp">

Wichtig: Nur für das wichtigste Bild nutzen, sonst blockiert es andere Ressourcen.

Zusammenfassung: Die wichtigsten Punkte

Sofort umsetzen:

• Komprimiere Bilder vor dem Upload mit Squoosh oder TinyPNG
• Nutze WebP statt JPEG (WordPress ab 5.8 unterstützt das)
• Reduziere Dimensionen auf maximal 2.000 Pixel für große Bilder

Mittelfristig:

• Installiere ein WordPress-Plugin für automatische Optimierung
• Aktiviere Lazy Loading (ab WordPress 5.5 automatisch)
• Ergänze Alt-Texte für alle wichtigen Bilder

Performance messen:

• Nutze GTmetrix für detaillierte Analysen
• Achte auf kurze Ladezeiten
• Prüfe regelmäßig die Seitengröße

Eine konsequente Bildoptimierung verbessert nicht nur die Ladezeit, sondern auch das Google-Ranking. Schnelle Seiten werden von Google bevorzugt.