Bilder in passender Grösse

Was wir prüfen

Wir laden die Startseite in einem echten Browser und betrachten alle Bilder, die mindestens 400 Pixel breit sind (ohne SVG-Grafiken). Für jedes prüfen wir, ob es in mehreren Grössen angeboten wird, über das Attribut srcset oder das Element <picture>.

• Gibt es mindestens zwei grosse Bilder und keines davon in mehreren Grössen, gibt es eine Warnung.
• Gibt es nur einzelne grosse Bilder in nur einer Grösse, einen Hinweis.

Lädt die Seite Bilder per JavaScript nach (Lazy Loading mit Platzhalter), steht beim Öffnen nur ein winziger Platzhalter da. Solche Bilder beurteilen wir nach ihrer angezeigten Grösse und nach der Bildquelle, die das Skript später lädt. Ist keine Quelle erkennbar, bleiben sie unbewertet und erscheinen in der Detailansicht.

Warum das wichtig ist

Ein Titelbild, das auf einem grossen Bildschirm 2000 Pixel breit erscheint, ist auf dem Smartphone vielleicht 400 Pixel breit. Mit nur einer Fassung lädt das Smartphone trotzdem das grosse Bild, oft das Fünf- bis Zehnfache der nötigen Datenmenge.

Das bedeutet für Besucher unterwegs:

• längere Ladezeit, gerade bei mittlerem Empfang,
• mehr verbrauchtes Datenvolumen,
• einen späteren Hauptinhalt, was sich in der Kennzahl LCP und damit bei Google niederschlägt.

Mit srcset beschreibt die Seite mehrere Fassungen desselben Bildes. Der Browser wählt selbst die passende, abhängig von Bildschirmbreite und Pixeldichte.

So behebst Du es

WordPress

WordPress erzeugt beim Hochladen automatisch mehrere Grössen und setzt srcset von selbst, sofern das Bild über die Mediathek eingefügt wird. Fehlt srcset, hat das meist einen dieser Gründe:

• Das Bild ist als Hintergrundbild im CSS eingebunden, etwa in einem Page-Builder-Abschnitt. Hintergrundbilder kennen kein srcset. Viele Builder bieten aber getrennte Hintergrundbilder für Desktop, Tablet und Smartphone an.
• Das Bild wurde mit einer festen Adresse statt über die Mediathek eingefügt.
• Ein Slider- oder Galerie-Plugin gibt immer das Original aus. Prüfe seine Einstellungen oder wechsle das Plugin.

Wix, Jimdo, Squarespace

Die Baukästen liefern Bilder automatisch in passender Grösse aus. Wird hier trotzdem etwas gemeldet, stammen die Bilder oft aus eingebetteten Fremd-Widgets.

Eigener Code

<img src="team-800.webp"
     srcset="team-400.webp 400w, team-800.webp 800w, team-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     width="1600" height="1067" alt="Unser Team">

sizes sagt dem Browser, wie breit das Bild auf der Seite erscheint. So kann er die passende Fassung schon vor dem Layout wählen.

So prüfst Du es selbst

Klick mit der rechten Maustaste auf ein grosses Bild und wähle «Untersuchen». Steht im <img>-Element ein Attribut srcset mit mehreren Einträgen, ist alles in Ordnung.

Häufige Fragen

Was ist der Unterschied zum Artikel «Bilder»?

Dort geht es um Format und Grösse jedes Bildes. Hier geht es darum, ob die Seite verschiedenen Geräten verschieden grosse Fassungen anbietet. Beides zusammen ergibt schnelle Bilder auf jedem Gerät.

Muss jedes Bild in mehreren Grössen hochgeladen werden?

Nein. CMS wie WordPress erzeugen die Fassungen beim Hochladen automatisch. Hochgeladen wird ein genügend grosses Original, den Rest erledigt das System.