AVIF vai WebP: kumpi kuvamuoto sopii verkkosivullesi?

AVIF ja WebP: olennaiset erot

Molemmat kuvamuodot voivat vähentää verkkosivun kuvista syntyvää tiedonsiirtoa. Kumpikaan ei kuitenkaan takaa pienempää tiedostoa kaikille kuville. Yksityiskohtainen maisema, yksinkertainen piirros ja läpinäkyvä tuotekuva voivat pakkautua eri tavoin. Alkuperäinen kuva, tallennusasetukset ja suunniteltu näyttökoko vaikuttavat valintaan yhtä lailla kuin tiedostomuoto.

Taulukko kuvaa tiedostomuotojen ominaisuuksia, ei jokaisen muuntimen toimintoja. MDN:n kuvamuoto-opas käsittelee AVIF-muodon ominaisuuksia, ja Googlen WebP-dokumentaatio selittää WebP-pakkausta ja läpinäkyvyyttä. JPG:n, PNG:n ja tekstiä sisältävän grafiikan valintaan saat laajemman näkökulman verkkokuvien kuvamuoto-oppaasta.

Onko AVIF aina WebP:tä pienempi?

Ei. Alla oleva liukuvertailu näyttää kaksi todellista Pixilo-tallennusta samasta 1920 × 1440 pikselin JPG:stä: 299,0 kt:n WebP:n laatuarvolla 80 ja 275,7 kt:n AVIF:n kiinteällä laatuarvolla 65. AVIF säästää 23,3 kt eli noin 8 % WebP:stä. Tämä on oleellinen vertailu kyseistä WebP:tä korvattaessa, vaikka AVIF säästää noin 33 % lähtökuvan 413,1 kt:n JPG:stä.

Molemmat versiot tehtiin suoraan samasta JPG:stä ilman koon muuttamista. Luvut ovat kokonaisten tiedostojen kokoja eri kuvamuotojen omilla laatuasetuksilla; tuloksia ei ole säädetty vastaamaan samaa näkyvää laatua. Lähde oli jo pakattu, joten kumpikaan tallennus ei palauta siitä menetettyjä yksityiskohtia. Tulos kuvaa näitä tiedostoja ja asetuksia, eikä takaa tiettyä säästöä AVIF:llä.

Vedä vertailurajaa kallion tekstuurin, vuorten ääriviivan ja tasaisen taivaan yli. Etsi yksityiskohtanäkymästä pehmenemistä, vaaleita kehiä ja väriporrastumia. Palaa sitten koko kuvaan arvioimaan, haittaako ero aiotussa näyttökoossa. Jos et hyväksy jommankumman ulkoasua, vertaa toista tallennusta ennen tiedostokoon perusteella valitsemista.

Pixilon WebPPixilon AVIF

Milloin AVIF on hyvä valinta?

Kokeile AVIF:ää valokuviin, joilla on merkittävä osuus sivun ladattavasta tietomäärästä: suuriin tuotekuviin, artikkelikuviin ja bannereihin. Arvioi säästö tavuina ja prosentteina. Yllä säästetty 23,3 kt on yhdelle kuvalle maltillinen vähennys. Sen käytännön arvo riippuu siitä, kuinka usein kuva ladataan ja paljonko vaihtoehto lisää työtä julkaisemiseen.

Testaa ennen koko kuvakirjaston muuntamista edustava joukko: hienoa kangasta tai hiuksia, tummia alueita ja tasaisia väriliukumia. Pidä mitat samoina ja hylkää versiot, jotka menettävät tärkeitä yksityiskohtia. AVIF on hyödyllinen korvaaja, kun jäljelle jäävä säästö merkitsee ja sivusto pystyy näyttämään sen luotettavasti. Säilytä WebP niissä kuvissa, joissa tämä kompromissi ei kannata.

AVIF-muodon HDR-tuki ei tarkoita, että tavallinen muunnos säilyttäisi HDR-tiedot. Pixilon nykyinen AVIF-työkalu tallentaa selaimen avaamista pikseleistä 8-bittisen, häviöllisesti pakatun kuvan. Se ei tarjoa HDR-tietojen säilyttämistä tai häviötöntä tallennusta. Säilytä alkuperäinen arkistointia, painatusta tai tarkkaa värinkäsittelyä varten.

Milloin WebP kannattaa säilyttää?

Säilytä WebP, kun kuva näyttää hyvältä, tiedostokoko sopii tarkoitukseen ja verkkosivu näyttää sen luotettavasti. Pelkkä uudempi kuvamuoto ei takaa hyötyä, vaikka vaihtaminen teettää työtä. Julkaisujärjestelmäsi, kuvankäsittelypalvelusi tai editorisi voi myös käsitellä WebP-kuvia vaivattomammin.

Tarkista erityisen huolellisesti grafiikka, jossa on tekstiä ja teräviä reunoja. Jos häviöllinen pakkaus sumentaa pieniä merkintöjä tai lisää virheitä viivojen ympärille, harkitse häviötöntä WebP-tallennusta tukevaa työkalua tai säilytä PNG tarvittaessa. Pixilon WebP-muuntimessa ei ole erillistä häviöttömän tallennuksen asetusta. PNG vai WebP -opas käsittelee valintaa tarkemmin.

