§ 12

Responsives Bild — erforderliche Dateibreite (srcset)

Hvilken filbredde skal jeg bruge til srcset, så billedet ikke bliver sløret på denne skærm?

Antwort: Et billede, der vises 400 CSS-pixels bredt på en skærm med device pixel ratio (DPR) 2, skal reelt leveres i 800 fysiske pixels bredde for at se skarpt ud — ellers bliver det sløret. Denne teknik er kernen i srcset/sizes-attributterne til responsive billeder. Beregneren viser den nødvendige pixelbredde og runder op til nærmeste almindelige srcset-breddetrin.

Formel

nødvendig pixelbredde = visningsbredde (CSS px) × device pixel ratio

vælg den mindste almindelige srcset-breddefil (320/480/640/768/1024/1280/1600/1920/2560 px), der er ≥ den nødvendige pixelbredde

Symbole und Einheiten in der Formel
Symbol	Bedeutung	Einheit
visningsbredde_px	Anzeigebreite in CSS	px
dpr	Device pixel ratio (DPR)	—
=	Nødvendig fysisk pixelbredde	px
=	Anbefalet srcset-breddetrin	px

Gültigkeit und Quelle

Quelle: web.dev/MDN — responsive billeder (srcset/sizes-teknik)

Rechenbeispiel

Die eigenen Standardwerte des Rechners sind eingesetzt. Die Zahlen sind mit genau der Formel berechnet, die das Werkzeug verwendet.

Sat ind

Anzeigebreite in CSS400 px
Device pixel ratio (DPR)2

Geber

Nødvendig fysisk pixelbredde800 px
Anbefalet srcset-breddetrin1.024 px

Nur für Mitglieder

Der Rechner selbst ist gesperrt

Lege einen kostenlosen Zugang an, um alle Artikel, Rechner, Vorlagen und das Sortiment freizuschalten — und Zugriff auf Quizze und Klassen zu erhalten. Es dauert unter einer Minute: Name, E-Mail und ein Passwort. Keine Zahlungskarte.

Kostenlosen Benutzer erstellen →Anmelden

Willst du zuerst etwas ausprobieren? Sieh, was du ohne Konto nutzen kannst — der Junior-Bereich, das Lexikon, die Videos und mehr.

Sådan bruger du den

Når et billede skal se skarpt ud på telefoner og retina-skærme uden at tvinge alle til at hente en kæmpefil, laver du flere størrelser og en srcset. Beregneren viser hvor mange pixels billedet skal have, og hvilket breddetrin der passer.

Schritt für Schritt

Find den bredde, billedet vises i, i CSS-pixels ved det breakpoint, du tester.
Find enhedens device pixel ratio: 1 på almindelige skærme, 2-3 på telefoner.
Gang de to tal. Det er den fysiske pixelbredde, billedet skal have.
Vælg det nærmeste breddetrin, der er mindst så stort, og eksportér den fil.

Typische Fehler

At levere ét kæmpebillede til alle. Telefoner på mobilnet henter så flere MB, de ikke kan vise.
At glemme sizes. Uden sizes antager browseren, at billedet er 100vw bredt, og vælger for stor en fil på desktop.
At gå over DPR 2 for store billeder. Forskellen på 2 og 3 kan næsten ikke ses, men filen bliver dobbelt så tung.

Beispiele aus dem Alltag

Produktkort på en iPhone

Et produktbillede vises 343 CSS-pixels bredt på en iPhone med DPR 3.

Anzeigebreite in CSS: 343 px
Device pixel ratio (DPR): High-end mobil (3x)

Es bedeutet: Billedet skal være 1.029 px bredt, og det nærmeste trin er 1.280 px. Med sizes="100vw" vælger browseren selv den fil.

Hero på en almindelig skærm

En hero vises 1200 px bredt på en kontorskærm med DPR 1.

Anzeigebreite in CSS: 1.200 px
Device pixel ratio (DPR): Standardskærm (1x)

Es bedeutet: Der skal bruges 1.200 px, og trinnet er 1.280 px. Det er unødvendigt at sende en 2560 px-fil til den skærm.

Billede i et blogindlæg på MacBook

Billedet i en artikel vises 720 px bredt på en MacBook med DPR 2.

Anzeigebreite in CSS: 720 px
Device pixel ratio (DPR): Retina/de fleste smartphones (2x)

Es bedeutet: Det kræver 1.440 px, og trinnet er 1.600 px.

Faustregel

Lav breddetrin ca. hver 1,5 gang: 480, 768, 1024, 1600, 2560.

So überprüfst du die Antwort

Åbn DevTools, vælg billedet, og se currentSrc. Den valgte fil skal mindst være visningsbredde × DPR.