Kuvien optimointi: lazy loading ja WebP-formaatti
Lisää kuviin loading=lazy, tarjoa moderneja WebP- ja AVIF-formaatteja, käytä responsiivisia kuvia srcset- ja sizes-attribuuteilla ja määritä leveys sekä korkeus layout shiftin estämiseksi
Kuvien optimointi: lazy loading ja WebP-formaatti on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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 Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Kuvat muodostavat suurimman osan sivun koosta
Keskimääräinen verkkosivu on noin 2 megatavun kokoinen, ja kuvat muodostavat siitä suunnilleen puolet. Kuvien optimointi on yksittäinen vaikuttavin suorituskykytehtävä.
Nykyaikaiset formaatit: WebP ja AVIF
WebP on samankaltaisella laadulla 25–35 % JPEG-kuvaa pienempi, ja kaikki nykyaikaiset selaimet tukevat sitä. AVIF on vielä pienempi, jopa 50 % pienempi, mutta sen koodaus on hitaampaa. Käyttäkää molempia ja tarjotkaa varamuoto.
picture-elementti
Käyttäkää <picture>-elementtiä, jotta voitte tarjota AVIF-kuvan tuetuissa selaimissa, sen jälkeen WebP-kuvan ja lopuksi JPEG-kuvan varavaihtoehtona.
<picture>
<source srcset="/photo.avif" type="image/avif">
<source srcset="/photo.webp" type="image/webp">
<img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>Natiivisti tuettu laiska lataus
Lisätkää sivun alapuolella oleviin kuviin loading="lazy". Selain lykkää lataamista, kunnes kuva lähestyy näkymää, eikä JavaScriptiä tarvita lainkaan.
<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">
<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">Responsiiviset kuvat srcset- ja sizes-määritteillä
Tarjotkaa pienemmille näytöille pienempiä kuvia. srcset luettelee ehdokaskuvat niiden leveyksineen, ja sizes kertoo selaimelle, kuinka leveänä kuva näytetään kussakin murroskohdassa.
<img
src="/photo-800.jpg"
srcset="/photo-400.jpg 400w,
/photo-800.jpg 800w,
/photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="" width="800" height="600">Miksi width- ja height-arvot kannattaa määrittää
Selain varaa tilan width- ja height-määritteiden perusteella, mikä estää asettelun siirtymisen kuvan saapuessa. Nykyaikaiset selaimet laskevat näistä määritteistä kuvasuhteen automaattisesti.
decoding="async"
Lisätkää decoding="async", jotta selain voi purkaa kuvan pääsäikeen ulkopuolella ja vapauttaa pääsäikeen muun sisällön piirtämiseen.
<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">Kuvien CDN-palvelut
Kuvien CDN-palvelut (Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images) muokkaavat kuvia lennossa: muuttavat niiden kokoa, muuntavat ne WebP- tai AVIF-muotoon, pakkaavat ne ja tarjoavat ne reunavälimuisteista.
<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">Next.js Image -komponentti
Next.js:n <Image> hoitaa responsiivisen srcset-määritteen, WebP-muunnoksen, laiskan latauksen ja sumennetun paikkamerkin suoraan.
import Image from 'next/image';
<Image
src="/photo.jpg"
alt="Description"
width={800}
height={600}
placeholder="blur"
priority={isHero}
/>JPEG- ja PNG-kuvien pakkaaminen
Jos ette voi siirtyä WebP-muotoon, pakatkaa kuvat vähintään: käyttäkää Squooshia (squoosh.app) yksittäisiin kuviin, ImageOptimia eräkäsittelyyn tai sharpiä koontikomentosarjassa.
SVG-kuvat kuvakkeille ja logoille
Käyttäkää SVG:tä kuvakkeisiin, logoihin ja kaikkeen vektorigrafiikkaan. SVG:t skaalautuvat täydellisesti, ovat pieniä ja niitä voi tyylitellä CSS:llä. Upottakaa pienet SVG:t suoraan sivulle ylimääräisen HTTP-pyynnön välttämiseksi.
Pikatarkistus
Mikä HTML-määrite käskee selainta lykkäämään kuvan lataamista, kunnes kuva lähestyy näkymää?
Kertaus: kuvien optimointi
Käyttäkää nykyaikaisia formaatteja (AVIF, WebP) picture-elementin kautta. Lisätkää sivun alapuolella oleviin kuviin loading="lazy" ja hero-kuvaan fetchpriority="high". Määrittäkää width- ja height-arvot CLS:n estämiseksi. Käyttäkää responsiivisissa kuvissa srcset- ja sizes-määritteitä. Kuvien CDN-palvelut automatisoivat muunnokset. Next.js Image hoitaa kaiken tämän. Käyttäkää SVG:tä kuvakkeisiin.
Opi HTML 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
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Kuvien optimointi: lazy loading ja WebP-formaatti” ilmainen?
Kyllä – oppitunnin ”Kuvien optimointi: lazy loading ja WebP-formaatti” 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 Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Kuvien optimointi: lazy loading ja WebP-formaatti”?
Lisää kuviin loading=lazy, tarjoa moderneja WebP- ja AVIF-formaatteja, käytä responsiivisia kuvia srcset- ja sizes-attribuuteilla ja määritä leveys sekä korkeus layout shiftin estämiseksi Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Kuvien optimointi: lazy loading ja WebP-formaatti”-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ä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-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
- Core Web Vitals: LCP, FID ja CLS
- Lighthouse-auditoinnit ja pisteytys
- Kuvien optimointi: lazy loading ja WebP-formaatti
- Koodin jako ja lazy-reitit