Kaj je Srcset?
Srcset je slikovni atribut HTML, ki določa seznam slik, med katerimi lahko brskalnik izbira glede na velikost in ločljivost zaslona. Ta koncept je znan kot odzivne slike in zagotavlja, da se za različne pogoje gledanja naloži najprimernejša različica slike.
Tukaj je primer delovanja srcset:
<img srcset="example-image-480w.jpg 480w, example-image-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="example-image-800w.jpg" alt="Primer ilustracije">V tem primeru srcset pove brskalniku, da naloži sliko, široko 480 slikovnih pik, če je širina vidnega polja manjša od 600 slikovnih pik. Če je širina vidnega polja večja od 600 slikovnih pik, bo brskalnik naložil večjo sliko, široko 800 slikovnih pik.
Namesto velikosti lahko kot pogoj določite tudi gostoto slikovnih pik:
<img srcset="example-image-1x.jpg 1x, example-image-2x.jpg 2x" src="example-image-1x.jpg" alt="Drug primer ilustracije">Zakaj je Srcset pomemben za SEO?
Srcset je ključnega pomena za SEO, saj brskalnikom omogoča, da naložijo najprimernejšo velikost slike glede na značilnosti naprave. Ta optimizacija ima več prednosti:
- Izboljšana hitrost nalaganja: Večje slike imajo večje datoteke, kar lahko upočasni nalaganje strani. Z nalaganjem slik ustrezne velikosti za različne naprave srcset pomaga prihraniti pasovno širino in skrajšati čas nalaganja strani.
- Boljša uporabniška izkušnja: Hitrejše nalaganje strani izboljša uporabniško izkušnjo, kar vodi do nižje stopnje odklonov in večje vključenosti.
- Prednosti SEO: Hitrost nalaganja strani je neposredni dejavnik razvrščanja tako pri mobilnih kot namiznih iskanjih. Optimizacija slik z uporabo srcset lahko pozitivno vpliva na uvrstitev v iskalnikih.
Najboljše prakse za odzivne slike
1. Preverite priporočila storitve PageSpeed Insights
PageSpeed Insights je brezplačno Googlovo orodje, ki ponuja predloge za optimizacijo hitrosti spletnega mesta. Z vnosom naslova URL svoje spletne strani lahko prejmete posebna priporočila za optimizacijo slik, kot so:
- Posodobitev formata slike za boljše stiskanje.
- Razmislek o lenobnem nalaganju za slike zunaj zaslona ali skrite slike.
- Ustrezno določanje velikosti slik za izboljšanje časa nalaganja.
2. Uporaba elementa slike za umetniško vodenje
Element <picture> brskalnikom omogoča prikaz različnih slik glede na značilnosti naprave. To je uporabno, kadar želite prikazati popolnoma različne slike in ne le različne velikosti iste slike.
Tukaj je primer uporabe elementa <picture>:
<picture> <source media="(min-width: 600px)" srcset="example-image.jpg, example-image-2x.jpg 2x"> <img src="example-image.jpg" alt="Primer ilustracije"> </picture>V tem primeru se bo primer-slika.jpg ali primer-slika-2x.jpg prikazal v brskalnikih širine 600px ali več, odvisno od gostote slikovnih pik naprave. Če je širina zaslona manjša od 600px ali če element <picture> ni podprt, bo namesto tega prikazan element <img>. Za zagotovitev združljivosti vedno vključite element <img>.
3. Zagotovite pravilen povratni ukrep
Vedno zagotovite nadomestno sliko z atributom src, če brskalnik ne podpira srcset ali elementa <picture>. S tem zagotovite, da se slika vedno prikaže, ne glede na zmožnosti brskalnika.
4. Uporabite opisno alternativno besedilo
Vedno vključite opisno besedilo za slike . To izboljša dostopnost in zagotavlja kontekst za iskalnike, kar izboljša vašo SEO.
Zaključek
Uporaba srcset je pomembna praksa za optimizacijo slik za različne naprave, ki zagotavlja hitrejše nalaganje in boljšo uporabniško izkušnjo. Z upoštevanjem najboljših praks lahko izboljšate zmogljivost svojega spletnega mesta in SEO ter ga naredite učinkovitejšega in dostopnejšega za uporabnike.
