Kujutage seda: veebi parim pildivorming 2019. aastal

JPEG, WEBP, HEIC, AVIF? See juhend aitab teil valida.

Pärast aastakümneid kestnud JPEG-i konkurentsitut domineerimist on viimastel aastatel ilmnenud uued vormid - WebP ja HEIC -, mis vaidlustavad selle positsiooni. Neil on veebibrauserite ja mobiilsete operatsioonisüsteemide seas vaid osaline, kuid märkimisväärne tugi suurematelt mängijatelt. Eeldatakse, et 2019. aastal saabub uus uus pildivorming - AVIF - lubadusega kogu veeb läbi viia.

Selles artiklis alustame klassikaliste vormingute lühikest ülevaadet, millele järgneb WebP ja HEIC / HEIF kirjeldus. Seejärel liigume AVIF-i uurima ja lõpetame kokkuvõttega, mis paneb kõik põhipunktid kokku.

Kommentaarid eeliste ja puuduste kohta põhinevad nii olemasolevate autoriteetsete aruannete ülevaatamisel kui ka esmapilgul tehtud vaatlustel poodide optimeerimise torujuhtmete tööriistade väljatöötamisel ja juurutamisel poodide töövoogudes.

Klassikalised pildivormingud veebis universaalse toega

Tuletame meelde kronoloogilises järjekorras veebipiltide kolme kõige olulisemat klassikalist vormingut.

GIF

GIF toetab LZW kadudeta tihendamist ja mitut kaadrit, mis võimaldavad meil luua lihtsaid animatsioone.

Selle vormingu peamine piirang on see, et see on piiratud 256 värviga. See oli mõistlik juba siis, kui see loodi 80-ndate lõpus, kuna sama piirang kehtis ka olemasolevatele kuvaritele. Ekraanitehnoloogia täiustumisega selgus aga, et see ei sobi reprodutseerima ühtlaseid värvilisi gradiente, nagu fotopiltidel. Saame hõlpsasti märgata selle tekitatavat värvi riba.

Kuid GIF võimaldab universaalsel toel kerget animatsiooni. See funktsioon on vormingut tänaseni elus hoidnud kasutusjuhtumites, mis pole tundlikud kvaliteediprobleemide suhtes, kõige tüüpilisemad on väikesed animeeritud pildid, millel on vähe värve või pole neid üldse.

JPEG

Veebi pildivormingute kuningas töötati välja digifotograafia töövoogude toetamiseks.

Tavalise 24-bitise sügavusega pakub see palju suuremat värvi eraldusvõimet (mitte segi ajada vahemiku või gammaga), kui inimsilm suudab tajuda. See toetab kadunud kokkusurumist, kasutades ära inimese nägemismehhanisme.

Meie silmad on keskmiste kaalude suhtes tundlikumad kui detailide suhtes. Järelikult võimaldab JPEG kvaliteetsete tegurite poolt kontrollitud koguses peeneid detaile (kõrged ruumilised sagedused) kõrvale jätta. Vähem kvaliteeti tähendab vähem detailide säilimist. Pealegi oleme suure heleduskontrastiga detailide suhtes tundlikumad kui ainult kromaatilise kontrastiga detailide suhtes.

Niisiis, JPEG rekodeerib RGB (punane, roheline ja sinine) pildid sisemiselt ühes heleduse ja kahes kromaalkanalis. See võimaldab meil kasutada kroma alamvalimit, et loobuda üksikasjalikumalt ainult kromakanalites. Väärib märkimist, et JPEG kodeerib pilte plokkidena, mille suurus on 8x8 pikslit.

Kui vähendame kvaliteeditegurit ja / või rakendame agressiivsemat kroomi alamvalimist, hakkame saama üha suuremaid helina, halode, blokeerimise või hägustumise artefakte. JPEG-i probleem on see, et sõltuvalt pildi sisust võivad artefaktid ilmneda erineva kvaliteediteguri väärtuse juures. Kõige metsikum erinevus ilmneb siis, kui võrrelda loodusfotode ja kunstiteoste efekte. Kuna kunstiteosed (kujundid, kirjatüübid) tuginevad tavaliselt teravatele servadele, hakkavad nad tootma artefakte ka väikeste visatud koguste korral.

