Kas ir Srcset?
Srcset ir HTML attēla atribūts, kas norāda attēlu sarakstu, no kura pārlūkprogramma var izvēlēties attēlu, pamatojoties uz ekrāna izmēru un izšķirtspēju. Šo koncepciju dēvē par reaģējošiem attēliem, kas nodrošina, ka dažādiem skatīšanās apstākļiem tiek ielādēta vispiemērotākā attēla versija.
Lūk, piemērs, kā darbojas 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="Ilustrācijas piemērs">
Šajā piemērā srcset
norāda pārlūkprogrammai ielādēt 480 pikseļu platu attēlu, ja skatloga platums ir mazāks par 600 pikseļiem. Ja skatloga platums ir lielāks par 600 pikseļiem, pārlūkprogramma ielādēs lielāku, 800 pikseļu platu attēlu.
Varat arī iestatīt pikseļu blīvumu kā nosacījumu, nevis izmēru:
<img srcset="piemērs-attēls-1x.jpg 1x, piemērs-attēls-2x.jpg 2x" src="piemērs-attēls-1x.jpg" alt="Cits ilustrācijas piemērs">
Kāpēc Srcset ir svarīgs SEO?
Srcset ir ļoti svarīgs SEO, jo tas ļauj pārlūkprogrammām ielādēt vispiemērotāko attēla izmēru, pamatojoties uz ierīces īpašībām. Šai optimizācijai ir vairākas priekšrocības:
- Uzlabots ielādes ātrums: Lielākiem attēliem ir lielāki faila izmēri, kas var palēnināt lapas ielādes laiku. Iekraujot atbilstoša izmēra attēlus dažādām ierīcēm, srcset palīdz ietaupīt joslas platumu un samazināt lapas ielādes laiku.
- Labāka lietotāja pieredze: Ātrāks lapas ielādes laiks uzlabo lietotāja pieredzi, tādējādi samazinot atteikumu skaitu un palielinot iesaistīšanos.
- SEO priekšrocības: Lapas ielādes ātrums ir tiešs ranga faktors gan mobilajos, gan galddatora meklētājos. Attēlu optimizēšana, izmantojot srcset, var pozitīvi ietekmēt jūsu meklēšanas sistēmas pozīcijas.
Labākā prakse responsīvo attēlu jomā
1. Pārbaudiet PageSpeed Insights ieteikumus
PageSpeed Insights ir Google bezmaksas rīks, kas sniedz ieteikumus vietnes ātruma optimizēšanai. Ievadot tīmekļa vietnes URL, varat saņemt konkrētus ieteikumus attēlu optimizācijai, piemēram:
- Attēlu formāta atjaunināšana, lai uzlabotu saspiešanu.
- Apsveriet slinku ielādi ārpus ekrāna vai slēptiem attēliem.
- Pareiza attēlu izmēra noteikšana, lai uzlabotu ielādes laiku.
2. Attēla elementa izmantošana mākslinieciskajam vadījumam
Elements <picture>
ļauj pārlūkprogrammām attēlot dažādus attēlus, pamatojoties uz ierīces īpašībām. Tas ir noderīgi, ja vēlaties parādīt pilnīgi atšķirīgus attēlus, nevis tikai viena attēla dažāda izmēra attēlus.
Lūk, piemērs <picture>
elementa izmantošanai:
<picture> <source media="(min-width: 600px)" srcset="example-image.jpg, example-image-2x.jpg 2x"> <img src="example-image.jpg" alt="Ilustrācijas piemērs"> </picture>
Šajā piemērā piemērs-image.jpg
vai piemērs-image-2x.jpg
tiks parādīts pārlūkprogrammā ar platumu 600px vai vairāk, atkarībā no ierīces pikseļu blīvuma. Ja ekrāna platums ir mazāks par 600px vai ja elements <picture>
netiek atbalstīts, tā vietā tiks attēlots elements <img>
. Lai nodrošinātu savietojamību, vienmēr iekļaujiet elementu <img>
.
3. Nodrošināt pareizu atkāpšanos
Vienmēr norādiet rezerves attēlu ar atribūtu src
, ja pārlūkprogramma neatbalsta srcset
vai elementu <picture>
. Tas nodrošina, ka attēls vienmēr tiek parādīts neatkarīgi no pārlūkprogrammas iespējām.
4. Izmantojiet aprakstošu Alt tekstu
Attēliem vienmēr pievienojiet aprakstošu alt
tekstu. Tas uzlabo pieejamību un nodrošina kontekstu meklētājprogrammām, uzlabojot jūsu SEO.
Secinājums
Srcset izmantošana ir būtiska prakse, lai optimizētu attēlus dažādām ierīcēm, nodrošinot ātrāku ielādes laiku un uzlabotu lietotāja pieredzi. Ievērojot labāko praksi, varat uzlabot savas vietnes veiktspēju un SEO, padarot to efektīvāku un pieejamāku lietotājiem.