Optimoi verkkosivujen kuvat laatua menettämättä

Verkkosivujen kuvien optimointi ilman näkyvää laadun heikkenemistä koostuu viidestä asiasta: vie kuva sen näyttökoon mukaisena (teräville näytöille noin kaksinkertaisena), valitse moderni muoto kuten AVIF tai WebP, pakkaa maltillisella laatuasetuksella ja vertaa silmämääräisesti, tarjoa useita kokoja srcset-attribuutilla ja lataa ensimmäisen näkymän alapuoliset kuvat laiskasti. Näillä toimilla poistat useimmat Lighthousen kuvavaroitukset ja yleensä pienennät sivun tiedostokokoa huomattavasti. Suoraan kamerasta tai suunnittelutyökalusta tuleva kuva on moninkertaisesti näytön tarpeita suurempi.

Vaihe 1: vie kuva näyttökoossaan

800 pikselin levyisenä näkyvän kuvan ei tarvitse olla 4 000 pikseliä leveä. Lighthouse huomauttaa liian suurista kuvista, sillä ylimääräiset pikselit ladataan, puretaan ja hylätään. Mittaa kuvan suurin leveys asettelussasi ja vie se noin kaksinkertaisena tiheille puhelin- ja kannettavan näytöille. Yli kaksinkertainen koko näyttää harvoin terävämmältä ja kasvattaa aina tavumäärää.

Vaihe 2: valitse oikea tiedostomuoto

Tiedostomuoto vaikuttaa enemmän kuin mikään pakkausliukusäädin. AVIF tuottaa yleensä pienimmän tiedoston. WebP pääsee lähelle ja toimii kaikissa nykyisissä selaimissa. JPEG ja PNG ovat edelleen turvallisia varavaihtoehtoja. WebP ja PNG sekä PNG ja JPG vertailevat pareja tarkemmin.

Vaihe 3: pakkaa ja katso

Häviöllisissä muodoissa on laatuasetus, jonka sopiva arvo riippuu kuvasta. Aloita WebP:llä arvosta 75-80 ja AVIF:llä arvosta 50-60. Vie kuva ja vertaa alkuperäiseen 100 %:n suurennuksella. Laske arvoa, kunnes näet eron, ja nosta sitten yhden askeleen verran. Kasvot, pieni teksti ja liukuvärit vaativat parempaa laatua kuin yksityiskohtaiset maisemat. Kuvien pakkaus selittää, mitä kooderi poistaa.

Poista samalla metatiedot, kuten kameran tiedot ja upotetut pikkukuvat. Useimmissa vientityökaluissa yksi valintaruutu riittää. Näin poistat tavuja, joita kukaan ei näe.

Vaihe 4: responsiivisuus srcset- ja sizes-attribuuteilla

Kun olet vienyt useita leveyksiä, anna selaimen valita. srcset luettelee tiedostot ja niiden leveydet. sizes kertoo selaimelle, kuinka leveänä kuva näkyy. Selain lataa sitten pienimmän tiedoston, joka on näytölle riittävän terävä.

<picture>
  <source type="image/avif"
    srcset="/img/hero-960.avif 960w, /img/hero-1440.avif 1440w, /img/hero-1920.avif 1920w"
    sizes="100vw" />
  <source type="image/webp"
    srcset="/img/hero-960.webp 960w, /img/hero-1440.webp 1440w, /img/hero-1920.webp 1920w"
    sizes="100vw" />
  <img src="/img/hero-1920.jpg" alt="Morning light over the harbour"
    width="1920" height="1080" fetchpriority="high" decoding="async" />
</picture>

Kuvaile palstan sisällä olevan kuvan asettelu sizes-attribuutissa, esimerkiksi sizes="(min-width: 1024px) 720px, 100vw". Virheellinen sizes on yleisin syy siihen, että responsiivinen toteutus lataa edelleen suuren tiedoston.

Vaihe 5: tärkeät latausvihjeet

<!-- Below the fold: let the browser wait -->
<img src="/img/team-720.webp" alt="The team at the spring workshop"
  width="720" height="480" loading="lazy" decoding="async" />

<!-- The hero: fetch first, never lazy -->
<img src="/img/hero-1920.webp" alt="Morning light over the harbour"
  width="1920" height="1080" fetchpriority="high" />

Nämä vihjeet liittyvät suoraan Core Web Vitals -mittareihin. Pääkuva on usein Largest Contentful Paint -elementti, jonka tulisi web.devin mukaan piirtyä 2,5 sekunnissa. Puuttuvat mitat ovat tavallinen syy asettelun siirtymiin. Jos pääkuva onkin video, sama ajattelu pätee verkkosivujen videotaustoihin.

Tarkistuslista ennen julkaisua

1. 1

   Mittaa kuvan paikka

   Selvitä kunkin kuvan suurin näyttöleveys asettelussasi.

2. 2

   Vie sopivat koot

   1-2 kertaa näyttöleveys sekä pienemmät versiot puhelimille.

3. 3

   Valitse muoto

   AVIF tai WebP valokuville ja liukuväreille, SVG logoille ja PNG vain silloin, kun se on paras.

4. 4

   Pakkaa silmämääräisesti

   Laske laatua, kunnes huomaat muutoksen, ja nosta sitten yhden askeleen verran.

5. 5

   Lisää merkinnät

   srcset, sizes, width, height, alt sekä ensimmäisen näkymän alapuolisten kuvien laiska lataus.

6. 6

   Testaa

   Suorita Lighthouse incognito-ikkunassa ja tarkista kuva-auditoinnit sekä LCP-elementti.

Moni vaihe helpottuu, kun kuva tehdään alusta asti lopulliseen kokoonsa. Gradientlyssä suunnittelet kerran, ja Pro muuttaa työn kaikkiin kokoihin yhdellä kertaa. Sen jälkeen viet PNG-, JPG- tai SVG-tiedoston täsmällisillä mitoilla jopa 4K-koossa. Näin pääkuva, banneri ja Open Graph -kuva ovat valmiiksi siinä koossa, jossa sivu ne näyttää.