Fotode puhul vähendab JPEG failikaalu 10-kordselt, vaevumärgatavate artefaktidega, võrreldes kadudeta tihendamisega.

PNG

See kadudeta graafikavorming töötati välja GIF-i asendamiseks, lahendades selle värviribade (ja litsentside) probleeme. Seda oli vaja märkimisväärse hulga kunstiteostega piltide jaoks, mille jaoks JPEG tootis suuri artefakte isegi minimaalse tihendusmääraga.

See toetab läbipaistvust ja paremat pakkimist võrreldes GIF-iga. Kuna see teavet ei viska, ei tooda PNG artefakte. Muidugi on see paljude erinevate värvigraditsioonide juures suurema kaalu arvelt, võrreldes kadudega tihendamisega.

Sellel õnnestub ära kasutada kunstiteose sagedasi omadusi: Erinevalt fotograafiast - millel on värvide järjepidevus koos peene variatsiooniga - on kunstipiltidel tavaliselt vähe täpselt määratletud värve.

Niisiis, PNG tihendab pilte, kaardistades suures koguses piksleid lihtsasse diskreetsesse paletti ja säästes selle tulemusel palju bitti. Võrreldes GIF-iga pakub see palju paremat kvaliteeti, tavaliselt palju vähem baite.

Osalise toega uustulnukad: HEVC-põhised WEBP ja HEIC

Mehhanismid, mida videokodekid voogude tihendamiseks kasutavad, võib jagada kahte põhitüüpi: kaadritevaheline ja kaadrisisene. Kui esimene kasutab koondamisi pikema aja jooksul ära, keskenduvad kaadrisisesed mehhanismid koondamise vähendamisele antud kaadris, sõltumata ülejäänutest. Seda tihendusmehhanismi võib rakendada piltide puhul.

Video jagamise plahvatus - selle keskmes on mobiilsidevõrgud - ja ekraani eraldusvõime pidev kasv on ajendanud pingutama uute kodeerimisstandardite nimel, et saavutada tihendamise võimalikult suur efektiivsus.

Nii on uute videokodeerimisstandardite tuletistena kerkimas uued pildivormingud. Need uued pildivormingud pakuvad suuremaid funktsioonikomplekte kui JPEG ja lubavad parema visuaalse kvaliteediga failide kaalu olulist kokkuhoidu.

WEBP

Google töötas selle vormingu välja eesmärgiga pakkuda üht veebi võimaldavat pildivormingut kõigi tüüpiliste kasutusjuhtumite lahendamiseks.

Oluline on see, et see püüab saavutada JPEG-st kergemaid pilte, ilma et visuaalse kvaliteedi eest karistataks. See kasutab keerukamaid toiminguid - nagu ploki ennustamine - ja on tuletis VP8 videokoodekist. See toetab kadudeta tihendamist ja erinevalt JPEG-st võimaldab läbipaistvust ja animatsioone, mis võivad kombineerida nii kadudeta kui ka kadudeta tihendusega kodeeritud pilte.

Põhimõtteliselt peaks see asendama JPEG, PNG ja GIF. Oluliseks puuduseks on olnud universaalse toetuse puudumine. Alles hiljuti oli WebP piiratud ainult Google'i toetatud tarkvaraga, näiteks Chrome'i brauseriga ja Androidile omaste rakendustega.

Kuid teatega, et Edge ja Firefox (välja arvatud iOS Firefox) peavad WebP-toe kasutusele võtma 2019. aastal, on see ilmselgelt veojõudu suurendamas. Samuti väärib märkimist, et Apple - Safari ja iOS - ei toeta veel WebP-d.

HEIC / HEIF

See formaat toob kaasa märkimisväärse arengu kahes erinevas osas.

Esiteks toetab failikonteiner saadaolevate pildivormingute seas suurimat funktsiooni. See toetab näiteks mitme kaadri tihendusega mitme kaadriga pilte - tõhusa HDR-, mitme fookusega või mitme vaatega piltide põhifunktsioon.

