Mis on Srcset?
Srcset on HTML-pildi atribuut, mis määrab kindlaks nimekirja piltidest, mille hulgast brauser saab valida vastavalt ekraani suurusele ja resolutsioonile. Seda kontseptsiooni nimetatakse tundlikeks piltideks, mis tagavad, et eri vaatamistingimustes laaditakse kõige sobivam pildiversioon.
Siin on näide, kuidas srcset töötab:
<img srcset="example-image-480w.jpg 480w, example-image-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="example-image-800w.jpg" alt="Illustratsiooninäide">Selles näites ütleb srcset brauserile, et ta laadiks 480 piksli laiuse pildi, kui vaateakna laius on väiksem kui 600 pikslit. Kui vaateakna laius on üle 600 piksli, laadib brauser suurema, 800 piksli laiuse pildi.
Teise võimalusena võite suuruse asemel määrata tingimuseks pikslite tiheduse:
<img srcset="example-image-1x.jpg 1x, example-image-2x.jpg 2x" src="example-image-1x.jpg" alt="Veel üks illustratsiooninäide">Miks on Srcset oluline SEO jaoks?
Srcset on SEO jaoks väga oluline, sest see võimaldab veebilehitsejatel laadida kõige sobivama suurusega pilti vastavalt seadme omadustele. Sellel optimeerimisel on mitmeid eeliseid:
- Parem laadimiskiirus: See võib aeglustada lehekülje laadimisaega. Laadides eri seadmetele sobiva suurusega pilte, aitab srcset säästa ribalaiust ja vähendada lehe laadimisaega.
- Parem kasutajakogemus: Kiirem lehekülje laadimisaeg parandab kasutajakogemust, mis toob kaasa väiksema tagasilöögimäära ja suurema kaasatuse.
- SEO eelised: Lehekülje laadimiskiirus on otsene pingerea tegur nii mobiil- kui ka lauaarvutiotsingute puhul. Piltide optimeerimine srcseti abil võib teie otsingumootorite edetabelit positiivselt mõjutada.
Responsive piltide parimad praktikad
1. Kontrollige PageSpeed Insightsi soovitusi
PageSpeed Insights on Google'i tasuta tööriist, mis pakub soovitusi veebisaidi kiiruse optimeerimiseks. Sisestades oma veebilehe URL-i, saate konkreetseid soovitusi pildi optimeerimiseks, näiteks:
- Pildiformaadi uuendamine parema pakkimise tagamiseks.
- Kaaluda laiskuse laadimist ekraanivälise või varjatud pildi puhul.
- Piltide õige suuruse määramine, et parandada laadimisaega.
2. Kasutage pildielementi kunstilise suunamise jaoks
Element <picture> võimaldab brauseritel kuvada erinevaid pilte vastavalt seadme omadustele. See on kasulik, kui soovite näidata täiesti erinevaid pilte, mitte lihtsalt sama pildi eri suurusi.
Siin on näide <picture> elemendi kasutamise kohta:
<picture> <source media="(min-width: 600px)" srcset="example-image.jpg, example-image-2x.jpg 2x"> <img src="example-image.jpg" alt="Näidisillustratsioon"> </picture>Selles näites kuvatakse example-image.jpg või example-image-2x. jpg brauseri laiusel 600px või rohkem, sõltuvalt seadme pikslite tihedusest. Kui ekraani laius on väiksem kui 600px või kui element <picture> ei ole toetatud, kuvatakse selle asemel element <img>. Ühilduvuse tagamiseks lisage alati <img>-element.
3. Tagada nõuetekohased tagasilöögid
Esitage alati varupilt atribuudiga src juhuks, kui brauser ei toeta srcset või elementi <picture>. See tagab, et pilt kuvatakse alati, olenemata brauseri võimalustest.
4. Kasutage kirjeldavat Alt-teksti
Lisage oma piltidele alati kirjeldav alt-tekst. See parandab ligipääsetavust ja annab otsingumootoritele konteksti, parandades teie SEO-d.
Kokkuvõte
srcseti kasutamine on oluline tava piltide optimeerimiseks erinevate seadmete jaoks, tagades kiirema laadimisaja ja parema kasutajakogemuse. Järgides parimaid tavasid, saate parandada oma veebisaidi jõudlust ja SEO-d, muutes selle tõhusamaks ja kasutajatele kättesaadavamaks.
