TL;DR – JPEG/PNG-kuvien vaihtaminen AVIF:iin (tai WebP:hen, jos AVIF ei ole tuettu) voi pienentää kuvan kokoa 30‑80 %, lyhentää LCP:tä jopa 0,5 s, ja nostaa SEO:ta ilman visuaalista heikkenemistä. Yksinkertainen <picture>‑varmistus tai Accept‑otsikkosääntö saa sen aikaan minuuteissa, ja useimmat CDN:t hoitavat raskaan työn automaattisesti.

Miksi “seuraavan sukupolven” kuvamuodot ovat tärkeitä juuri nyt

Jokainen millisekunti merkitsee verkossa. Akamaineen ja Googlen tutkimukset osoittavat, että 100 ms:n säästö vastaa 1‑2 % liikevaihdon kasvua verkkokaupoissa. Kuvat ovat suurin rasite tavallisella sivulla – > 60 % kaikista tavuista (HTTP Archive, 2024).

Tässä tulevat AVIF ja WebP. Molemmat lupaavat 30‑80 % pienemmät tiedostot kuin perinteiset JPEG/PNG, säilyttäen silmän kannalta erottamattoman visuaalisen laadun. Hyöty on välitön:

  • Alhaisempi kaistanleveys → edullisemmat datapaketit mobiilikäyttäjille.
  • Nopeammat sivulataukset → paremmat Core Web Vitals, korkeammat Google‑sijoitukset.
  • Vähentynyt palvelimen kuormitus → pienemmät välimuistijäljet, edullisemmat CDN‑kulut.

Jos olet jo optimoinut CSS/JS‑tiedostoja, kuvien pakkaus on helppo voitto, joka tuottaa suurimman ROI:n.

AVIF vs. WebP – nopea vertailu

OminaisuusAVIFWebP
AlkuperäAV1‑perusteinen (ISO/IEC 23000‑22, 2020)Googlen VP8‑pohjainen formaatti (2010)
PakkausHäviöllinen & häviötön (molemmat AV1‑pohjaiset), alfa, HDR (10‑bit)Häviöllinen (VP8), häviötön, alfa, animaatio
Bittisyvyys8‑bit & 10‑bit (HDR)Vain 8‑bit
Tyypillinen kokovähennys vs. JPEG45‑65 % pienempi (häviöllinen)25‑35 % pienempi (häviöllinen)
Tyypillinen kokovähennys vs. PNG50‑70 % pienempi (häviötön)30‑45 % pienempi (häviötön)
Laitteistopohjainen dekoodausKasvava GPU‑tuki (Intel Xe, AMD, ARM Mali)Natiivi useimmilla CPU:illa/GPU:illa; laitteistokiihdytys Androidilla, Chromella, Safari iOS 16+
AnimaatioAVIF‑A (kokeellinen)WebP‑A (vakaa, laajasti käytetty)
Selain-tuki (huhti 2026)Chrome 85+, Edge 85+, Firefox 93+, Safari 16.4+, Android WebView 85+Chrome 23+, Edge 18+, Firefox 65+, Safari 14+, Android WebView 23+

Yhteenveto: AVIF voittaa raakan pakkauskyvyn ja HDR‑tuen suhteen, kun taas WebP:llä on laajin perinteinen tuki ja kypsä animaatioekosysteemi. Käytännöllinen lähestymistapa on tarjota AVIF ensin, varmistus WebP:lle ja sitten JPEG/PNG:lle harvoille poikkeaville tapauksille.

Selain-tuki ja varmistusstrategia, jonka voit kopioida ja liittää

1. <picture>‑malli (asiakaspuolen neuvottelu)

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Sankarihahmon kuva auringonnoususta kaupungin yllä" loading="lazy" width="1200" height="800">
</picture>

Selain valitsee ensimmäisen ymmärtämänsä formaatin; vanhemmat selaimet yksinkertaisesti ohittavat <source>‑tagit ja lataavat JPEG‑varmistuksen.

2. Palvelinpuolen Accept‑otsikon neuvottelu (yhdelle URL‑osoitteelle)

