Kuvittele tämä: paras kuvamuoto verkolle vuonna 2019

JPEG, WEBP, HEIC, AVIF? Tämä opas auttaa sinua valitsemaan.

Vuosikymmenien ajan JPEG: n vertaansa vailla olevan dominoinnin jälkeen viime vuosina on nähty uusia muotoja - WebP ja HEIC -, jotka haastavat tämän kannan. Heillä on vain osittainen, mutta merkittävä tuki suurten toimijoiden keskuudessa verkkoselaimissa ja mobiilikäyttöjärjestelmissä. Toisen uuden kuvamuodon - AVIF - odotetaan tulevan näyttämölle vuonna 2019 lupauksella lakaista koko verkko.

Tässä artikkelissa aloitetaan klassisten muotojen lyhyt tarkistus, jota seuraa kuvaus WebP: stä ja HEIC / HEIF: stä. Sitten siirrymme AVIF: n tutkimiseen ja lopetamme yhteenvedon, joka sisältää kaikki pääkohdat.

Etuja ja haittoja koskevat kommentit perustuvat sekä saatavilla olevien arvovaltaisten raporttien tarkasteluun että omakohtaisiin havaintoihin, kun kehitetään ja otetaan käyttöön työkaluja kuvan optimointiputkistoille verkkokaupan työnkulkuissa.

Klassiset kuvamuodot verkolle, universaali tuki

Muistutetaan kronologisessa järjestyksessä verkkokuvien kolmesta tärkeimmästä klassisesta muodosta.

GIF

GIF tukee LZW-häviötöntä pakkaamista ja useita kehyksiä, joiden avulla voimme tuottaa yksinkertaisia ​​animaatioita.

Tämän muodon suurin rajoitus on, että se on rajoitettu 256 väriä. Tämä oli kohtuullista, kun se luotiin 80-luvun lopulla, koska sama rajoitus koski olemassa olevia näyttöjä. Näyttötekniikan kehittyessä kävi kuitenkin ilmi, että se ei sopinut toistamaan mitään sileitä värigradientteja, kuten valokuvakuvissa. Voimme helposti havaita sen tuottaman värinauhan.

GIF sallii kuitenkin kevyen animaation universaalilla tuella. Tämä ominaisuus on pitänyt muodon elossa tähän päivään saakka käyttötapauksissa, jotka eivät ole herkkiä laatukysymyksille, tyypillisimmät ovat pienet, vähän tai ei lainkaan värejä sisältävät animaatiot.

JPEG

Verkon kuvamuotojen kuningas on kehitetty tukemaan digitaalisen valokuvan työnkulkuja.

Tavallisella 24-bittisellä syvyydellä se tarjoaa paljon suuremman väritarkkuuden (ei pidä sekoittaa alueeseen tai asteikkoon) kuin ihmissilmä pystyy erottamaan. Se tukee häviöllistä pakkaamista hyödyntämällä tunnettuja ihmisen näkömekanismeja.

Silmämme ovat herkempiä keskisuurille vaa'oille kuin hienoille yksityiskohdille. Näin ollen JPEG antaa meille mahdollisuuden hylätä hienot yksityiskohdat (korkeat paikkataajuudet) määrällä, jota ohjaa laatutekijä. Vähemmän laatua tarkoittaa, että vähemmän yksityiskohtia säilytetään. Lisäksi olemme paljon herkempiä yksityiskohdille, joilla on korkea luminanssikontrasti, kuin yksityiskohdille, joilla on vain kromaattinen kontrasti.

Joten JPEG koodaa sisäisesti RGB-kuvat (punainen, vihreä ja sininen) yhdellä kirkkaudella ja kahdella kromikanavalla. Tämä antaa meille mahdollisuuden käyttää kroma-alinäytteistystä hylkäämään enemmän yksityiskohtia vain kromakanavista. On syytä huomata, että JPEG koodaa kuvat 8x8 pikselin lohkoina.

