Przejdź do treści
Discebo.dk

§ 12

Obraz responsywny — wymagana szerokość pliku (srcset)

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

Odpowiedź: 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.

Wzór

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 i jednostki we wzorze
SymbolZnaczenieJednostka
visningsbredde_pxSzerokość widoku w CSSpx
dprDevice pixel ratio (DPR)—
=Nødvendig fysisk pixelbreddepx
=Anbefalet srcset-breddetrinpx

Ważność i źródło

Źródło
web.dev/MDN — responsive billeder (srcset/sizes-teknik)

Przykład obliczeniowy

Wstawiono domyślne wartości kalkulatora. Liczby obliczono dokładnie tym wzorem, którego używa narzędzie.

Wstawiono

  • Szerokość widoku w CSS400 px
  • Device pixel ratio (DPR)2

Dawca

  • Nødvendig fysisk pixelbredde800 px
  • Anbefalet srcset-breddetrin1024 px

Tylko dla członków

Sam kalkulator jest zablokowane

Utwórz bezpłatne konto, aby odblokować wszystkie artykuły, kalkulatory, szablony i asortyment — i uzyskać dostęp do quizów i klas. Zajmuje to poniżej minuty: imię, email i hasło. Żadna karta kredytowa.

Utwórz darmowe konto →Zaloguj się

Chcesz najpierw czegoś spróbować? Zobacz, czego możesz używać bez konta — strefa junior, leksykon, filmy i więcej.

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.

Krok za krokiem

  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.

Typowe błędy

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

Przykłady z codzienności

Produktkort på en iPhone

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

Szerokość widoku w CSS
343 px
Device pixel ratio (DPR)
High-end mobil (3x)

To znaczy: Billedet skal være 1029 px bredt, og det nærmeste trin er 1280 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.

Szerokość widoku w CSS
1200 px
Device pixel ratio (DPR)
Standardskærm (1x)

To znaczy: Der skal bruges 1200 px, og trinnet er 1280 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.

Szerokość widoku w CSS
720 px
Device pixel ratio (DPR)
Retina/de fleste smartphones (2x)

To znaczy: Det kræver 1440 px, og trinnet er 1600 px.

Reguła praktyczna

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

Jak sprawdzić odpowiedź

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