Bilder in WordPress optimieren: Schneller laden, besser ranken

Bilder machen bei einer typischen WordPress-Webseite mehr als die Hälfte des Datenvolumens aus. Jedes unkomprimierte Foto verlängert die Ladezeit, und eine langsame Seite verliert Besucher und Sichtbarkeit in der Suche. Die gute Nachricht: Mit vier Handgriffen holst du den größten Teil wieder heraus, ohne dass die Qualität leidet.

Diese vier Hebel sind das richtige Format, die passende Größe, feste Abmessungen gegen Layout-Sprünge und verzögertes Laden. Der Beitrag geht sie einzeln durch und zeigt, worauf es bei WordPress ankommt.

Warum langsame Bilder das Ranking kosten

Google bewertet die Ladeerfahrung über die Core Web Vitals, und der größte Einzelposten ist fast immer das Titelbild. Lädt es langsam, verschlechtert sich der LCP-Wert (Largest Contentful Paint), also der Zeitpunkt, an dem der größte sichtbare Inhalt erscheint. Bei sonst gleichem Inhalt rutscht die Seite dadurch in den Ergebnissen nach hinten.

Dazu kommt der Abbruch: Wartet jemand auf dem Smartphone drei Sekunden auf das erste Bild, ist die Person oft schon wieder weg. Schnelle Bilder wirken also auf zwei Ebenen, auf die Platzierung in der Suche und auf die Verweildauer der Besucher.

Das richtige Bildformat wählen

Für Fotos ist WebP heute die erste Wahl, für Grafiken mit klaren Kanten SVG. JPEG und PNG brauchst du nur noch in Ausnahmen.

WebP für Fotos

WebP liefert bei gleicher Qualität rund 25 bis 35 Prozent kleinere Dateien als JPEG und wird von allen aktuellen Browsern verstanden. Für Beitragsbilder, Produktfotos und Hintergründe ist es der neue Standard.

AVIF als nächste Stufe

AVIF komprimiert noch etwas stärker als WebP. Die Browserunterstützung ist inzwischen breit, aber nicht lückenlos. Wer AVIF ausliefert, sollte deshalb ein WebP als Rückfallebene hinterlegen.

SVG für Logos und Icons

SVG ist ein Vektorformat und bleibt bei jeder Größe scharf, vom Favicon bis zum großen Retina-Display. Für Logos und Icons ist es unschlagbar klein. Bereinige SVG-Dateien vor dem Upload, weil Grafikprogramme oft viel unnötigen Code hinterlassen.

Wann JPEG und PNG noch passen

JPEG bleibt sinnvoll, wenn ein Dienst kein WebP annimmt. PNG brauchst du nur für Bilder mit harten Transparenzkanten, bei denen WebP an seine Grenzen kommt.

Bilder auf die tatsächliche Anzeigebreite skalieren

Der häufigste Fehler ist ein riesiges Bild, das der Browser klein anzeigt. Liefere jedes Bild in der Größe aus, in der es wirklich erscheint, höchstens in doppelter Breite für scharfe Darstellung auf hochauflösenden Displays.

Ein Beispiel: Ein Beitragsbild wird auf dem Desktop 760 Pixel breit dargestellt. Dann genügen 1520 Pixel für eine gestochen scharfe Wiedergabe. Ein 4000 Pixel breites Original an dieser Stelle lädt ein Vielfaches an Daten, ohne dass jemand den Unterschied sieht.

WordPress erzeugt beim Upload mehrere Bildgrößen und liefert über das srcset-Attribut automatisch die passende an das jeweilige Gerät aus. Wichtig ist nur, dass du das Original nicht schon zu groß hochlädst. Skaliere Fotos vorab auf eine Maximalbreite von etwa 2000 Pixel.

Layout-Sprünge mit Breite und Höhe verhindern

Gib jedem Bild eine feste Breite und Höhe mit. So reserviert der Browser den Platz schon vor dem Laden, und der Text springt nicht nach unten, während das Bild erscheint.

Diese Sprünge misst Google als Cumulative Layout Shift (CLS), einen der drei Core Web Vitals. Ein hoher CLS-Wert stört beim Lesen und drückt zugleich die Bewertung. Aktuelle Themes setzen width und height von selbst. Prüfe im Quelltext, ob die Attribute wirklich am Bild stehen.

Lazy Loading richtig einsetzen

