Bilder auf schmalen Geräten: Höchstbreite statt fester Breite

Ein Bild darf nie breiter werden als sein Platz. Der Prüfer misst je Geräteprofil, ob einzelne Bausteine über den Anzeigebereich hinausragen — Bilder mit fester Breite sind dabei einer der häufigsten Verursacher.

Was dazu geprüft wird

2 Prüfpunkte aus dem den erhobenen Signalen dieses Prüfbereichs — die Liste stammt aus dem Messkern, nicht aus diesem Text.

Elemente passen in den Anzeigebereich
Ob einzelne Bausteine — Tabellen, eingebettete Inhalte, Bilder — breiter sind als das Gerät.
Vier Geräteprofile
Smartphone (390 px), Tablet (768 px), Desktop (1440 px) und Wide (1920 px), im echten Browser gerendert — keine bloße Fensterverkleinerung.

Jeder dieser Punkte steht mit Erklärung in der vollständigen Prüfpunktliste.

Worauf es in der Praxis ankommt

Die Grundeinstellung, die fast alles löst, ist eine Höchstbreite von 100 Prozent bei automatischer Höhe. Ohne sie behält ein 1200 Pixel breites Foto seine Breite auch auf einem 390-Pixel-Bildschirm.

Getrennt davon steht die Frage der Dateigröße: Ein für den Desktop gedachtes Bild ist auf dem Telefon nicht nur zu breit, sondern auch unnötig schwer. Das schlägt auf die Ladezeit durch und wird im Prüfbereich Core Web Vitals sichtbar.

Bilder ohne angegebene Abmessungen verursachen zusätzlich Layoutverschiebungen beim Laden — derselbe Fehler wirkt damit in zwei Prüfbereichen.

Häufige Fragen

Reicht max-width: 100%?

Für das Überlauf-Problem in aller Regel ja. Für die Ladezeit nicht — dafür braucht es zusätzlich passend große Dateien je Bildschirmgröße.

Sollen wir Breite und Höhe trotzdem angeben?

Ja. Sie verhindern das Verspringen des Layouts beim Laden. Zusammen mit einer Höchstbreite in CSS ergibt das die stabile Darstellung.

Weitere Themen aus Responsive

Website prüfen lassen Erst das Prüfverfahren verstehen →