Näin otat AVIF-kuvat käyttöön verkkosivulla

Lyhyt ohje

1. Valitse yksi sivulla jo käytössä oleva kuva ja säilytä alkuperäinen.
2. Tee siitä AVIF-versio ja tarkista kuvan laatu.
3. Lisää AVIF verkkosivullesi julkaisujärjestelmän tukemalla tavalla.
4. Tarkista julkaistu sivu puhelimella ja tietokoneella.
5. Varmista selaimen verkkopyynnöistä, mikä kuvatiedosto latautuu.

Seuraavaksi käydään läpi, mitä näissä vaiheissa kannattaa tarkistaa.

Tarkista, miten sivustosi käsittelee AVIF-kuvia

Julkaisujärjestelmä voi hyväksyä AVIF-tiedoston mediakirjastoon mutta käsitellä sitä eri tavalla kuin JPG- tai PNG-kuvaa. Tarkista siksi sekä tiedoston lisääminen että sen käyttäminen julkaistulla sivulla.

Kokeile yhdellä kuvalla:

• Hyväksyykö mediakirjasto tiedoston?
• Näkyykö kuva sivun muokkausnäkymässä?
• Toimiiko kuva julkaistulla sivulla?
• Syntyvätkö tarvittavat pienemmät kuvaversiot, jos järjestelmä tekee niitä muista kuvista?

Jos sivustolla on kuvien optimointipalvelu tai CDN, se saattaa jo toimittaa kuvia AVIF-muodossa. Selvitä nykyinen toiminta ennen tiedostojen vaihtamista käsin. Mediakirjastossa oleva JPG ei yksin kerro, missä muodossa kuva toimitetaan kävijälle.

Valmistele yksi kuva kokeilua varten

Valitse kuva, joka edustaa sivustosi tavallista sisältöä. Tuotekuva, artikkelin pääkuva tai läpinäkyvä grafiikka antaa hyödyllisemmän lähtökohdan kuin satunnainen testikuva.

Tee muunnos lähtömuodon mukaan:

• JPG → AVIF
• PNG → AVIF
• WebP → AVIF

Pixilon AVIF-muuntimet säilyttävät alkuperäiset pikselimitat ja käyttävät kiinteää häviöllistä pakkausasetusta. Ne tuottavat yhden staattisen kuvan. Muunnos ei säilytä animaatiota, alkuperäistä HDR-tietoa tai metatietoja.

Vertaa ladattua AVIF-kuvaa alkuperäiseen. Katso etenkin tekstin luettavuutta, ohuita reunoja, väriliukumia ja mahdollisia läpinäkyviä alueita. Tarkista myös tiedostokoko: muunnos ei aina pienennä tiedostoa.

Jos laatu ei riitä tai tiedosto kasvaa, säilytä nykyinen versio. Kuvamuodon vaihtaminen ei ole tavoite itsessään.

Lisää AVIF sivulle julkaisujärjestelmän kautta

Jos käytät sivunrakentajaa tai sisällönhallintajärjestelmää, lisää AVIF mediakirjastoon ja valitse se kyseisen kuvaelementin uudeksi kuvaksi.

Pidä kokeilussa kuvan näyttökoko ja rajaus ennallaan. Näin voit arvioida muodon vaihtamisen vaikutusta ilman, että samalla muuttuu koko sivun asettelu.

Tarkista vaihdon yhteydessä:

• kuvan vaihtoehtoinen teksti
• kuvasuhde ja rajaus
• mahdollinen kuvateksti ja linkki
• työpöytä- ja mobiilinäkymät.

Pelkkä tiedostopäätteen vaihtaminen osoitteessa ei muunna kuvaa. Sivulle pitää lisätä oikea AVIF-tiedosto tai käyttää palvelua, joka tekee muunnoksen.

Tarjoa vaihtoehtoinen kuvamuoto tarvittaessa

Jos muokkaat sivun HTML:ää itse, voit tarjota AVIF-kuvan ensisijaisena ja JPG-kuvan vaihtoehtona picture-elementillä.

Alla molemmat tiedostot esittävät samaa kuvaa samoissa 1200 × 800 pikselin mitoissa. Vaihda osoitteet, mitat ja vaihtoehtoinen teksti omaan kuvaasi sopiviksi.

<picture>
  <source srcset="/kuvat/tuotekuva.avif" type="image/avif">
  <img
    src="/kuvat/tuotekuva.jpg"
    width="1200"
    height="800"
    alt="Sininen reppu kuvattuna edestä">
</picture>

AVIF:iä tukeva selain voi valita AVIF-version. Jos selain ei tue ilmoitettua kuvamuotoa, se käyttää tässä esimerkissä JPG-kuvaa. Läpinäkyvälle kuvalle vaihtoehtona kannattaa käyttää läpinäkyvyyden säilyttävää muotoa, kuten PNG:tä. MDN:n picture-ohje.