Jos vastaanottaja tai latauslomake vaatii JPG- tai PNG-kuvan, noudata ensin tätä vaatimusta. Verkkosivulle sopiva muoto voidaan hylätä toisessa palvelussa. Sivulla näytettävän kuvan ja ladattavan tiedoston ei tarvitse olla samassa muodossa.

Näin vertaat AVIF- ja WebP-kuvia Pixilolla

1. Aloita alkuperäisestä. Käytä JPG-, PNG- tai WebP-lähdekuvaa ja säilytä se erikseen. Älä tee toista testiversiota ensimmäisestä pakatusta versiosta.
2. Valitse mitat ensin. Tee tarvittaessa koonmuutostyökalulla yhteinen lähde molemmille versioille. Pidä tätä vertailua varten pisin sivu enintään 4000 pikselissä.
3. Tee AVIF-versio. Käytä JPG → AVIF / PNG → AVIF / WebP → AVIF. Nykyinen työkalu käyttää kiinteää häviöllistä laatuasetusta 65 ja säilyttää lähteen pikselimitat. Siinä ei ole AVIF-laatusäädintä.
4. Tee WebP-versio samasta lähteestä. Käytä JPG–WebP-muunninta tai PNG–WebP-muunninta. Säädä laatua ja tarkastele tulosta. Muuntimissa on oletuksena käytössä 4000 pikselin raja pisimmälle sivulle. Tarkista, ettei koon muuttaminen vaikuttanut vain toisen version mittoihin.
5. Tutki ladatut tiedostot. Tarkista ensin mitat ja näkyvä laatu. Laske sitten korvaamisen tuoma säästö jakamalla tavumäärien erotus WebP-tiedoston koolla. Säilytä WebP, jos AVIF on suurempi tai pienemmästä tuloksesta katoaa tarpeellisia yksityiskohtia.
6. Testaa verkkosivu. Tarkista julkaistu kuva puhelimella ja tietokoneella, myös sen rajaus ja näyttökoko. Säilytä nykyinen versio, kunnes olet varmistanut uuden toimivuuden.

Laatuarvot eivät ole yhteinen asteikko eri kuvamuodoille tai muuntimille. AVIF-asetus 65 ja WebP-asetus 65 eivät osoita yhtä hyvää laatua. Pixilo käsittelee valitut kuvat paikallisesti selaimessasi. AVIF-enkooderi ladataan tarvittaessa, joten ensimmäiseen muunnokseen kuuluu myös sen lataaminen.

Mitä muuta kuin tiedostokokoa kannattaa tarkistaa?

Yksityiskohdat ja teksti

Tarkastele hiuksia, ruohoa, kangasta ja pientä tekstiä 100 %:n suurennuksella. Palaa sitten kokoon, jossa kävijä näkee kuvan. Suurennus paljastaa muutoksia, mutta tavallinen näyttökoko auttaa arvioimaan niiden merkitystä. Kuvakaappauksessa luettava teksti on yleensä pienintä mahdollista tiedostoa tärkeämpää.

Väriliukumat ja tummat alueet

Etsi näkyviä väriraitoja taivaalta, studiotaustoista ja varjoista. Tarkista, että tummissa kohdissa säilyy yksityiskohtia eivätkä ne muutu tasaisiksi läikiksi. Jos versio näyttää huonolta, vähennä pakkausta tai valitse toinen muoto. Pienempi tiedosto ei yksin tarkoita parempaa tulosta.

Läpinäkyvyys ja reunat

Katso läpinäkyvää kuvaa sekä vaaleaa että tummaa taustaa vasten. Tuotteen ympärillä oleva vaalea kehä voi kadota valkoiseen ja näkyä selvästi mustalla. Taustaongelman selvittämiseen auttaa opas läpinäkyvän kuvan mustasta tai valkoisesta taustasta.

Värit, animaatio ja alkuperäinen tiedosto

Älä oleta muuntimen säilyttävän kaikkia tiedostomuodon tukemia ominaisuuksia. Pixilo piirtää avatun kuvan uudelleen tallennusta varten. Sitä ei ole tarkoitettu animaation, HDR-tietojen tai kaikkien alkuperäisten metatietojen säilyttämiseen. Tarkista ladattu tulos ja pidä lähde tallessa, kun nämä ominaisuudet ovat tärkeitä.

100 %:n katselukoko tarkoittaa tässä kuvan todellista pikselikokoa kuvankatseluohjelmassa: yksi kuvan pikseli näkyy yhtenä näytön pikselinä. Selaimen sivun zoomaus on eri asetus.

AVIF-kuvan tarjoaminen WebP- tai JPG-varakuvalla

