Tiimin huomioita tekniikasta, tiedostomuodoista ja niistä pienistä päätöksistä, jotka tekevät hyvän lopputuloksen.
Miksi AVIF voittaa PNG:n niin selvästi tiedostokoossa
AVIF rakentuu modernille kuvaformaatille, suunniteltu havaintotehokkuuteen häviöttömän tarkkuuden sijaan. PNG käyttää DEFLATE:a raakaan kuvapistedataan, mikä on häviötöntä mutta jättää valtavan redundanssin koskemattomaksi valokuvasisältöön. AVIF korvaa tuon redundanssin videosta lainatulla lohkoennustuksella, hyläten tietoa, jota ihmisen näköjärjestelmä ei huomaa. Tulos on dramaattinen. 116 kilotavun valokuva muuntuu noin 16 kilotavuun AVIF-muodossa laadulla 85, ja läpinäkyvä PNG kutistuu yleensä 30 - 50 prosenttia vastaavaa WebP:tä vasten. Ero levenee korkearesoluutioisilla valokuvilla ja kapenee yksinkertaisella grafiikalla. Mille tahansa läpinäkyviä kuvia moderniyleisölle tarjoavalle sivustolle kaistasäästö kääntyy suoraan nopeammaksi latautumiseksi ja matalammaksi siirtokustannukseksi.
Alfakanavan tarina yksityiskohtaisesti
Sekä PNG että AVIF tallentavat läpinäkyvyyden erillisenä alfatasona väridatan rinnalle. Kun tämä pari käsittelee PNG-kuvasi, dekooderi erottaa väripikselit ja alfapeiton toisistaan. AVIF-ohjelma kirjoittaa sitten uuden tiedoston omalla alfaraidallaan, käyttäen modernia koodausta pakatakseen molemmat tasot laadulla 85. Alfaa ei leivota väriin eikä korvata taustatäytöllä. Pehmeät varjot, sulkasivellyt reunat ja osittain läpinäkyvät liukuvärit koodataan kaikki uskollisesti. Ainoa heikennys, jonka AVIF lisää, on häviöllinen pakkaus itse alfatasolla, mikä voi luoda tuskin havaittavaa rispaantumista hyvin kovien reunojen ympärille äärimmäisessä zoomauksessa. Tavallisilla näyttökooilla ja laadulla 85 ero ei ole näkyvä. Kuvapistetarkalle pienikokoiselle kuvaketyölle, säilytä PNG.
Tallennusnopeus käytännössä, selain selaimelta
AVIF-ohjelma latautuu kerran selainistuntoa kohden, noin 800 millisekuntia hakea plus 300 alustaa, joten ensimmäinen muunnos kantaa noin sekunnin lämmittelyn. Lämpimät muunnokset ohittavat sen kokonaan. Chromessa työpöydällä 0,12 megapikseliä vie noin 40 millisekuntia, 1 megapikseli noin 250 millisekuntia ja 8 megapikseliä noin 2,8 sekuntia. Firefox on poikkeus, ajaen samaa ohjelmaa noin neljä kertaa hitaammin, joten neli-K-valokuva voi viedä siellä 30 sekuntia tai enemmän. WebKit Safarissa asettuu näiden kahden väliin, lähemmäs Chromea. Keskitason mobiililaitteistolla luvut ovat kolme - viisi kertaa huonompia kuin työpöytä-Chromella. Jos muunnat suuria tiedostoja usein, Chrome työpöydällä tai kannettavalla antaa parhaan läpisyötön.
Milloin säilyttää PNG muuntamisen sijaan
PNG pysyy oikeana valintana useissa tapauksissa, vaikka tiedostokoolla on väliä. Ensiksi, grafiikka terävällä tekstillä pienissä koissa, kuten tarrat, merkit tai kuvakkeen kokoluokan kuvakkeet, voi näyttää AVIF:ssä häiriöitä, jotka ovat ei-hyväksyttäviä tavallisilla katseluetäisyyksillä. Toiseksi, edelleen muokkaukseen käytettävien totuuslähteenä toimivien tiedostojen tulisi pysyä PNG-muodossa, sillä jokainen läpikulku häviöllisen muodon kautta kasaa laatutappiota. Kolmanneksi, ympäristöt, jotka hylkäävät AVIF:n, mukaan lukien jotkin asiakirjaeditorit, vanhemmat suunnittelutyökalut ja sähköpostiohjelmat, tarvitsevat PNG:tä yhteentoimivuuteen. Lopuksi, animaatiota ensimmäisen ruudun yli ei säilytetä, sillä tämä pari käsittelee yhden ruudun. Kaikelle muulle, läpinäkyville valokuville ja graafisille resursseille moderniin verkkojakeluun, PNG AVIF-muotoon on oikea vaihtokauppa.
Core Web Vitals ja kaistaperustelu
Largest Contentful Paint, ensisijainen latausmittari, riippuu suoraan sivun suurimman kuvan koosta. Tuon kuvan pienentäminen 116 kilotavusta 16 kilotavuun, kuten kehityksessä mitattiin neli-K-valokuvassa, leikkaa siirtoajan 10 Mbps:n yhteydellä noin 93 millisekunnista noin 13:een pelkästään tuon elementin osalta. Kerro se tuoteruudukon, sankarikarusellin tai läpinäkyviä kuvakkeita täynnä olevan käyttöliittymän yli, ja kumulatiivinen säästö työntää LCP:n reilusti 2,5 sekunnin kynnyksen alle, jota Google pitää hyvänä. AVIF:n käyttöönotto kiihtyi juuri siksi, että perustelu voidaan tehdä kovissa luvuissa. Noin 94,3 prosentin selainkattavuudella varatapaus on tarpeeksi pieni, jotta kaistavoitto ylittää ylimääräisen picture-elementtimerkinnän.
Miten tämä eroaa tavallisesta verkkomuuntimesta
Useimmat verkon AVIF-muuntimet lähettävät PNG:si koneille, joita et hallitse, käsittelevät sen siellä ja säilyttävät sitä sen säilytyskäytännön mukaan, jonka palveluntarjoaja asettaa, usein epämääräisesti. RoundCut on suora kulustaan. Koska AVIF on raskas, muunnos tehdään palvelimellamme parhaan tuloksen saamiseksi, ja selaimessa toimiva koodaaja toimii automaattisena varana, kun palvelin ei ole käytettävissä. Kun tiedostosi lähetetään meille, se muunnetaan ja poistetaan sitten noin 2 tunnin kuluessa, ilman tiliä ja ilman mitään käyttöä pyytämäsi muunnoksen ulkopuolella. Pysyvää tallennusta tai kuvasi jakamista ei ole. Asiakasdokumenttien, oman tuotekuvauksen tai käyttäjäsisällön parissa työskenteleville vaihtokaupan rehellinen versio on tämä: tiedosto voi kulkea palvelimemme kautta, sitä käsitellään vain AVIF:n tuottamiseksi, eikä se jää talteen.