Kun pienennämme laatutekijää ja / tai käytämme aggressiivisempaa kroma-alinäytteistystä, alamme saada lisääntyviä soittoäänen, halon, eston tai hämärtymisen artefakteja. JPEG: n ongelmana on, että kuvan sisällöstä riippuen artefaktit voivat näkyä eri laatutekijän arvoilla. Villin ero ilmenee verrattaessa luonnonvalokuvien vaikutuksia kuvamateriaaliin. Koska taideteokset (muodot, kirjasimet) luottavat yleensä teräviin reunoihin, ne alkavat tuottaa esineitä jopa pieniä yksityiskohtia varten.

Valokuville JPEG vähentää tiedostopainoa helposti 10 kertaa tuskin havaittavissa olevilla artefakteilla verrattuna häviöttömään pakkaamiseen.

PNG

Tämä häviötön grafiikkamuoto on kehitetty korvaamaan GIF, käsittelemällä sen värejä (ja lisensointia) koskevia kysymyksiä. Sitä tarvittiin kuville, joissa oli huomattava määrä taidetta, jolle JPEG tuotti suuria esineitä jopa pienillä pakkausnopeuksilla.

Se tukee läpinäkyvyyttä ja parannettua pakkaamista GIF-tiedostoon verrattuna. Koska PNG ei hylkää tietoja, se ei tuota esineitä. Tietysti tämä johtuu suuremmasta kuvan painosta monien erilaisten värigradienttien läsnä ollessa verrattuna häviölliseen pakkaamiseen.

Se onnistuu hyödyntämään taideteoksen yleisiä piirteitä: Toisin kuin valokuvaus - jossa on värien jatkuvuus hienovaraisilla muunnelmilla, taidekuvissa on yleensä muutama hyvin määritelty väri.

Joten PNG pakkaa kuvat kartoittamalla suuria määriä pikseleitä yksinkertaiseksi erilliseksi paletiksi ja säästämällä paljon bittejä. GIF-tiedostoon verrattuna se tuottaa paljon parempaa laatua tavallisesti paljon vähemmän tavuja.

Tulokkaat, joilla on osittainen tuki: WEBP ja HEIC, jotka perustuvat HEVC: hen

Mekanismit, joita videokoodekit käyttävät virtojen pakkaamiseen, voidaan luokitella kahteen päätyyppiin: kehysten välinen ja kehyksen sisäinen. Vaikka ensimmäinen hyödyntää irtisanomisia ajan myötä, kehyksen sisäiset mekanismit keskittyvät redundanssin vähentämiseen tietyssä kehyksessä ilman mitään riippuvuutta muusta. Tätä pakkausmekanismia voidaan soveltaa still-kuviin.

Videoiden jakamisen räjähdysmuoto - mobiiliverkkojen ollessa ytimessä - ja näytön tarkkuuden tasainen kasvu ovat saaneet aikaan pyrkimyksiä uusien koodausstandardien saavuttamiseksi parhaan mahdollisen pakkaustehokkuuden saavuttamiseksi.

Joten uusia kuvamuotoja on tulossa uusien videokoodausstandardien johdannaisiksi. Nämä uudet kuvamuodot tarjoavat suurempia ominaisuuksia kuin JPEG ja lupaavat merkittäviä säästöjä tiedostopainossa parantamalla visuaalista laatua.

WEBP

Google kehitti tämän muodon tavoitteenaan tarjota yksi verkkokykyinen kuvamuoto kaikkien tyypillisten käyttötapausten käsittelemiseksi.

Tärkeää on, että se pyrkii saavuttamaan JPEG: ää kevyempiä kuvia ilman visuaalisen laadun rangaistuksia. Se käyttää monimutkaisempia operaatioita - kuten lohkoennusteita - ja on johdannainen VP8-videokoodekista. Se tukee häviötöntä pakkaamista ja toisin kuin JPEG, se mahdollistaa läpinäkyvyyden ja animaatiot, jotka voivat yhdistää koodatut kuvat sekä häviöttömään että häviöttömään pakkaukseen.

