Billeder og grafik, der skalerer perfekt på alle skærme – sådan gør du
Billeder og grafik, der skalerer perfekt på alle skærme – sådan gør du
Et moderne website skal fungere på alt fra store desktops til små mobilskærme. Det gælder ikke kun tekst og layout – billeder og grafik skal også tilpasse sig, uden at miste kvalitet eller ødelægge designet. Responsive billeder er derfor en central del af enhver professionel weboplevelse. Her får du en guide til, hvordan du får dine billeder og grafik til at skalere perfekt på alle skærme.
Hvorfor responsive billeder er vigtige
Når et billede ikke skalerer korrekt, kan det enten blive for stort og sløvt at indlæse på mobilen – eller for småt og uskarpt på en stor skærm. Det påvirker både brugeroplevelsen og websitets hastighed. Google vurderer endda mobilvenlighed som en del af sin søgealgoritme, så der er også SEO-fordele ved at optimere billeder.
Kort sagt: Responsive billeder handler om at levere den rigtige version af et billede til den rigtige enhed – hver gang.
Brug af fleksible billedstørrelser i CSS
Den mest grundlæggende metode til at få billeder til at skalere er at gøre dem fleksible i CSS. Det gøres typisk med en simpel regel:
img {
max-width: 100%;
height: auto;
}
Denne regel sikrer, at billedet aldrig bliver bredere end dets container, men stadig bevarer proportionerne. Det er en enkel løsning, der fungerer i de fleste tilfælde – især til billeder, der skal følge med layoutets bredde.
Optimer med HTML’s srcset og sizes
For at tage skridtet videre kan du bruge HTML-attributterne srcset og sizes. De gør det muligt for browseren selv at vælge den mest passende billedfil ud fra skærmstørrelse og opløsning.
Eksempel:
<img
src="billede-800.jpg"
srcset="billede-400.jpg 400w, billede-800.jpg 800w, billede-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Eksempel på responsivt billede">
Her vælger browseren automatisk den version, der passer bedst til brugerens skærm. Det betyder hurtigere indlæsning og skarpere billeder – uden at du skal lave særskilte versioner af siden.
SVG – grafik, der altid er skarp
Til ikoner, logoer og illustrationer er SVG (Scalable Vector Graphics) et oplagt valg. I modsætning til almindelige billedfiler som JPG og PNG er SVG vektorbaseret, hvilket betyder, at grafikken kan skaleres uendeligt uden at miste kvalitet.
SVG-filer fylder ofte mindre end tilsvarende rasterbilleder og kan styles direkte med CSS. Det gør dem ideelle til responsive designs, hvor elementer skal tilpasse sig dynamisk.
Brug af moderne billedformater
Nye billedformater som WebP og AVIF giver markant bedre komprimering end traditionelle formater. De bevarer høj kvalitet ved lavere filstørrelse, hvilket gør dem perfekte til responsive websites.
Du kan bruge <picture>-elementet til at tilbyde flere formater, så browseren selv vælger det bedste:
<picture>
<source srcset="billede.avif" type="image/avif">
<source srcset="billede.webp" type="image/webp">
<img src="billede.jpg" alt="Responsivt billede i moderne format">
</picture>
På den måde får moderne browsere de mest effektive formater, mens ældre stadig kan vise billedet i et klassisk format.
Husk performance og lazy loading
Selv de bedste billeder kan gøre et website langsomt, hvis de ikke håndteres rigtigt. Brug lazy loading til at udsætte indlæsningen af billeder, der ikke er synlige på skærmen endnu. Det gøres nemt med HTML-attributten:
<img src="billede.jpg" loading="lazy" alt="Eksempel på lazy loading">
Det forbedrer hastigheden markant – især på sider med mange billeder.
Læs også:
Test på tværs af enheder
Når du har implementeret responsive billeder, er det vigtigt at teste resultatet. Brug browserens udviklerværktøjer til at simulere forskellige skærmstørrelser, og tjek, at billederne ser skarpe ud og indlæses hurtigt. Test også på rigtige enheder, hvis muligt – især på mobil, hvor netværksforbindelsen kan variere.
En helhedsorienteret tilgang
At få billeder og grafik til at skalere perfekt handler ikke kun om teknik, men også om design. Overvej, hvordan billederne understøtter indholdet, og hvordan de placeres i layoutet. Et godt responsivt design er en balance mellem æstetik, ydeevne og brugervenlighed.
Når du kombinerer fleksible billeder, moderne formater og gennemtænkt design, får du et website, der ser professionelt ud – uanset om det vises på en smartphone, tablet eller stor skærm.
Læs også:
