Hva er Srcset?
Srcset er et HTML-bildeattributt som angir en liste over bilder som nettleseren kan velge mellom, basert på skjermstørrelse og oppløsning. Dette konseptet er kjent som responsive bilder, og sørger for at den mest hensiktsmessige bildeversjonen lastes inn for ulike visningsforhold.
Her er et eksempel på hvordan srcset fungerer:
<img srcset="eksempel-image-480w.jpg 480w, eksempel-image-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="eksempel-image-800w.jpg" alt="Illustrasjonseksempel">I dette eksempelet forteller srcset nettleseren at den skal laste inn et 480 piksler bredt bilde hvis visningsportbredden er mindre enn 600 piksler. Hvis bredden på visningsporten er mer enn 600 piksler, vil nettleseren laste inn det større bildet på 800 piksler.
Alternativt kan du angi pikseltetthet som en betingelse i stedet for størrelse:
<img srcset="eksempel-bilde-1x.jpg 1x, eksempel-bilde-2x.jpg 2x" src="eksempel-bilde-1x.jpg" alt="Et annet illustrasjonseksempel">Hvorfor er Srcset viktig for SEO?
Srcset er avgjørende for SEO fordi det gjør det mulig for nettlesere å laste inn den mest passende bildestørrelsen basert på enhetens egenskaper. Denne optimaliseringen har flere fordeler:
- Forbedret innlastingshastighet: Større bilder har større filstørrelser, noe som kan redusere innlastingstiden for sider. Ved å laste inn bilder i riktig størrelse for ulike enheter bidrar srcset til å spare båndbredde og redusere innlastingstiden for siden.
- Bedre brukeropplevelse: Raskere innlastingstid forbedrer brukeropplevelsen, noe som fører til lavere fluktfrekvens og høyere engasjement.
- SEO-fordeler: Sidens innlastingshastighet er en direkte rangeringsfaktor for både mobil- og PC-søk. Optimalisering av bilder ved hjelp av srcset kan ha en positiv innvirkning på rangeringen i søkemotorene.
Beste praksis for responsive bilder
1. Sjekk PageSpeed Insights for anbefalinger
PageSpeed Insights er et gratis verktøy fra Google som gir deg forslag til hvordan du kan optimalisere hastigheten på nettstedet ditt. Ved å skrive inn nettadressen til nettsiden din, kan du motta spesifikke anbefalinger for bildeoptimalisering, for eksempel:
- Oppdatering av bildeformatet for bedre komprimering.
- Vurderer lazy-loading for bilder utenfor skjermen eller skjulte bilder.
- Riktig størrelse på bilder for å forbedre lastetiden.
2. Bruk Bildeelementet til Art Direction
<picture>-elementet gjør det mulig for nettlesere å vise forskjellige bilder basert på enhetens egenskaper. Dette er nyttig når du ønsker å vise helt forskjellige bilder i stedet for bare forskjellige størrelser av det samme bildet.
Her er et eksempel på bruk av <picture>-elementet:
<bilde> <source media="(min-width: 600px)" srcset="eksempel-bilde.jpg, eksempel-bilde-2x.jpg 2x"> <img src="eksempel-bilde.jpg" alt="Eksempelillustrasjon"> </bilde>I dette eksemplet vil eksempel-bilde.jpg eller eksempel-bilde-2x.jpg vises på nettleserbredder på 600 piksler eller mer, avhengig av enhetens pikseltetthet. For skjermbredder under 600 piksler, eller hvis <picture>-elementet ikke støttes, vil <img>-elementet gjengis i stedet. Inkluder alltid <img>-elementet for å sikre kompatibilitet.
3. Sørg for riktige fallbacks
Oppgi alltid et reservebilde med src-attributtet i tilfelle nettleseren ikke støtter srcset eller <picture>-elementet. Dette sikrer at et bilde alltid vises, uavhengig av nettleserens funksjoner.
4. Bruk beskrivende alternativtekst
Inkluder alltid beskrivende alt-tekst for bildene dine. Dette forbedrer tilgjengeligheten og gir kontekst for søkemotorer, noe som forbedrer SEO-en din.
Konklusjon
Bruk av srcset er en viktig praksis for å optimalisere bilder for ulike enheter, noe som sikrer raskere innlastingstid og bedre brukeropplevelse. Ved å følge beste praksis kan du forbedre nettstedets ytelse og SEO, og gjøre det mer effektivt og tilgjengelig for brukerne.
