Srcset

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.