Bilder richtig dimensionieren

Wenn PageSpeed Insights oder Lighthouse „Bilder in angemessener Größe bereitstellen" meldet (die genaue Formulierung kann je nach Lighthouse-Version abweichen), wurden Bilder gefunden, die viel größer ausgeliefert werden als die Fläche, auf der sie angezeigt werden. Der Browser lädt die volle Auflösung und skaliert sie dann im Layout herunter, jedes überschüssige Pixel ist also verschwendete Bandbreite und langsameres Laden, ohne jeden sichtbaren Vorteil. Dieser Leitfaden erklärt, wie Sie Bilder richtig dimensionieren und die Warnung beheben, von responsiven Bildern bis zu festen Abmessungen.

Was die Empfehlung bedeutet

Jedes Bild hat eine intrinsische Größe, die realen Pixelmaße der Datei, und eine Anzeigegröße, den Platz, den es im Layout einnimmt. Ist die intrinsische Größe weit größer als die Anzeigegröße, sind die zusätzlichen Pixel reine Verschwendung. Lighthouse vergleicht beide für jedes Bild und meldet das Sparpotenzial in Kilobyte. Das klassische Beispiel ist ein 2000 Pixel breites Foto in einer 400 Pixel breiten Spalte: Der Browser hat fünfmal mehr Daten geladen, als er je anzeigen kann.

Die richtige Größe ist dabei keine einzelne Zahl. Bildschirme sind unterschiedlich breit, und hochauflösende Displays packen über das Device Pixel Ratio mehr physische Pixel auf dieselbe Fläche. Ein Bild, das auf einem kleinen Smartphone korrekt dimensioniert ist, wirkt auf einem hochauflösenden Laptop zu klein. Eine feste Größe für alle verschwendet also entweder Bytes auf kleinen Bildschirmen oder wirkt auf großen unscharf.

Bildgröße, Dateigröße und Qualität

Drei Begriffe werden leicht verwechselt. Die Bildgröße oder Dimension ist die Zahl der Pixel in Breite und Höhe. Die Dateigröße ist das Gewicht in Kilobyte, das über das Netzwerk geht. Die Qualität steuert, wie stark komprimiert wird. Diese Empfehlung betrifft die Dimension, also ein Bild mit zu vielen Pixeln für seinen Anzeigeplatz. Sie hängt aber mit den anderen zusammen, denn weniger Pixel bedeuten fast immer eine kleinere Datei, und ein modernes Format mit passender Qualität senkt die Dateigröße zusätzlich. Wer nur die Qualität herunterdreht, ohne die Dimension zu korrigieren, lässt den größten Hebel liegen.

Warum es für Ladezeit und Core Web Vitals zählt

Bilder sind meist die schwerste Ressource einer Seite, und das große Bild oberhalb der Falz ist oft das Largest-Contentful-Paint-Element selbst. Eine überdimensionierte Datei verzögert diesen Farbauftrag direkt, besonders auf mobilen Verbindungen. Feste Abmessungen reservieren zudem den Layoutplatz, was Layout-Verschiebungen vermeidet. Weil die Core Web Vitals ein Google-Ranking-Signal sind, verbessert die richtige Bildgröße Nutzererfahrung und Sichtbarkeit zugleich. Zusammen mit der Bereitstellung in modernen Formaten und dem verzögerten Laden von Offscreen-Bildern bildet die richtige Dimensionierung den Kern der Bildoptimierung.

Bilder richtig dimensionieren

1. Übergroße Bilder finden

PageSpeed Insights listet jedes Bild mit seinem Sparpotenzial. In den Chrome DevTools ein Bild inspizieren und die intrinsische Größe mit der Anzeigegröße vergleichen, eine große Lücke ist Ihr Ziel. Nach dem größten Sparpotenzial sortieren, denn ein einzelnes überdimensioniertes Hero-Bild wiegt meist schwerer als viele kleine.

2. Responsive Bilder mit srcset und sizes ausliefern

Statt einer Datei für alle Bildschirme dem Browser mehrere Breiten anbieten und ihn die passende für Gerät und Ansichtsbereich wählen lassen:

<img src="foto-800.jpg"
     srcset="foto-400.jpg 400w,
             foto-800.jpg 800w,
             foto-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="600" alt="Produkt auf einem Tisch">

Das Attribut srcset listet die verfügbaren Breiten, und sizes sagt dem Browser, wie breit das Bild angezeigt wird, damit er vor dem Layout wählen kann. Das Device Pixel Ratio berücksichtigt er dann automatisch, liefert also auf hochauflösenden Displays eine dichtere Variante und auf einfachen die kleinere.

3. Breite und Höhe explizit setzen

