Zu große Bilder sind auf kleinen Websites der häufigste Grund für lange Ladezeiten. Ein einziges Foto direkt vom Smartphone kann mehrere Megabyte groß sein, obwohl es auf der Seite nur 800 Pixel breit angezeigt wird. Dazu kommen fehlende Alt-Texte, also Bildbeschreibungen für Suchmaschinen und Screenreader.
Kurz gesagt
Verkleinere Bilder vor dem Hochladen auf die Breite, in der sie angezeigt werden (meist maximal 1.600 bis 2.000 Pixel), komprimiere sie, nutze das Format WebP und gib jedem inhaltlich wichtigen Bild einen Alt-Text. Ein Bildoptimierungs-Plugin kann das für neue und vorhandene Bilder automatisch übernehmen.
Was „Bilder optimieren“ konkret bedeutet
-
•
Abmessungen: Das Bild ist nicht viel breiter, als es auf der Seite dargestellt wird.
-
•
Kompression: Die Datei wird verkleinert, ohne dass man einen Qualitätsunterschied sieht.
-
•
Format: Moderne Formate wie WebP oder AVIF sind bei gleicher Qualität meist deutlich kleiner als JPEG oder PNG. WordPress unterstützt WebP seit Version 5.8 und AVIF seit Version 6.5, sofern dein Server die Formate verarbeiten kann.
-
•
Alt-Text: Eine kurze Beschreibung, was auf dem Bild zu sehen ist.
-
•
Dateiname: fassade-altbau-freiburg.webp sagt mehr als IMG_4711.jpg.
Beispiel: vom zu großen Bild bis zur Kontrolle
Der folgende Ablauf ist ein nachvollziehbares, fiktives Beispiel für die Startseite eines Cafés.
Ein Titelbild wird optimiert (fiktiv)
1. Problem finden: PageSpeed Insights meldet für die Startseite „Bilder richtig dimensionieren“. Größter Posten ist cafe-innen.jpg mit 4.032 × 3.024 Pixeln und 4,8 MB.
2. Ziel festlegen: Das Bild wird auf dem Desktop maximal 1.400 Pixel breit angezeigt. Eine Breite von 1.600 Pixeln reicht also auch für hochauflösende Bildschirme.
3. Bild verkleinern und umwandeln: Mit einem kostenlosen Tool wie Squoosh wird das Bild auf 1.600 Pixel Breite verkleinert und als WebP mit Qualität 75 gespeichert. Ergebnis: rund 210 KB.
4. Austauschen: Neues Bild als cafe-innenraum-holztische.webp in die Mediathek laden, im Header-Bereich der Startseite ersetzen, Alt-Text eintragen: „Gastraum des Cafés mit Holztischen und großen Fenstern“.
5. Kontrollieren: Seite neu laden, Cache leeren, PageSpeed Insights erneut starten. Der Hinweis zum Bild ist verschwunden, der Wert für den Largest Contentful Paint (LCP) hat sich verbessert.
Gleiches Motiv, deutlich kleinere Datei (Schematische Darstellung)
Die Zahlen im Beispiel sind typisch, aber nicht garantiert. Wie viel du einsparst, hängt vom Motiv und vom Ausgangsbild ab.
Zu große Bilder finden
-
1
Öffne PageSpeed Insights und gib die Adresse einer wichtigen Seite ein.
-
2
Scrolle zu den Diagnosen. Hinweise wie „Bilder richtig dimensionieren“, „Bilder effizient codieren“ oder „Bilder in modernen Formaten bereitstellen“ listen die betroffenen Dateien mit möglicher Ersparnis.
-
3
In der WordPress-Mediathek siehst du in der Listenansicht oder im Detailfenster eines Bildes Abmessungen und Dateigröße.
Variante 1: Bilder vor dem Hochladen optimieren
Für wenige Bilder ist das der einfachste und sauberste Weg.
-
1
Bild in einem Werkzeug wie Squoosh (im Browser, kostenlos) oder deinem Bildbearbeitungsprogramm öffnen.
-
2
Breite auf die tatsächliche Anzeigegröße setzen. Für Bilder in voller Breite reichen meist 1.600 bis 2.000 Pixel, für Bilder in einer Textspalte 800 bis 1.200 Pixel.
-
3
Als WebP speichern, Qualität etwa 70 bis 80. Vergleiche Vorher und Nachher in der Vorschau.
-
4
Mit sprechendem Dateinamen speichern und in WordPress hochladen.
Variante 2: Ein Plugin übernimmt die Arbeit
Für viele vorhandene Bilder oder wenn mehrere Personen Inhalte pflegen, ist ein Plugin praktischer. Verbreitet sind zum Beispiel ShortPixel, Imagify, EWWW Image Optimizer oder Converter for Media. Sie komprimieren neue Uploads automatisch, können vorhandene Bilder nachträglich bearbeiten und WebP-Versionen erzeugen. Einige rechnen über externe Server ab und haben kostenlose Kontingente. Prüfe vor der Nutzung die aktuellen Konditionen und den Datenschutz.
Vor der Massenoptimierung sichern
Erstelle vor der Bearbeitung aller vorhandenen Bilder ein Backup oder aktiviere im Plugin die Option, Originale aufzubewahren. So kannst du zurück, wenn dir die Qualität nicht gefällt.
Alt-Texte richtig schreiben
Der Alt-Text beschreibt, was auf dem Bild zu sehen ist und welche Rolle es auf der Seite spielt. Du trägst ihn in der Mediathek im Feld „Alternativer Text“ ein oder im Block-Editor in der Seitenleiste des Bild-Blocks.
-
•
Gut: „Malerin streicht die Fassade eines Altbaus in hellem Gelb“
-
•
Zu knapp: „Fassade“
-
•
Keyword-Stopfen: „Maler Freiburg Fassade streichen Maler günstig“
Wann du nichts ändern musst
Rein dekorative Bilder wie Hintergrundmuster oder Trennlinien brauchen keinen beschreibenden Alt-Text. Lass das Feld dort leer, damit Screenreader sie überspringen.
Was WordPress schon automatisch macht
-
•
WordPress erzeugt beim Hochladen mehrere Bildgrößen und liefert über das Attribut srcset je nach Bildschirm die passende aus.
-
•
Sehr große Bilder (über 2.560 Pixel) werden beim Hochladen automatisch verkleinert, das Original bleibt erhalten.
-
•
Bilder weiter unten auf der Seite werden standardmäßig erst geladen, wenn sie in die Nähe des sichtbaren Bereichs kommen (Lazy Loading).
Das hilft, ersetzt aber keine Kompression. Und das große Bild ganz oben (dein Hero-Bild) sollte nicht verzögert geladen werden, weil es meist das LCP-Element ist. Mehr dazu in Core Web Vitals einfach erklärt.
Woran du erkennst, dass es funktioniert hat
-
•
In der Mediathek sind die neuen Dateien deutlich kleiner, typischerweise wenige hundert Kilobyte statt mehrerer Megabyte.
-
•
PageSpeed Insights zeigt die Bild-Hinweise nicht mehr oder mit geringerer Ersparnis.
-
•
Auf dem Smartphone über mobile Daten lädt die Seite spürbar schneller.
-
•
Jedes inhaltliche Bild hat einen Alt-Text. Das kannst du mit dem kostenlosen SEO-Check prüfen.
Passende Anleitungen
Quellen und weiterführende Links