Mehrere Bilddateien in srcset reichen nicht, wenn sizes einen unpassenden Bildplatz beschreibt. Der Browser berücksichtigt diese Angabe zusammen mit weiteren Bedingungen, etwa der Pixeldichte. Eine mobile Ansicht kann daher eine unnötig große Ressource erhalten.
In diesem vereinfachten Beispiel nimmt das Bild bis 640 Pixeln die Ansichtsbreite und darüber 600 Pixel ein:
<img src="/bild-600.webp"
srcset="/bild-400.webp 400w, /bild-800.webp 800w, /bild-1200.webp 1200w"
sizes="(max-width: 640px) 100vw, 600px"
width="1200" height="800" alt="Produktdetail">
Die Zahlen beschreiben dieses Beispiellayout. Hat dein Container seitliche Abstände oder eine andere Maximalbreite, muss die Beschreibung dazu passen.
Auswahl sichtbar machen
Markiere das Bild in den Entwicklerwerkzeugen. currentSrc zeigt die gewählte Ressource. Vergleiche diesen Wert mit der tatsächlichen Darstellungsbreite und der simulierten Pixeldichte. Eine bestimmte Dateiauswahl ist nicht allein aus der Fensterbreite ableitbar.
Wiederhole die Prüfung mit frischen Netzwerkbedingungen. Bereits geladene Ressourcen können die Beobachtung beim bloßen Verkleinern eines Fensters beeinflussen. Prüfe außerdem, ob die Dateien hinter den Kandidaten wirklich unterschiedliche Abmessungen besitzen.
Vermeide eine pauschale Korrektur sämtlicher sizes-Werte. Eine volle Hero-Breite und eine kleine Produktkarte stellen verschiedene Anforderungen. Der Bildgrößen-Rechner hilft bei der Planung; die konkrete Auswahl kontrollierst du am implementierten Layout.