Immer die Attribute width und height im richtigen Seitenverhältnis angeben, oder alternativ ein CSS-aspect-ratio. So reserviert der Browser den korrekten Platz, bevor die Datei eintrifft, was Layout-Verschiebungen verhindert.

img { aspect-ratio: 4 / 3; width: 100%; height: auto; }

4. Die richtigen Größen an der Quelle erzeugen

Nicht dutzende Varianten von Hand zuschneiden. Ein Bild-CDN oder ein Build-Schritt erzeugt die benötigten Breiten automatisch und liefert pro Anfrage die beste Passung. Viele Dienste konvertieren im selben Durchgang auch das Format und wenden Komprimierung an, sodass Größe und Format zusammen erledigt sind.

5. In WordPress ohne Code

WordPress erzeugt mehrere Bildgrößen und gibt automatisch srcset aus, aber überdimensionierte Originale und Page-Builder-Markup hebeln das oft aus. Bilder nur so groß hochladen, wie sie je angezeigt werden, und ein Bildoptimierungs-Plugin nutzen, das korrekte Abmessungen setzt und bei Bedarf skaliert. Prüfen, dass Theme oder Page-Builder das erzeugte Markup nicht überschreiben.

Häufige Fehler beim Dimensionieren

Einige Muster wiederholen sich. Das Original wird in voller Kameraauflösung hochgeladen und per CSS kleingerechnet, statt in Anzeigegröße ausgeliefert zu werden. Es wird nur eine feste Breite ausgeliefert, sodass das Bild auf großen, hochauflösenden Displays unscharf oder auf kleinen zu schwer ist. Die Attribute width und height fehlen, wodurch das Layout beim Nachladen springt. Und das für Retina gedachte, doppelt aufgelöste Bild wird auch an einfache Displays ausgeliefert, die es nie brauchen. srcset mit sizes löst diese Fälle, weil der Browser pro Gerät die passende Datei zieht.

Den Fix prüfen

Neu erzeugen oder neu hochladen, dann PageSpeed Insights erneut ausführen und bestätigen, dass das Sparpotenzial je Bild gesunken ist. In den DevTools prüfen, dass die intrinsische Größe nun nahe an der Anzeigegröße liegt, über verschiedene Breakpoints hinweg, und das Fenster verkleinern, um zu sehen, dass der Browser zur passenden Datei wechselt. Laborwerte aktualisieren sich sofort, die Felddaten im Chrome UX Report folgen über ein nachlaufendes 28-Tage-Fenster. Vorlagen mit unterschiedlichem Bild-Layout testen, weil sich Dimensionierungsprobleme je Vorlage häufen.

Häufige Fragen

Was bedeutet „Bilder richtig dimensionieren"?

Bilder in Abmessungen ausliefern, die nahe an ihrer Anzeigegröße liegen, statt eine große Datei zu laden, die der Browser herunterskaliert. Die überschüssigen Pixel verschwenden Bandbreite und verlangsamen die Seite, ohne das Aussehen zu verbessern. Die Empfehlung heißt in PageSpeed Insights „Bilder in angemessener Größe bereitstellen".

Wie finde ich falsch dimensionierte Bilder?

PageSpeed Insights listet jedes Bild mit seinem Sparpotenzial. In den Chrome DevTools lässt sich die intrinsische Größe eines Bildes mit seiner Anzeigegröße vergleichen, ein großer Unterschied markiert es als überdimensioniert.

Was sind die Attribute srcset und sizes?

Sie lassen ein einzelnes <img> mehrere Bildbreiten anbieten. srcset listet die Dateien mit ihren Pixelbreiten, und sizes sagt dem Browser, wie breit das Bild angezeigt wird, damit er die beste Passung für Bildschirm und Device Pixel Ratio lädt.

Verbessert die richtige Bildgröße die Core Web Vitals?

Ja. Ein kleineres Hauptbild lädt schneller, was den Largest Contentful Paint verbessert, und feste Breite und Höhe verhindern Layout-Verschiebungen. Beides ist Teil der Core Web Vitals, die ein Ranking-Signal sind.

Wie dimensioniere ich Bilder in WordPress richtig?

Originale nur so groß hochladen, wie sie angezeigt werden, das automatische srcset von WordPress nutzen und ein Bildoptimierungs-Plugin ergänzen, das skaliert und korrekte Abmessungen setzt. Prüfen, dass Theme oder Page-Builder das erzeugte Markup nicht überschreiben.

Was ist der Unterschied zwischen Bildgröße und Dateigröße?

Die Bildgröße sind die Pixelmaße, also Breite mal Höhe. Die Dateigröße ist das Gewicht in Kilobyte. Diese Empfehlung betrifft die Pixelmaße, und kleinere Maße senken meist auch die Dateigröße.