Zu große Bilder oder ein ungeeignetes Bildformat verlangsamen eine Website. Das ist inzwischen allgemein bekannt. In diesem Artikel erfährst du, welches Bildformat sich am besten eignet und wie du erkennst, ob ein Bild für deine Website zu groß ausgeliefert wird. Mit diesem Wissen kannst du gezielt optimieren, Ladezeiten reduzieren und deine WordPress Website spürbar schneller machen.
Bildoptimierung in WordPress für eine schnelle Website
Bevor es um konkrete Optimierungsschritte geht, lohnt sich ein Blick darauf, wie WordPress Bilder grundsätzlich verarbeitet. Beim Upload erstellt WordPress automatisch mehrere Bildgrößen und entscheidet je nach Kontext, welche Version ausgeliefert wird. Um Page Speed Probleme richtig einordnen zu können, ist es wichtig zu verstehen, welche Bildgrößen standardmäßig erzeugt werden und warum diese nicht in jedem Fall optimal für schnelle Ladezeiten sind.
Welche Bildgrößen WordPress standardmäßig erzeugt
Wusstest du, dass WordPress beim Upload eines Bildes automatisch mehrere Bildgrößen erzeugt? Überprüfen kannst du das im Ordner wp-content > uploads > * dein Bildordner.
Ziel ist es, Bilder je nach Ausgabekontext in einer passenden Auflösung auszuliefern, ohne jedes Mal die Originaldatei laden zu müssen. Diese automatische Skalierung bildet die Grundlage für eine responsive Bildausgabe in WordPress.
Standardmäßig erzeugt WordPress folgende Bildgrößen:
- Thumbnail
ca. 150 Pixel Breite
Geeignet für Vorschaubilder und kleine Bildansichten - Medium
ca. 300 Pixel Breite
Wird häufig für kleinere Inhalte und Spaltenlayouts verwendet - Medium Large
ca. 768 Pixel Breite
Typische Größe für Inhalte im Hauptbereich auf Tablets und kleineren Bildschirmen - Large
ca. 1024 Pixel Breite
Wird oft für größere Content Bilder und Hero ähnliche Bereiche genutzt - Full Size
Originalgröße des hochgeladenen Bildes
Sollte nur verwendet werden, wenn das Layout diese Größe tatsächlich benötigt
Wichtig: WordPress erzeugt zusätzlich weitere Bildgrößen, je nachdem, welche vom Theme registriert wurden. Dadurch lässt sich die Bilderzeugung gezielt beeinflussen, da Bildgrößen im Theme, meist in der functions.php, definiert werden können.
Was ist srcset und warum es für Page Speed wichtig ist
Damit diese verschiedenen Bildgrößen in der Praxis sinnvoll genutzt werden können, muss WordPress dem Browser mitteilen, welche Varianten eines Bildes verfügbar sind. Genau an dieser Stelle kommt srcset ins Spiel.
srcset listet mehrere Bilddateien mit unterschiedlichen Breiten auf (z. B. 150w, 300w, 600w). Dadurch kann der Browser grundsätzlich entscheiden, welche Datei am besten passt. Aber: Damit der Browser wirklich richtig wählen kann, braucht er noch eine zweite Information: Wie breit wird das Bild im Layout überhaupt angezeigt? Genau dafür gibt es das Attribut sizes.
Man kann sich sizes als „Layout-Anweisung“ vorstellen: Es gib dem Browser die Information, welche Breite das Bild im fertigen Layout haben wird. Ein typisches Beispiel ist:
sizes=“(max-width: 600px) 100vw, 600px“
Das bedeutet:
- Bis 600px Viewport ist das Bild 100% der Viewportbreite (100vw)
- Darüber ist das Bild fix 600px breit
Erst wenn der Browser diese Layout-Breite aus sizes kennt, kann er aus srcset die passende Datei wählen. Auf einem Smartphone mit z. B. 375px Bildschirmbreite weiß der Browser dann: „Okay, das Bild wird ca. 375px breit angezeigt – also reicht vermutlich die 300w-Version (oder bei Retina eine größere).“ Ohne sizes würde der Browser im Zweifel oft eine zu große Variante laden, selbst wenn kleinere vorhanden sind – und das hätte direkte Auswirkungen auf Ladezeit und Page Speed.
srcset sorgt dafür, dass der Browser aus den automatisch erzeugten Bildgrößen diejenige auswählen kann, die am besten zur aktuellen Bildschirmgröße und Auflösung passt. Ohne diese Information würde häufig eine zu große Bilddatei geladen, selbst wenn kleinere Varianten vorhanden sind. Das hätte direkte Auswirkungen auf Ladezeit und Page Speed.
Man kann sich das so vorstellen: Ein Langstreckenwanderer achtet auf das Gewicht seines Rucksacks, um möglichst wenig Ballast mitzutragen. Genauso versucht auch der Browser, nur das zu laden, was wirklich notwendig ist, um die Seite schnell und effizient darzustellen.
Klingt logisch? In der Praxis ist es jedoch etwas komplexer, denn hinter der optimalen Bildauslieferung steckt mehr als nur die Wahl der richtigen Datei.
srcset sagt, welche Bilddateien verfügbar sind und sizes sagt, wie groß das Bild im Layout wird.
Im gezeigten HTML-Output erkennt man genau dieses Zusammenspiel. srcset allein sagt dem Browser lediglich, welche Bildgrößen existieren. Erst durch sizes erfährt er, wie viel Platz das Bild im Layout tatsächlich einnimmt, etwa ob es über die gesamte Seitenbreite oder nur innerhalb einer Spalte angezeigt wird. Erst diese Kombination ermöglicht eine effiziente, responsive Bildauslieferung und bildet die Grundlage für die Bildoptimierung in WordPress.
Übernimmt WordPress das alles automatisch oder muss man sich selbst darum kümmern?
Die kurze Antwort lautet: In vielen Fällen ja, aber nicht immer.
Werden Bilder über den Gutenberg Editor eingefügt, erzeugt WordPress srcset und sizes in der Regel automatisch. Der Block Editor nutzt die vorhandenen Bildgrößen und gibt die notwendigen Attribute korrekt aus, sofern das Theme die WordPress Standardfunktionen nicht überschreibt.
Ob srcset und sizes korrekt ausgegeben werden, lässt sich direkt im Browser überprüfen. Dazu genügt ein Rechtsklick auf das Bild und die Auswahl von „Untersuchen“ oder „Element untersuchen“. Im HTML Code des Bildes siehst du anschließend, ob die Attribute srcset und sizes vorhanden sind und welche Bildgrößen WordPress dem Browser zur Auswahl stellt.
Fehlen diese Attribute oder passt das sizes Attribut nicht zum tatsächlichen Layout, kann der Browser keine optimale Bildgröße auswählen. Genau hier entstehen häufig unnötig große Bilddownloads und entsprechende Hinweise in PageSpeed Insights.
Warum es dennoch wichtig ist, auf das richtige Bildformat und eine passende Bildgröße zu achten, zeige ich im nächsten Abschnitt.
Warum das richtige Bildformat entscheidend für Page Speed ist
Das verwendete Bildformat hat einen direkten Einfluss auf Dateigröße, Ladezeit und Bildqualität. Selbst wenn srcset und sizes korrekt eingesetzt werden, können ungeeignete Bildformate dazu führen, dass unnötig große Dateien geladen werden. Deshalb spielt die Wahl des richtigen Bildformats eine zentrale Rolle bei der Bildoptimierung in WordPress und allgemein Websites.
Bildformate im Vergleich: WebP vs. JPG vs. PNG
Welches Bildformat für WordPress besser geeignet ist
JPG eignet sich vor allem für Fotos und Bilder mit vielen Farbverläufen. Das Format erlaubt eine verlustbehaftete Komprimierung, wodurch sich die Dateigröße deutlich reduzieren lässt. Für fotografische Inhalte ist JPG in vielen Fällen eine gute und stabile Wahl.
PNG wird häufig für Grafiken mit Transparenzen oder klaren Kanten eingesetzt, etwa bei Logos oder Icons. Im Vergleich zu JPG sind PNG-Dateien jedoch deutlich größer, da sie verlustfrei komprimiert werden. Für große Content Bilder oder Hintergrundbilder ist PNG daher in der Regel ungeeignet.
WebP ist ein modernes Bildformat, das 2010 von Google vorgestellt wurde mit dem Ziel, ein modernes Bildformat für das Web bereitzustellen. Es unterstützt Transparenz ebenso wie PNG: dadurch lassen sich Bilder oder Grafiken mit transparentem Hintergrund deutlich schneller ausliefern als mit klassischen PNGs.
Warum PageSpeed Insights WebP bevorzugt
PageSpeed Insights weist häufig darauf hin, dass Bilder in modernen Formaten ausgeliefert werden sollten. Gemeint sind damit Formate wie WebP. Der Grund dafür ist einfach: Moderne Bildformate ermöglichen kleinere Dateien bei nahezu gleicher visueller Qualität. Weniger Daten bedeuten kürzere Ladezeiten und eine bessere Bewertung der Core Web Vitals, insbesondere beim Largest Contentful Paint.
Du kannst ein JPG oder PNG Bild in ein WebP mit verschiedenen Werkzeugen umwandeln. In Grafikprogrammen wie Photoshop oder Affinity kann WebP direkt als Exportformat gewählt werden. Alternativ eignen sich verschiedene Online Tools. Da es hier den Rahmen sprengen würde, gehe ich auf die Werkzeuge nicht im Detail ein.
Um PageSpeed Hinweise korrekt einordnen zu können, ist es wichtig zu verstehen, wie PageSpeed Insights Bildprobleme bewertet und welche Hinweise wirklich relevant sind. Mehr dazu im nächsten Absatz.
PageSpeed Insights richtig lesen
PageSpeed Insights bewertet Bilder nicht nur anhand des verwendeten Dateiformats, sondern auch anhand der tatsächlich ausgelieferten Pixelmaße. Selbst wenn ein Bild bereits im modernen WebP Format vorliegt, kann es als verbesserungswürdig eingestuft werden, wenn es größer ausgeliefert wird als im Layout benötigt.
Im gezeigten Beispiel weist PageSpeed Insights darauf hin, dass die Bilddatei für die angezeigten Abmessungen größer als notwendig ist. Das Bild wird mit einer Auflösung von 608 × 760 Pixeln ausgeliefert, im Layout jedoch nur mit etwa 477 × 472 Pixeln dargestellt. Dadurch werden unnötige Bilddaten geladen, obwohl srcset und sizes korrekt vorhanden sind.
Genau hier zeigt sich ein häufiges Missverständnis: Responsive Bilder und moderne Formate ersetzen nicht die Notwendigkeit, die Bildgröße bereits vor dem Upload sinnvoll festzulegen. WordPress kann zwar verschiedene Bildgrößen erzeugen und ausliefern, es kann jedoch keine optimale Variante wählen, wenn das Ausgangsbild deutlich größer ist als die tatsächliche Darstellungsgröße. Wird ein Bild unnötig groß ausgeliefert, weist das Tool auf mögliche Einsparungen hin, selbst wenn es sich nur um wenige Kilobyte handelt.
Für eine saubere Bildoptimierung in WordPress bedeutet das: Neben srcset, sizes und dem richtigen Bildformat müssen auch die Pixelmaße des Bildes zum Layout passen. Erst das Zusammenspiel dieser Faktoren sorgt dafür, dass Bilder effizient ausgeliefert werden und PageSpeed Hinweise langfristig verschwinden.
Die beste Bildoptimierung beginnt nicht im Theme, sondern bereits vor dem Upload.
Umsetzung in der Praxis
In der Praxis bedeutet das oft, dass die Bildgröße bereits vor dem Upload angepasst werden sollte. Wird ein Bild im Layout zum Beispiel maximal mit rund 500 Pixel Breite dargestellt, kann es sinnvoll sein, diese Größe direkt in Photoshop oder einem vergleichbaren Tool festzulegen.
In Photoshop lässt sich die Bildgröße einfach über die Funktion „Bildgröße“ anpassen. Dabei sollte die Breite auf die tatsächlich benötigten Pixel reduziert werden, während das Seitenverhältnis erhalten bleibt. Anschließend kann das Bild im passenden Format, etwa als WebP oder JPG, exportiert werden.