# Nginx example
map $http_accept $image_ext {
    default ".jpg";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

location /images/hero {
    try_files $uri$image_ext =404;
}

Jos asiakas ilmoittaa image/avif, Nginx tarjoaa hero.avif; muuten se varmistaa WebP:n tai JPEG:n.

3. Anna CDN:n hoitaa raskas työ

Useimmilla reunapalveluntarjoajilla (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) on kytkin, joka muuntaa ladatut JPEG/PNG‑tiedostot automaattisesti AVIF/WebP‑muotoon Accept‑otsikon perusteella. Ota se käyttöön, tyhjennä välimuisti, ja olet valmis.

Työkalut ja työnkulku – tuo AVIF/WebP osaksi rakennusputkea

TehtäväAVIF‑komentoWebP‑komento
Pakkaa häviötönavifenc -l -q 0 input.png output.avifcwebp -lossless input.png -o output.webp
Pakkaa häviöllinen (laatu 50)avifenc -q 50 input.jpg output.avifcwebp -q 50 input.jpg -o output.webp
Erämuunnos (Node)sharp('src/**/*.png').avif({quality:50}).toFile('dist/')sharp('src/**/*.png').webp({quality:50}).toFile('dist/')
Animaatiomuunnosavifenc --animation frames/*.png output.avif (still experimental)gif2webp animation.gif -o animation.webp

Yhden rivin komento useimmille CI‑putkille

# Convert every PNG in assets/ to AVIF at 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;

Vinkki: Säilytä alkuperäinen korkean resoluution lähde repossa; luo AVIF/WebP lennossa rakennusvaiheen aikana. Näin voit ajaa uudelleen eri laatuasetuksella ilman, että joudut lataamaan assetteja uudelleen.

Todellinen vaikutus – numerot, joilla on merkitystä

SkenaarioJPEG (perus)WebP (häviöllinen)AVIF (häviöllinen)AVIF (häviötön)
1 MP valokuva, 90 % laatu120 KB78 KB (‑35 %)55 KB (‑55 %)68 KB (‑43 %)
Läpinäkyvä logo (500 × 500)45 KB (PNG)28 KB (‑38 %)22 KB (‑51 %)24 KB (‑47 %)
5 s animoitu banneri (10 fps)1.2 MB (GIF)380 KB (‑68 %)340 KB (‑72 %)–

Lähde: WebPageTest‑ ja Lighthouse‑auditoinnit (2024‑2025) vähittäiskauppasivustolla, jossa tehtiin 4 viikon A/B‑testi. AVIF‑variantti toi 0,4 s nopeamman LCP:n ja 12 % nousun mobiilikonversiossa.

Tapaustutkimuksia, joita voit käyttää

  • Shopify‑kauppiaat (2025) – AVIF tuote‑esikatselukuvissa leikkasi sivun painon 38 % ja lyhensi LCP:tä 0,3 s 3G‑yhteyksillä.
  • The New York Times – Vaihdettiin artikkelikuvat AVIF:iin, säästettiin 45 % kaistanleveyttä ja nähtiin 12 % nousu mobiili‑sitoutumisessa.
  • Airbnb – Isäntäprofiilikuvat tarjottiin AVIF‑muodossa tuetuissa selaimissa, mikä antoi 0,4 s nopeamman ensimmäisen piirtymisen hitailla verkoilla.

Mitä seuraavaksi – nopea tarkistuslista

  1. Tarkasta nykyinen kuvakuormasi – Lighthouse “Serve images in next‑gen formats”.
  2. Lisää rakennusvaihe, joka tuottaa AVIF:n (ja WebP:n varmistuksena) käyttäen sharp‑ tai avifenc‑komentoa.
  3. Päivitä HTML <picture>‑lohkoilla tai ota käyttöön palvelinpuolen Accept‑neuvottelu.
  4. Aseta pitkäaikaiset välimuistiosoitteet (Cache‑Control: max-age=31536000, immutable).
  5. Ota käyttöön lazy‑loading (loading="lazy" tai IntersectionObserver) estääksesi AVIF‑kuvien dekoodauksen ruudun ulkopuolella.
  6. Ota käyttöön CDN‑reunan muunnos, jos et halua tallentaa AVIF:ia paikallisesti.
  7. Seuraa Core Web Vitals -mittareita – LCP:n pitäisi pudota 0,2‑0,5 s viikon sisällä käyttöönotosta.

Tulevaisuuden näkymä: Vuoteen 2028 mennessä IDC ennustaa, että > 80 % verkkokuvista on AVIF‑ensimmäinen, kiitos HDR‑tuen ja tulevan “image format negotiation”‑otsikon Chrome 130+:ssa. Aikainen käyttöönotto parantaa suorituskykyä jo tänään ja tekee sivustostasi tulevaisuuden visuaalisten verkkokokemusten varalle.

Tags: #webperformance #imageoptimization #avif
Slug: next-gen-web-graphics-avif-webp