Nykyiset yleisimmät selaimet tukevat molempia muotoja, mutta vanhemmat selaimet ja jotkin sovellusten sisäiset katseluohjelmat voivat tarvita varakuvan. Omassa HTML:ssä voit tarjota vaihtoehdot picture-elementillä. Esimerkin tiedostonimet ovat kuvitteellisia. Luo ja julkaise oikeat tiedostot ennen sen käyttöä.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <source srcset="/images/product.webp" type="image/webp">
  <img src="/images/product.jpg" width="1200" height="800"
       alt="Vihreä takki edestä kuvattuna">
</picture>

Selain valitsee ensimmäisen sopivan lähteen, jota se tukee. Se ei lataa kaikkia kolmea tiedostoa vertaillakseen kokoja. Aseta AVIF ensimmäiseksi vain, jos haluat sitä tukevien selainten käyttävän tätä versiota. img antaa varakuvan, mitat ja vaihtoehtoisen tekstin. Käytä varakuvana PNG:tä JPG:n sijaan, jos läpinäkyvyys on säilytettävä. Katso MDN:n picture-elementin ohje.

Tarkista sisällönhallintajärjestelmässä, mitä kuvapalvelu tai lisäosa todella tuottaa ja tarjoaa kävijälle. Pelkkä AVIF-kuvan lataaminen ei luo eri näyttöihin sopivia versioita tai varakuvia. Tutki sivun kuvapyyntöjä julkaisun jälkeen, varsinkin jos välimuisti tai CDN voi tarjota vanhaa versiota.

Parantaako AVIF sivun nopeutta ja hakukonenäkyvyyttä?

Pienempi kuva voi lyhentää tiedonsiirtoa, mutta tiedostopääte ei takaa nopeampaa sivua. Näyttömitat, sopivan kuvaversion valinta, välimuisti ja se, milloin selain löytää kuvan, vaikuttavat myös. Liian suuri AVIF voi olla huonompi valinta kuin oikein mitoitettu WebP.

Erota tallennukseen kuluva aika latausajasta. Liukuvertailun tiedostojen käsittelynopeutta ei ole mitattu. Arvioi omaa työnkulkuasi mittaamalla edustavan kuvaerän käsittely omalla laitteellasi ja kirjaa ensimmäinen muunnos erikseen: Pixilo lataa AVIF-kooderin tarvittaessa. Valmiiden tiedostojen käyttäjä ei odota tätä vaihetta. Kuvaversioita pyynnöstä tuottavan palvelun täytyy huomioida myös käsittely ja välimuisti. Kooderin asetukset ja toteutus vaikuttavat kustannukseen, kuten web.devin AVIF-käsittelyä koskeva artikkeli selittää.

Google Kuvahaku tukee AVIF- ja WebP-kuvia. Muodon vaihtaminen ei korvaa hyödyllistä sisältöä, kuvaavaa vaihtoehtoista tekstiä tai toimivaa kuvan osoitetta. Säilytä picture-elementissä img, jolla on src, ja käytä todellista kuvamuotoa vastaavaa tiedostopäätettä. Katso Googlen kuvien hakukoneoptimointiohje.

Mittaa valmista sivua sen sijaan, että ennustaisit sijoituksen paranemista tiedoston vaihdon perusteella. Latausjärjestyksestä ja asettelun vakaudesta kertoo opas kuvakoon vaikutuksesta Core Web Vitals -mittareihin.

Usein kysytyt kysymykset

Pitäisikö kaikki WebP-kuvat muuttaa AVIF-muotoon?

Ei. Testaa ensin pieni mutta monipuolinen joukko kuvia. Korvaa kuvat, joissa tulos tuo hyötyä ja julkaisutapa tukee sitä. Säilytä WebP, kun se sopii kyseiseen kuvaan paremmin.

Miksi AVIF-tiedostoni on WebP:tä suurempi?

Tarkista ensin pikselimitat ja näkyvä laatu. Tallennusasetukset voivat erota, tai kuva voi pakkautua paremmin käyttämilläsi WebP-asetuksilla. Suurempi AVIF ei ole syy korvata hyvää WebP-kuvaa.

Palauttaako JPG:n muuntaminen AVIF-muotoon laatua?

Ei. Muunnos ei palauta aiemmassa JPEG-pakkauksessa kadonneita yksityiskohtia. Käytä parasta saatavilla olevaa alkuperäistä ja arvioi uuden kopion ulkoasua sekä tiedostokokoa.

Voinko vaihtaa .webp-päätteen .avif-päätteeksi?

Et. Nimen muuttaminen ei muuta kuvan tallennusmuotoa. Käytä muunninta ja tarjoa tulos oikealla tiedostopäätteellä sekä sisältötyypillä.

Entä jos AVIF näyttää Pixilossa huonommalta?

Pixilon AVIF-tallennus käyttää tällä hetkellä kiinteää asetusta. Jos se ei sovi kuvaasi, kokeile säädettävän laadun WebP-versiota, säilytä alkuperäinen tai valitse tarvitsemasi säädöt tarjoava enkooderi. Yksi kiinteä tulos ei edusta kaikkia mahdollisia AVIF-tallennuksia.

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)