Lade nur das erste sichtbare Bild sofort. Alle weiteren holt der Browser erst, wenn der Besucher in ihre Nähe scrollt. Das verkürzt die anfängliche Ladezeit deutlich.

WordPress aktiviert dieses verzögerte Laden seit Version 5.5 automatisch. Eine Ausnahme gehört dazu: Das Titelbild ganz oben zählt für den LCP und sollte gerade nicht verzögert laden. Markiere es als vorrangig (loading="eager" und fetchpriority="high"), damit es so früh wie möglich erscheint. Viele Themes und Cache-Plugins erledigen das, ein Blick in den Quelltext bestätigt es.

Komprimieren ohne sichtbaren Verlust

Eine Qualitätsstufe um 80 Prozent ist bei Fotos der Punkt, an dem die Datei klein wird, ohne dass das Auge etwas vermisst. Darunter tauchen Artefakte auf, darüber wächst die Datei ohne Gegenwert.

Diese Kompression übernimmt am besten ein Plugin, das jedes hochgeladene Bild automatisch verkleinert und zusätzlich eine WebP-Version bereitstellt. Verbreitet sind ShortPixel, Imagify und Converter for Media. So musst du bei jedem Upload nicht selbst daran denken.

Ein CDN beschleunigt die Auslieferung zusätzlich

Ein Content Delivery Network legt Kopien deiner Bilder auf Servern in vielen Regionen ab und liefert sie vom nächstgelegenen aus. Für Besucher weit weg vom Serverstandort verkürzt das die Ladezeit um mehrere hundert Millisekunden. Was dahintersteckt, steht im Glossar unter CDN. Für Seiten mit überwiegend regionalem Publikum reicht ein schneller Server am deutschen Standort oft schon aus.

Checkliste für schnelle Bilder

• Fotos als WebP ausliefern, Logos und Icons als SVG
• Vor dem Upload auf eine Maximalbreite von etwa 2000 Pixel skalieren
• srcset nutzen, damit jedes Gerät die passende Größe bekommt
• width und height setzen, damit nichts springt
• Nur das Titelbild vorrangig laden, den Rest verzögert
• Kompression und WebP-Umwandlung einem Plugin überlassen

Bilder sind der Hebel mit dem besten Verhältnis aus Aufwand und Wirkung. Wenn Format, Größe und Ladeverhalten stimmen, verbessern sich die Core Web Vitals und die Ladezeit sofort. Den schnellen Server mit NVMe-Speicher bringen wir mit, die sauberen Bilder steuerst du bei.

Häufige Fragen

Welches Bildformat soll ich in WordPress verwenden?

Für Fotos ist WebP die erste Wahl, weil es bei gleicher Qualität rund 25 bis 35 Prozent kleiner ist als JPEG und von allen aktuellen Browsern unterstützt wird. Logos und Icons gehören als SVG ins System, weil sie damit bei jeder Größe scharf bleiben. AVIF komprimiert noch stärker, sollte aber mit einem WebP als Rückfallebene ausgeliefert werden.

Muss ich Bilder vor dem Hochladen verkleinern?

Ja. Lade nie ein 4000 Pixel breites Foto hoch, wenn es maximal 800 Pixel breit angezeigt wird. Skaliere das Original vorab auf eine sinnvolle Maximalbreite von etwa 2000 Pixel und überlasse die Feinkompression einem Plugin.

Was ist der Unterschied zwischen WebP und AVIF?

AVIF erzeugt bei gleicher Qualität noch kleinere Dateien als WebP, wird aber noch nicht von jedem Programm und jeder Umgebung gleich gut unterstützt. WebP ist der sichere Standard. Wer AVIF einsetzt, sollte für ältere Browser ein WebP hinterlegen.

Warum springt mein Layout, während die Bilder laden?

Weil den Bildern feste Abmessungen fehlen. Ohne width und height weiß der Browser nicht, wie viel Platz er reservieren muss, und schiebt den Text nach unten, sobald das Bild erscheint. Das erhöht den CLS-Wert der Core Web Vitals. Feste Breite und Höhe lösen das Problem.

Verlangsamt Lazy Loading das Titelbild?

Ja, wenn du es auf das oberste Bild anwendest. Das Titelbild zählt für den LCP-Wert und sollte gerade nicht verzögert laden, sondern vorrangig (loading eager und fetchpriority high). Alle weiteren Bilder holt der Browser verzögert nach.