Spring til indhold
Discebo.dk

§ 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

Symboler og enheder i formlen
SymbolBetydningEnhed
visningsbredde_pxVisningsbredde i CSSpx
dprDevice pixel ratio (DPR)—
=Nødvendig fysisk pixelbreddepx
=Anbefalet srcset-breddetrinpx

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.

Opret gratis bruger →Log ind

Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.

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.

Trin for trin

  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.

Typiske fejl

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

Eksempler fra hverdagen

Produktkort på en iPhone

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

Visningsbredde i CSS
343 px
Device pixel ratio (DPR)
High-end mobil (3x)

Det betyder: 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.

Visningsbredde i CSS
1.200 px
Device pixel ratio (DPR)
Standardskærm (1x)

Det betyder: 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.

Visningsbredde i CSS
720 px
Device pixel ratio (DPR)
Retina/de fleste smartphones (2x)

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

Tommelfingerregel

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

Sådan tjekker du svaret

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