Teiseks toetab see märkimisväärse paindlikkusega mitut tüüpi mitte-pildilisi andmeid. Praegu tihendatakse enamus seda konteinerit kasutavaid pilte H265 / HEVC videokoodeki piltide derivaadiga, mis on välja töötatud selleks, et tõhusalt toime tulla viimase põlvkonna ekraanide 4k ja 8k eraldusvõimega. HEVC-kodeerimine hõlmab keerukamaid toiminguid, millel on vähem piiranguid kui JPEG-l. See saavutab palju suurema tihendustõhususe veidi kõrgemate kodeerimisaegade hinnaga - see pole veebitööprotsessides üldse probleem.

Nagu H265, toetab ka HEVC-l põhinevat HEIC-i Apple. Sellel on kohalik tugi iOS-is ja macOS-is, kuid - peamiselt patentide ja litsentsimise probleemide tõttu - ülejäänud platvormid (Android, Windows) seda ei toeta. Isegi MacOS-is ei toeta Safari seda. Tundub, et iOS-i rakendused on veebis ainus mõistlik HEIC-i kasutusala.

Nii tekib suur küsimus: kas peaksime pakkuma WEBP / HEIC-i alternatiive ja JPEG-i, varuks PNG-versioonid?

Vaatame iga juhtumit ...

Kas peaksin WEBP-i derivaate teenima?

Google väidab, et see vorming toodab võrreldes JPEG-ga võrreldava kvaliteediga palju heledamaid pilte. Kuid sõltumatud testid on näidanud, et see tulemus ei ole erinevates kvaliteedinäitajates ühtlane ja kaalu vähendamine on enamikul juhtudel tasakaalustatud suureneva hägususega.

Oma testides koos poodide piltidega nägime WebP-i jaoks failide kokkuhoidu, kuid suurema hägususe ja vähem detailide hinnaga. Kuigi nägime ka vähem artefaktide helistamise ja blokeerimise ohtu, mida pidasime visuaalselt rohkem tüütuks kui hägusaks.

Kuna Apple'i brauserid ja operatsioonisüsteemid ei toeta WebP-d, ei soovita me üldiselt JPEG-ga konkureerivaid WebP-tuletisi teenida. Sellised sammud suurendaksid meediumihalduse keerukust piiratud eeliste korral.

See olukord muutuks, kui Apple hakkaks WebP-d toetama.

Kui see nii oleks, võivad WebP laiendatud funktsioonide komplekt ja toodetud kergemad pildid olla selle kasutamist väärt, lihtsustades pildihalduse töövoogusid tõhusalt.

Ise WebP proovimiseks on hea võimalus klassikaline tööriist nagu ImageMagick. See teeb nii WebP kui ka JPEG jaoks erineva kvaliteedi ja eraldusvõimega seadetega hõlpsasti võrreldavaid pildiversioone. Tulemusi saab vaadata Chrome'i abil.

# 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.

Seevastu HEVC-põhised HEIC-kujutised pakuvad selgeid eeliseid, eriti suurte eraldusvõimete korral. Kui iOS-i kasutajate liiklus on suurte raskete piltidega veebisaidi jaoks asjakohane, võib tasuda kaaluda nende jaoks HEIC-i alternatiivide pakkumist koos võimalike UX-i täiustustega, eriti aeglaste mobiilsideühenduste korral. Lisaks kiirendamisele tagab HEIC kvaliteedi, peaaegu ilma tüütutest blokeerivatest ja helistavatest artefaktidest, mis kimbutavad agressiivset JPEG-poliitikat.

Kuigi AVIF-i eeldatakse 2019. aastaks, võtab tugi ja vastuvõtmine aega. Kuid kindlasti on see pildivorming, mida lähiajal oma radari all hoida.

Muidugi jääb pilveteenuse kasutamine - pildi optimeerimise API või pildi optimeerimise pistikprogrammi kaudu - alati lihtsaks ja arusaadavaks alternatiiviks töö tegemiseks.