Verkkosuorituskyvyn optimointi ja Lighthouse · Oppitunti

Responsiiviset kuvat ja lazy loading

Toteuttakaa responsiivisia kuvia `srcset`- ja `sizes`-määritteillä ja hyödyntäkää lazy loadingia näkymän ulkopuoliselle medialle.

Oppitunti 2/411 vaihetta

Responsiiviset kuvat ja lazy loading on ilmainen Verkkosuorituskyvyn optimointi ja Lighthouse-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Verkkosuorituskyvyn optimointi ja Lighthouse-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Verkkosuorituskyvyn optimointi ja Lighthouse-kurssilla on yhteensä 4 oppituntia.

Miksi responsiivisia kuvia käytetään?

Kuvitelkaa selaavanne verkkosivustoa pienellä puhelimen näytöllä, mutta sivusto lataa valtavalle työpöytänäytölle tarkoitetun kuvan. Se tuhlaa dataa ja hidastaa sivua!

Responsiiviset kuvat varmistavat, että käyttäjät saavat juuri heidän laitteelleen ja näytölleen optimoidut kuvat, mikä parantaa suorituskykyä ja käyttökokemusta.

`srcset` tarkkuutta varten

srcset-attribuutin avulla selaimelle voidaan tarjota luettelo eri kuvatiedostoista, joista se voi valita sopivimman. Yksi käyttötapa on tarkkuuden vaihtaminen.

Tämä tarkoittaa tarkempien kuvien tarjoamista korkean DPI:n (Retina) näytöille ja normaalitarkkuuksisten kuvien tarjoamista muille laitteille.

1x: normaalitarkkuus
2x, 3x: suuremmat tarkkuudet

<img src="cat-1x.jpg" srcset="cat-1x.jpg 1x, cat-2x.jpg 2x" alt="A cute cat" />

`srcset` näkymän leveyttä varten

Tarkkuuden lisäksi srcset auttaa myös näkymän vaihtamisessa. Sen avulla voidaan tarjota eri kuvatiedostoja selaimen näkymän leveyden perusteella.

w-kuvaaja ilmaisee kuvatiedoston luonnollisen leveyden. Selain valitsee sitten sopivimman lähteen.

<img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" src="medium.jpg" alt="A landscape" />

`sizes`-attribuutti

Kun srcset-attribuuttia käytetään w-kuvaajien kanssa, selaimen on tiedettävä, kuinka leveänä kuva todellisuudessa näytetään sivulla näkymän eri leveyksillä. Tätä varten on olemassa sizes-attribuutti.

sizes sisältää luettelon mediaehdoista ja kuvan varaamien tilojen leveyksistä. Se kertoo selaimelle: "Tässä näyttökoossa kuva vie X % näkymän leveydestä."

`sizes`-attribuutin käyttäminen

Selain käyttää sizes-attribuuttia valitakseen parhaan kuvan srcset-luettelosta. Se ei muuta kuvan kokoa, vaan auttaa valitsemaan oikean lähdetiedoston.

(max-width: 600px) 100vw: jos näkymä on enintään 600 pikseliä leveä, kuva vie 100 % näkymän leveydestä.
(max-width: 1200px) 50vw: jos näkymä on enintään 1200 pikseliä leveä, kuva vie 50 % näkymän leveydestä.
800px: muussa tapauksessa kuvan leveys on 800 pikseliä.

Yhdistetyt `srcset` ja `sizes`

Näin srcset ja sizes toimivat yhdessä. Kokeilkaa muuttaa selainikkunan kokoa nähdäksenne, miten selain voi valita eri kuvia.

Selain laskee sizes-attribuutin avulla ihanteellisen kuvan leveyden ja etsii sitten lähimmän vastaavuuden srcset-attribuutissa ilmoitetuista leveyksistä.

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Image</title>
</head>
<body>
  <img
    srcset="
      image-400w.jpg 400w,
      image-800w.jpg 800w,
      image-1200w.jpg 1200w"
    sizes="
      (max-width: 600px) 100vw,
      (max-width: 1200px) 50vw,
      800px"
    src="image-800w.jpg"
    alt="A beautiful landscape"
    style="max-width: 100%; height: auto;"
  >
  <p>Imagine image-400w.jpg, image-800w.jpg, image-1200w.jpg exist.</p>
</body>
</html>

Taiteellinen sommittelu `<picture>`-elementillä