Periaatteessa sen pitäisi toimia JPEG-, PNG- ja GIF-tiedostojen korvaajana. Tärkeä haittapuoli on ollut yleisen tuen puute. Viime aikoihin asti WebP oli rajoitettu Googlen tukemiin ohjelmistoihin, kuten Chrome-selaimeen ja Android-natiivisovelluksiin.

Kuitenkin ilmoituksella, että Edge ja Firefox (lukuun ottamatta iOS Firefoxia) ottavat WebP-tuen käyttöön vuonna 2019, se on ilmeisesti saamassa pitoa. On myös syytä huomata, että Apple - Safari ja iOS - ei vielä tue WebP: tä.

HEIC / HEIF

Tämä muoto tuo merkittävän kehityksen kahdessa suhteessa.

Ensinnäkin tiedostosäiliö tukee suurinta käytettävissä olevien kuvamuotojen joukkoa. Se tukee esimerkiksi monikuvatiedostoja, joissa on monikuvien pakkaaminen - keskeinen ominaisuus tehokkaille HDR-, monitarkennus- tai moninäkymäkuville.

Toiseksi se tukee monen tyyppistä muuta kuin kuvadataa huomattavan joustavasti. Tällä hetkellä suurin osa tätä säiliötä käyttävistä kuvista pakataan johdannaisella H265 / HEVC-videokoodekista, joka on kehitetty selviytymään tehokkaasti uusimman sukupolven näyttöjen 4k- ja 8k-tarkkuuksista. HEVC-koodaus sisältää monimutkaisempia operaatioita, joissa on vähemmän rajoituksia kuin JPEG-koodauksessa. Se saavuttaa paljon suuremman pakkaustehokkuuden hieman pidempien koodausaikojen kustannuksella - ei ollenkaan ongelma web-työnkulkuissa.

Kuten H265, myös HEVC: hen perustuva HEIC tukee Apple. Sillä on natiivi tuki iOS: ssä ja macOS: ssa, mutta - lähinnä patentti- ja lisenssiongelmien vuoksi - muut alustat (Android, Windows) eivät tue sitä. Jopa macOS: ssa Safari ei tue sitä. iOS-sovellukset näyttävät olevan ainoa käyttökelpoinen HEIC-sovellustapa verkossa.

Joten nousee iso kysymys: pitäisikö meidän tarjota WEBP / HEIC-vaihtoehtoja ja JPEG-vaihtoehtoja, varalla PNG-versiot?

Katsotaanpa kutakin tapausta ...

Pitäisikö minun palvella WEBP-johdannaisia?

Google väittää, että tämä muoto tuottaa paljon kevyempiä kuvia kuin JPEG, jolla on verrattava laatu. Riippumattomat testit ovat kuitenkin osoittaneet, että tämä tulos ei ole yhdenmukainen eri laatumittauksissa, ja painon lasku tasapainotetaan useimmissa tapauksissa lisääntyvällä epätarkkuudella.

Omissa verkkokaupan kuvissamme tehdyissä testeissä näimme WebP: n tiedostosäästöjä, mutta enemmän epätarkkuutta ja vähemmän yksityiskohtia. Vaikka näimme myös vähemmän riskiä soida ja estää esineitä, joita pidämme visuaalisesti ärsyttävämpinä kuin hämärtyminä.

Koska Apple-selaimet ja käyttöjärjestelmät eivät tue WebP: tä , emme yleensä suosittele JPEG: n kanssa kilpailevien WebP-johdannaisten tarjoamista. Tällaiset toimet lisäisivät median hallinnan monimutkaisuutta rajoitetuilla eduilla.

Tämä tilanne muuttuisi, jos Apple aloittaisi WebP: n tukemisen.

Jos näin olisi, WebP: n laajennettu ominaisuusjoukko ja tuotetut kevyemmät kuvat saattavat olla sen käyttämisen arvoisia, mikä yksinkertaistaa kuvahallinnan työnkulkuja tehokkaasti.

Jos haluat kokeilla WebP: tä itse, klassinen työkalu, kuten ImageMagick, on hyvä vaihtoehto. Se tekee helposti vertailtavia kuvaversioita erilaisilla laatu- ja tarkkuusasetuksilla sekä WebP- että JPEG-tiedostoille. Tuloksia voidaan tarkastella Chromella.

