Mikä on Srcset?
Srcset on HTML-kuvamäärite, joka määrittää luettelon kuvista, joista selain voi valita näytön koon ja resoluution perusteella. Tämä käsite tunnetaan nimellä responsiiviset kuvat, ja se varmistaa, että eri katseluolosuhteissa ladataan sopivin kuvaversio.
Tässä on esimerkki siitä, miten srcset toimii:
<img srcset="esimerkkikuva-480w.jpg 480w, esimerkkikuva-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="esimerkkikuva-800w.jpg" alt="Esimerkkikuva">Tässä esimerkissä srcset käskee selaimen ladata 480 pikselin levyisen kuvan, jos näkymäalueen leveys on alle 600 pikseliä. Jos näkymän leveys on yli 600 pikseliä, selain lataa suuremman, 800 pikseliä leveän kuvan.
Vaihtoehtoisesti voit asettaa pikselitiheyden ehdoksi koon sijasta:
<img srcset="esimerkkikuva-1x.jpg 1x, esimerkkikuva-2x.jpg 2x" src="esimerkkikuva-1x.jpg" alt="Toinen esimerkki kuvituksesta">Miksi Srcset on tärkeä SEO:lle?
Srcset on ratkaisevan tärkeä SEO:n kannalta, koska sen avulla selaimet voivat ladata sopivimman kuvakoon laitteen ominaisuuksien perusteella. Tällä optimoinnilla on useita etuja:
- Parannettu latausnopeus: Se voi hidastaa sivun latausaikaa. Lataamalla eri laitteille sopivan kokoisia kuvia srcset auttaa säästämään kaistanleveyttä ja lyhentämään sivun latausaikaa.
- Parempi käyttäjäkokemus: Nopeammat sivujen latausajat parantavat käyttäjäkokemusta, mikä johtaa alhaisempaan hylkäysprosenttiin ja parempaan sitoutumiseen.
- SEO-edut: Sivun latausnopeus on suora sijoitustekijä sekä mobiili- että työpöytähauissa. Kuvien optimointi srcsetin avulla voi vaikuttaa myönteisesti hakukoneiden sijoituksiin.
Responsiivisten kuvien parhaat käytännöt
1. Tarkista PageSpeed Insightsin suositukset
PageSpeed Insights on Googlen ilmainen työkalu, joka antaa ehdotuksia verkkosivuston nopeuden optimoimiseksi. Syöttämällä verkkosivusi URL-osoitteen voit saada erityisiä suosituksia kuvien optimointiin, kuten:
- Kuvaformaatin päivittäminen parempaa pakkausta varten.
- Harkitaan laiskan latauksen käyttöä ruudun ulkopuolella oleville tai piilotetuille kuville.
- Kuvien oikea mitoitus latausaikojen parantamiseksi.
2. Käytä kuvaelementtiä taiteelliseen ohjaukseen
<picture>-elementin avulla selaimet voivat näyttää erilaisia kuvia laitteen ominaisuuksien perusteella. Tämä on hyödyllistä, kun haluat näyttää täysin erilaisia kuvia eikä vain saman kuvan eri kokoja.
Tässä on esimerkki <picture>-elementin käytöstä:
<picture> <source media="(min-width: 600px)" srcset="esimerkkikuva.jpg, esimerkkikuva-2x.jpg 2x"> <img src="esimerkkikuva.jpg" alt="Esimerkkikuva"> </picture>Tässä esimerkissä esimerkkikuva.jpg tai esimerkkikuva-2x.jpg näytetään selaimen leveydellä 600 pikseliä tai enemmän, riippuen laitteen pikselitiheydestä. Jos näytön leveys on alle 600px tai jos <picture>-elementtiä ei tueta, sen sijaan renderöidään <img>-elementti. Sisällytä aina <img>-elementti yhteensopivuuden varmistamiseksi.
3. Varmista asianmukaiset Fallbackit
Anna aina varakuva src-attribuutilla, jos selain ei tue srcset- tai <picture>-elementtiä. Näin varmistetaan, että kuva näytetään aina selaimen ominaisuuksista riippumatta.
4. Käytä kuvaavaa Alt-tekstiä
Liitä kuviin aina kuvaava alt-teksti. Tämä parantaa saavutettavuutta ja tarjoaa hakukoneille kontekstin, mikä parantaa hakukoneoptimointia.
Päätelmä
srcsetin käyttö on tärkeä käytäntö, kun kuvia optimoidaan eri laitteille ja varmistetaan nopeammat latausajat ja parempi käyttökokemus. Noudattamalla parhaita käytäntöjä voit parantaa verkkosivustosi suorituskykyä ja hakukoneoptimointia ja tehdä siitä tehokkaamman ja helppokäyttöisemmän käyttäjille.
