Skip to content
Discebo.dk

§ 12

Responsive image — required file width (srcset)

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

Answer: 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.

Formula

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

Symbols and units in the formula
SymbolMeaningUnit
visningsbredde_pxDisplay width in CSSpx
dprDevice pixel ratio (DPR)—
=Nødvendig fysisk pixelbreddepx
=Anbefalet srcset-breddetrinpx

Validity and source

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

Worked example

The calculator's own default values inserted. The figures are calculated with exactly the formula the tool uses.

Substituted

  • Display width in CSS400 px
  • Device pixel ratio (DPR)2

Giver

  • Nødvendig fysisk pixelbredde800 px
  • Anbefalet srcset-breddetrin1,024 px

Members only

The calculator itself is locked

Create a free user account to unlock all articles, calculators, templates and range — and get access to quizzes and classes. It takes less than a minute: name, email and a password. No payment card.

Create free user →Log in

Want to try something first? See what you can use without an account — the junior zone, the encyclopedia, the videos and more.

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.

Step by step

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

Typical errors

  • 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.

Examples from everyday life

Produktkort på en iPhone

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

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

It means: 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.

Display width in CSS
1,200 px
Device pixel ratio (DPR)
Standardskærm (1x)

It means: 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.

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

It means: Det kræver 1,440 px, og trinnet er 1,600 px.

Rule of thumb

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

How to check the answer

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