Pelkkä kuvan skaalaaminen ei aina riitä. Näyttökoon tai laitetyypin perusteella saatetaan haluta näyttää kokonaan eri kuva tai eri rajaus. Tätä kutsutaan taiteelliseksi sommitteluksi.

<picture>-elementin avulla voidaan tarjota useita <source>-elementtejä, joilla on eri mediaehdot ja kuvalähteet, sekä varalle <img>-elementti.

<picture>
  <source media="(max-width: 600px)" srcset="narrow-crop.jpg">
  <source media="(min-width: 601px)" srcset="wide-crop.jpg">
  <img src="default-crop.jpg" alt="A scenic view">
</picture>

Mitä laiska lataus tarkoittaa?

Vaikka käytössä olisi responsiivisia kuvia, sivu voi olla hidas, jos sillä on paljon kuvia. Laiska lataus auttaa siirtämällä ei-kriittisten resurssien, kuten kuvien tai iframe-kehysten, lataamisen myöhemmäksi, kunnes niitä tarvitaan.

Yleensä tämä tarkoittaa, että resurssit ladataan vasta juuri ennen kuin ne tulevat käyttäjän näkymään.

Lyhentää sivun ensimmäistä latausaikaa.
Säästää käyttäjien tiedonsiirtoa.
Parantaa Core Web Vitals -mittareita, kuten LCP:tä.

Natiivi laiska lataus

Nykyaikaiset selaimet tarjoavat natiivin laiskan latauksen, joten perusmuotoiseen laiskaan lataukseen ei tarvita JavaScript-kirjastoja. Lisää loading="lazy"-attribuutti vain <img>- tai <iframe>-tagiin.

eager: ladataan heti.
lazy: lataamista lykätään, kunnes elementti on lähellä näkymää.
auto: selain päättää.

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Product image" />

<p>Note: <code>data-src</code> is often used with JS-based lazy loading. For native, just <code>src</code> + <code>loading='lazy'</code> is usually enough if the browser supports it.</p>

Pikatesti

Mitä attribuutteja ja elementtejä käytetään ensisijaisesti responsiivisten kuvien ja laiskan latauksen toteuttamiseen?

Vastaa interaktiivisessa oppitunnissa

Oppitunnin yhteenveto

Olemme tutustuneet tehokkaisiin tekniikoihin, joilla kuvat ja media optimoidaan verkkosuorituskykyä varten:

Responsiiviset kuvat: käyttäkää srcset-attribuuttia (jossa x tarkoittaa tarkkuutta ja w näkymän leveyttä) sekä sizes-attribuuttia sopivankokoisten kuvien toimittamiseen.
Taiteellinen sommittelu: käyttäkää <picture>-elementtiä, kun haluatte hallita tarkemmin kuvan näyttämistä mediaehtojen perusteella.
Laiska lataus: käyttäkää loading="lazy"-attribuuttia <img>- ja <iframe>-elementeissä näytön ulkopuolisen sisällön lataamisen lykkäämiseen. Tämä nopeuttaa sivun ensimmäistä latausta.

Näillä menetelmillä voitte parantaa verkkosivustonne suorituskykyä ja käyttökokemusta huomattavasti!

Aloita maksutta

Opi Verkkosuorituskyvyn optimointi ja Lighthouse tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Responsiiviset kuvat ja lazy loading” ilmainen?

Kyllä – oppitunnin ”Responsiiviset kuvat ja lazy loading” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Verkkosuorituskyvyn optimointi ja Lighthouse-kurssin, päivitä CoddyKit PROhon. Verkkosuorituskyvyn optimointi ja Lighthouse-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Responsiiviset kuvat ja lazy loading”?

Toteuttakaa responsiivisia kuvia `srcset`- ja `sizes`-määritteillä ja hyödyntäkää lazy loadingia näkymän ulkopuoliselle medialle. Harjoittelet Verkkosuorituskyvyn optimointi ja Lighthouse-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Verkkosuorituskyvyn optimointi ja Lighthouse-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Verkkosuorituskyvyn optimointi ja Lighthouse-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Responsiiviset kuvat ja lazy loading”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Verkkosuorituskyvyn optimointi ja Lighthouse-oppitunnilla?

Kyllä. Jokainen Verkkosuorituskyvyn optimointi ja Lighthouse-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Verkkosuorituskyvyn optimointi ja Lighthouse