§ 12
Responsivt billede — nødvendig filbredde (srcset)
Hvilken filbredde skal jeg bruge til srcset, så billedet ikke bliver sløret på denne skærm?
Svar: 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
| Symbol | Betydning | Enhed |
|---|---|---|
| visningsbredde_px | Visningsbredde i CSS | px |
| dpr | Device pixel ratio (DPR) | — |
| = | Nødvendig fysisk pixelbredde | px |
| = | Anbefalet srcset-breddetrin | px |
Gyldighed og kilde
- Kilde
- web.dev/MDN — responsive billeder (srcset/sizes-teknik)
Regneeksempel
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
Kun for medlemmer
Selve beregneren er låst
Opret en gratis bruger for at låse op for alle artikler, beregnere, skabeloner og sortiment — og få adgang til quizzer og klasser. Det tager under et minut: navn, email og en adgangskode. Intet betalingskort.
Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.