Tämä vaihtoehtoinen kuva ratkaisee kuvamuodon tuen. Se ei automaattisesti korjaa väärää AVIF-osoitetta tai rikkinäistä tiedostoa.

Jos julkaisujärjestelmäsi hoitaa vaihtoehtoiset kuvamuodot automaattisesti, käytä sen omaa toimintoa.

Varmista, minkä kuvan selain lataa

Kuvan näkyminen sivulla ei vielä osoita, että käytössä on AVIF. Selain saattaa ladata vanhan kuvan, pienemmän kuvaversion tai optimointipalvelun tuottaman tiedoston.

Chromessa voit tarkistaa asian kehittäjätyökalujen kautta:

1. Avaa julkaistu sivu ja kehittäjätyökalut.
2. Valitse Network-välilehti ja kuvien suodatus Img.
3. Ota Disable cache käyttöön ja lataa sivu uudelleen kehittäjätyökalujen ollessa auki.
4. Avaa tarkistettavan kuvan verkkopyyntö.
5. Tarkista osoite ja vastauksen Content-Type. AVIF-kuvan tyyppi on image/avif.

Tiedostopääte ei ole ainoa tunniste: optimointipalvelu voi toimittaa AVIF-kuvan osoitteesta, joka päättyy esimerkiksi .jpg. Network-näkymä auttaa tarkistamaan myös siirretyn tiedoston koon. Chromen verkkopyyntöjen tarkistusohje.

Jos sivu käyttää erillistä mobiilikuvaa tai useita kuvakokoja, tarkista myös niiden pyynnöt.

Tarkista julkaistu sivu ennen laajempaa vaihtoa

Katso kuvaa sen todellisessa käyttöpaikassa. Mediakirjaston esikatselu ei paljasta esimerkiksi mobiilin rajausta, taustavärin vaikutusta tai sitä, latautuuko sivulle oikea kuvaversio.

Varmista, että:

• kuva näkyy kokonaan tai rajautuu tarkoitetulla tavalla
• teksti ja olennaiset yksityiskohdat ovat riittävän selkeitä
• läpinäkyvä tausta toimii sivun taustaa vasten
• kuvan paikalle varattu tila ja sivun asettelu pysyvät kunnossa
• selain lataa odotetun tiedoston.

Jos vertaat lataamista ennen ja jälkeen muutoksen, käytä samaa sivua, näyttökokoa ja testiasetuksia. Yksi nopeampi lataus ei vielä osoita pysyvää parannusta. Tiedostokoon pieneneminen on helpompi todeta, kun vertailtavien kuvien mitat ja hyväksyttävä laatu ovat samat.

Jos AVIF-kuva ei näy

Tarkista ensin, avautuuko kuvan suora osoite selaimessa. Jos osoite ei toimi, selvitä tiedoston sijainti ja julkaisujärjestelmän mahdollinen virheilmoitus.

Jos suora kuva toimii mutta sivulla näkyy vanha versio, tarkista kuvaelementin osoite, mahdolliset eri kuvakoot ja sivuston välimuisti. Pelkkä selaimen välimuistin ohittaminen ei tyhjennä julkaisujärjestelmän tai CDN:n välimuistia.

Jos ongelma jää epäselväksi, palauta kyseiseen kuvaelementtiin toimiva alkuperäinen kuva ja selvitä AVIF-tuki ennen seuraavaa kokeilua.

Usein kysytyt kysymykset

Pitääkö kaikki verkkosivun kuvat vaihtaa AVIF-muotoon?

Ei. Vaihda ne kuvat, joissa tulos tuo hyödyllisen tiedostokoon säästön ja toimii julkaisujärjestelmässäsi hyväksyttävällä laadulla.

Riittääkö AVIF-tiedoston lisääminen mediakirjastoon?

Ei. Kuva pitää myös valita sivulla käytettäväksi. Tarkista julkaistun sivun verkkopyynnöistä, mitä tiedostoa selain lataa.

Tarvitseeko AVIF aina vaihtoehtoisen kuvan?

Tarve riippuu kävijöiden selaimista ja julkaisutavasta. Vaihtoehtoinen kuvamuoto on hyödyllinen, jos haluat palvella myös ympäristöjä, joissa AVIF ei toimi.

Miksi uusi AVIF-kuva ei pienennä sivun lataamaa tiedostoa?

Sivu voi edelleen käyttää vanhaa kuvaa tai julkaisujärjestelmän tuottamaa muuta versiota. AVIF-tiedosto voi myös olla alkuperäistä suurempi. Tarkista todellinen verkkopyyntö ja vertaa samoissa mitoissa olevia tiedostoja.

Tiivistä tekoälylläChatGPT (avautuu uuteen välilehteen)Grok (avautuu uuteen välilehteen)Google (avautuu uuteen välilehteen)Perplexity (avautuu uuteen välilehteen)Claude (avautuu uuteen välilehteen)