Hvad er Responsive images (srcset)?
Responsive images (srcset) er en HTML-teknik, der gør det muligt for en hjemmeside at levere forskellige billedversioner afhængigt af brugerens skærmstørrelse og opløsning. Ved hjælp af srcset-attributten kan browseren automatisk vælge det mest passende billede, hvilket forbedrer både hastighed og brugeroplevelse. Dette er især vigtigt for SEO, da hurtigere indlæsningstid kan påvirke placeringen i søgeresultaterne.
Hvornår bruges det?
Responsive images (srcset) anvendes, når man vil optimere billeder til både desktop- og mobile enheder uden at gå på kompromis med kvalitet eller ydeevne. SEO-mæssigt bruges teknikken for at sikre, at siden ikke belastes af unødvendigt store billeder på mindre skærme, hvilket kan gøre hjemmesiden hurtigere og mere mobilvenlig. Dette er vigtigt for at opfylde Googles krav om mobilt optimerede sider og hurtige indlæsningstider, som begge er rangeringsfaktorer.
Eksempel: En webshop bruger srcset til produktbilleder, så mobilenheder får hurtigere indlæsning med små billedfiler, mens store, detaljerede billeder kun vises på desktops. Dette reducerer dataforbrug og optimerer visningen til brugerens enhed uden ekstra kodeændringer.
Typiske fejl
- Bruger kun ét billede uden at udnytte
srcset, hvilket giver unødvendigt store filer til mobile brugere. - Glemmer at angive størrelser (
sizes), så browseren ikke vælger det optimale billede. - Indsætter billeder af for lav kvalitet, som ser slørede ud på store skærme.
Relaterede begreber: Billedoptimering, lazy loading, mobile first
