§ 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
| Symbol | Meaning | Unit |
|---|---|---|
| visningsbredde_px | Visningsbredde i CSS | px |
| dpr | Device pixel ratio (DPR) | — |
| = | Nødvendig fysisk pixelbredde | px |
| = | Anbefalet srcset-breddetrin | px |
Gyldighed og kilde
- Source
- web.dev/MDN — responsive billeder (srcset/sizes-teknik)
Worked example
Beregnerens egne standardværdier sat ind. Tallene er regnet med præcis den formel værktøjet bruger.
Sat ind
- Visningsbredde i 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.
Want to try something first? See what you can use without an account — the junior zone, the encyclopedia, the videos and more.