Hvad er Srcset?
Srcset er en HTML-billedattribut, der angiver en liste over billeder, som browseren kan vælge imellem baseret på skærmstørrelse og opløsning. Dette koncept er kendt som responsive billeder, der sikrer, at den mest passende billedversion indlæses til forskellige visningsforhold.
Her er et eksempel på, hvordan srcset fungerer:
<img srcset="eksempel-billede-480w.jpg 480w, eksempel-billede-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="eksempel-billede-800w.jpg" alt="Illustrationseksempel">.I dette eksempel fortæller srcset browseren, at den skal indlæse et 480-pixel bredt billede, hvis viewport-bredden er mindre end 600 pixels. Hvis viewport-bredden er mere end 600 pixel, vil browseren indlæse det større, 800 pixel brede billede.
Alternativt kan du angive pixeltætheden som betingelse i stedet for størrelsen:
<img srcset="eksempel-billede-1x.jpg 1x, eksempel-billede-2x.jpg 2x" src="eksempel-billede-1x.jpg" alt="Et andet illustrationseksempel">.Hvorfor er Srcset vigtigt for SEO?
Srcset er afgørende for SEO, fordi det gør det muligt for browsere at indlæse den mest passende billedstørrelse baseret på enhedens egenskaber. Denne optimering har flere fordele:
- Forbedret indlæsningshastighed: Større billeder har større filstørrelser, hvilket kan sænke indlæsningstiden for sider. Ved at indlæse billeder i passende størrelse til forskellige enheder hjælper srcset med at spare båndbredde og reducere sideindlæsningstiden.
- Bedre brugeroplevelse: Hurtigere indlæsning af sider forbedrer brugeroplevelsen, hvilket fører til lavere afvisningsprocent og større engagement.
- SEO-fordele: Sidens indlæsningshastighed er en direkte rangeringsfaktor for både mobil- og desktop-søgninger. Optimering af billeder ved hjælp af srcset kan have en positiv indvirkning på dine placeringer i søgemaskinerne.
Bedste praksis for responsive billeder
1. Tjek PageSpeed Insights for anbefalinger
PageSpeed Insights er et gratis værktøj fra Google, der giver forslag til at optimere din hjemmesides hastighed. Ved at indtaste din websides URL kan du modtage specifikke anbefalinger til billedoptimering, f.eks:
- Opdatering af billedformatet for bedre komprimering.
- Overvejer lazy-loading til billeder uden for skærmen eller skjulte billeder.
- Korrekt størrelse på billeder for at forbedre indlæsningstiden.
2. Brug billedelementet til art direction
<picture>-elementet gør det muligt for browsere at vise forskellige billeder baseret på enhedens egenskaber. Det er nyttigt, når man vil vise helt forskellige billeder i stedet for bare forskellige størrelser af det samme billede.
Her er et eksempel på brug af <picture>-elementet:
<picture> <source media="(min-width: 600px)" srcset="eksempel-billede.jpg, eksempel-billede-2x.jpg 2x"> <img src="eksempel-billede.jpg" alt="Eksempel på illustration"> </picture>I dette eksempel vil example-image .jpg eller example-image-2x. jpg blive vist på browserbredder på 600 px eller mere, afhængigt af enhedens pixeltæthed. Ved skærmbredder på mindre end 600 px, eller hvis <picture>-elementet ikke understøttes, vil <img>-elementet blive gengivet i stedet. Inkluder altid <img>-elementet for at sikre kompatibilitet.
3. Sørg for korrekt tilbagefald
Angiv altid et fallback-billede med src-attributten, hvis browseren ikke understøtter srcset eller <picture>-elementet. Det sikrer, at et billede altid vises, uanset browserens kapacitet.
4. Brug beskrivende alt-tekst
Inkluder altid beskrivende alt-tekst til dine billeder. Det forbedrer tilgængeligheden og giver kontekst til søgemaskinerne, hvilket forbedrer din SEO.
Konklusion
Brug af srcset er en vigtig praksis for at optimere billeder til forskellige enheder, sikre hurtigere indlæsningstider og forbedre brugeroplevelsen. Ved at følge bedste praksis kan du forbedre din hjemmesides ydeevne og SEO og gøre den mere effektiv og tilgængelig for brugerne.