# Convert to WEBP quality 60 convert input.jpg -quality 60 output_60.webp # Convert to JPEG quality 60 convert input.jpg -quality 60 output_60.jpg # Convert to WEBP quality 60 and width 450px convert input.jpg -resize 450 -quality 60 output_450_60.webp

Different combinations of quality and resolution will have different effects in each case, as the compression algorithms work differently. So, check your relevant file sizes on several images to get a grasp of the potential savings and the best settings for a given use case.

Should I serve HEIC derivatives?

The advantage of HEIC (over JPEG) is clear. Weight reduction is consistently significant — about 50% — without loss of visual quality. The feature set supported is simply amazing.

The problem again is browser and operative system support.

Given the patent issues of HEVC and the hefty royalties associated, we can expect support to remain restricted to those in the Apple world. Since JPEG is already efficient in compressing images, the 50% of something small might not be worth enough to add complexity to our image processing workflow.

Certain cases using large images, with a major interest in visual quality AND with a large percentage of Apple devices in their user base should consider serving this format.

Performing tests with HEIC is very easy with a Mac. Preview allows us to export an image to HEIC and JPEG with different quality values and different resolutions. You won’t need to run many tests to see the clear and systematic difference between them.

If you want to try something more flexible that may be integrated in a web image processing workflow, GPAC is worth a look.

What about AVIF?

AVIF is the last of our contenders.

Like WebP and HEIC based on HEVC, AVIF is a derivative of the latest efforts in video standards. It also uses HEIF containers and so supports a complete feature set, encompassing all the main formats available. It brings much higher efficiency in compression inherited from the use of AV1 intra-frame coding mechanisms. These advantages make this format compelling.

Another significant advantage comes from the Alliance for Open Media, the large consortium behind its development as a fully open approach, with an open license, free of royalties. Big players like Google, Netflix, Adobe, Mozilla, Microsoft, Facebook and Amazon — major actors in the web graphics and video scene — are backing this new format and making a case for a fast and wide adoption, both in software and hardware. While the stream format was frozen in March 2018 with a reference code available, the first devices with hardware support for AV1 are expected by the end of 2019.

At the time of writing this article, the open source implementation of AV1 available may be still considered experimental and not suitable for production.

Summary

JPEG will remain the king format for general images for web in 2019, and PNG will remain as a default option for images with significant artwork.

The reason? Universal support.

Anything that opens an image will open JPEG or PNG in 2019, just like in previous years and decades! So no doubt that these universal formats will remain in place for some time yet.

The benefits of WebP remain controversial. A clear advantage of WebP is its ability to also replace PNG, potentially simplifying image processing workflows. However, without universal support this advantage vanishes. This may change only if Apple changes their mind and WebP finally gets universal adoption, then it could be used as a replacement for all JPEG, PNG and GIF images.

Sitä vastoin HEVC-kuviin perustuvat HEIC-kuvat tarjoavat selkeitä etuja etenkin suurille tarkkuuksille. Jos iOS-käyttäjien liikenteellä on merkitystä verkkosivustolle, jolla on suuria painavia kuvia, saattaa olla syytä harkita HEIC-vaihtoehtojen tarjoamista heille mahdollisten UX-parannusten avulla, erityisesti hitaiden matkapuhelinyhteyksien osalta. Nopeuttamisen lisäksi HEIC takaa laadun, melkein ilman ärsyttäviä esto- ja soitto-esineitä, jotka vaivaavat aggressiivista JPEG-politiikkaa.

Vaikka AVIF: n odotetaan vuonna 2019, tuki ja hyväksyminen vievät aikaa. Mutta varmasti, se on kuvamuoto, jota pidät tutkan alla lähitulevaisuutta varten.

Tietenkin pilvipalvelun käyttö - kuvanoptimointirajapinnan tai kuvanoptimointilaajennuksen avulla - on aina helppo ja selkeä vaihtoehto työn tekemiseen.