Kas yra Srcset?
Srcset - tai HTML vaizdo atributas, kuriame nurodomas vaizdų sąrašas, iš kurio naršyklė gali rinktis pagal ekrano dydį ir skiriamąją gebą. Ši koncepcija vadinama jautriaisiais paveikslėliais, užtikrinančiais, kad skirtingomis žiūrėjimo sąlygomis būtų įkeliama tinkamiausia paveikslėlio versija.
Štai pavyzdys, kaip veikia 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="Iliustracijos pavyzdys">Šiame pavyzdyje srcset nurodo naršyklei įkelti 480 pikselių pločio paveikslėlį, jei rodinio plotis yra mažesnis nei 600 pikselių. Jei rodinio plotis didesnis nei 600 pikselių, naršyklė įkelia didesnį, 800 pikselių pločio paveikslėlį.
Taip pat vietoj dydžio kaip sąlygą galite nustatyti pikselių tankį:
<img srcset="example-image-1x.jpg 1x, example-image-2x.jpg 2x" src="example-image-1x.jpg" alt="Kitas iliustracijos pavyzdys">Kodėl Srcset yra svarbus SEO?
Srcset yra labai svarbus SEO optimizavimui, nes leidžia naršyklėms įkelti tinkamiausio dydžio paveikslėlį, atsižvelgiant į įrenginio savybes. Šis optimizavimas turi keletą privalumų:
- Patobulinta įkėlimo sparta: Didesni paveikslėliai yra didesnio dydžio, todėl gali sulėtėti puslapio įkėlimo laikas. Įkėlus tinkamo dydžio vaizdus skirtingiems įrenginiams, srcset padeda taupyti duomenų srauto pralaidumą ir sutrumpina puslapio įkėlimo laiką.
- Geresnė naudotojo patirtis: Greitesnis puslapio įkėlimo laikas pagerina naudotojų patirtį, todėl sumažėja atmetimo rodikliai ir padidėja įsitraukimas.
- SEO privalumai: Puslapio įkėlimo greitis yra tiesioginis reitingavimo veiksnys tiek mobiliųjų, tiek stacionariųjų kompiuterių paieškose. Paveikslėlių optimizavimas naudojant srcset gali teigiamai paveikti jūsų pozicijas paieškos sistemoje.
Geriausia reaguojančių vaizdų praktika
1. Patikrinkite "PageSpeed Insights" rekomendacijas
"PageSpeed Insights" - tai nemokamas "Google" įrankis, kuriame pateikiami pasiūlymai, kaip optimizuoti svetainės greitį. Įvedę savo tinklalapio URL, galite gauti konkrečių vaizdo optimizavimo rekomendacijų, pvz:
- Atnaujintas vaizdo formatas, kad būtų geriau suspaustas.
- Svarstoma galimybė tingiai įkelti už ekrano esančius arba paslėptus vaizdus.
- Tinkamas vaizdų dydžio nustatymas siekiant pagerinti įkėlimo laiką.
2. Paveikslėlio elemento naudojimas meno krypčiai
Elementas <picture> leidžia naršyklėms rodyti skirtingus vaizdus, atsižvelgiant į įrenginio savybes. Tai naudinga, kai norite rodyti visiškai skirtingus paveikslėlius, o ne tik skirtingus to paties paveikslėlio dydžius.
Pateikiame <picture> elemento naudojimo pavyzdį:
<picture> <source media="(min-width: 600px)" srcset="example-image.jpg, example-image-2x.jpg 2x"> <img src="example-image.jpg" alt="Iliustracijos pavyzdys"> </picture>Šiame pavyzdyje pavyzdys-image.jpg arba pavyzdys-image-2x.jpg bus rodomi naršyklėje, kurios plotis yra 600 px ar daugiau, priklausomai nuo įrenginio pikselių tankio. Jei ekrano plotis mažesnis nei 600 px arba jei elementas <picture> nepalaikomas, vietoj jo bus atvaizduojamas elementas <img>. Kad užtikrintumėte suderinamumą, visada įtraukite <img> elementą.
3. Užtikrinkite tinkamą grįžtamąjį ryšį
Jei naršyklė nepalaiko srcset arba elemento <picture>, visada pateikite atsarginį paveikslėlį su atributu src. Taip užtikrinama, kad paveikslėlis bus rodomas visada, nepriklausomai nuo naršyklės galimybių.
4. Naudokite aprašomąjį Alt tekstą
Visada įtraukite aprašomąjį paveikslėlių tekstą . Tai pagerina prieinamumą ir suteikia kontekstą paieškos sistemoms, taip pagerindami jūsų SEO.
Išvada
Naudojant srcset labai svarbu optimizuoti vaizdus įvairiems įrenginiams, užtikrinti greitesnį įkėlimo laiką ir geresnę naudotojų patirtį. Laikydamiesi geriausios praktikos, galite pagerinti savo svetainės našumą ir SEO, padaryti ją efektyvesnę ir prieinamesnę naudotojams.
