Hvor stort skal billedet være?

Visningsbredde og skarpe skærme

En hjemmeside bliver bygget i CSS-pixels. Mange telefoner og bærbare har skærme med to eller tre fysiske pixels for hver CSS-pixel. Et billede, der vises 800 CSS-pixels bredt, ser derfor skarpest ud, når det er omkring 1600 pixels bredt. Større end det giver sjældent synlig forskel, men gør filen tungere.

Billeder til deling

Når en side bliver delt på sociale medier, vises et forhåndsbillede fra sidens Open Graph-oplysninger. Et format på 1200 x 630 pixels (cirka 1,91:1) er den mest brugte anbefaling og ser godt ud de fleste steder. Hold vigtig tekst og ansigter væk fra kanterne, fordi nogle tjenester beskærer billedet.

Bredde og højde i HTML

Skriv billedets bredde og højde i <img>-tagget. Så kan browseren holde pladsen fri, før billedet er hentet, og teksten hopper ikke ned, når det dukker op. Det er en af de ting, Google måler i Core Web Vitals som visuel stabilitet.

Flere størrelser med srcset

Med srcset kan du give browseren det samme billede i flere bredder, så en telefon henter en lille fil, og en stor skærm henter en større. Browseren vælger selv ud fra skærmen. Beregneren laver et eksempel med dine egne mål.

Hent kun det, der ses

Billeder længere nede på siden kan få loading="lazy", så de først hentes, når man nærmer sig dem. Brug det ikke på det store billede øverst på siden, som skal vises med det samme.

Tryk er noget andet

Til tryk regner man i pixels per tomme (ppi). 300 ppi er en almindelig anbefaling til tryk, der ses tæt på, som fotos og brochurer. Et billede på 3000 pixels i bredden giver dermed 25,4 cm ved 300 ppi. Til skærm betyder ppi-tallet i filen ingenting: det er kun antallet af pixels, der tæller.