JPEG, WEBP, HEIC, AVIF? Ez az útmutató segít kiválasztani.
A JPEG évtizedek óta tartó páratlan dominanciája után az elmúlt években új formátumok - WebP és HEIC - jelentek meg, amelyek megkérdőjelezik ezt a helyzetet. A főbb szereplők csak részleges, de jelentős támogatást nyújtanak a böngészők és a mobil operációs rendszerek között. Egy másik új képformátum - az AVIF - várhatóan 2019-ben lép be a színre azzal az ígérettel, hogy végigsöpör az egész interneten.
Ebben a cikkben a klasszikus formátumok rövid átdolgozásával kezdjük, majd a WebP és a HEIC / HEIF leírását követjük. Ezután folytatjuk az AVIF felfedezését, és egy összefoglalással zárjuk az összes fő szempontot.
Az előnyökkel és hátrányokkal kapcsolatos megjegyzések mind a rendelkezésre álló mérvadó jelentések áttekintésére, mind az első kézből származó megfigyelésekre építenek az e-kereskedelmi munkafolyamatokban a képoptimalizálási folyamatok eszközeinek fejlesztése és telepítése során.
Klasszikus képformátumok az internethez univerzális támogatással
Emlékezzünk időrendi sorrendben a webképek három legfontosabb klasszikus formátumára.
GIF
A GIF támogatja az LZW veszteségmentes tömörítését és több keretet, amelyek lehetővé teszik egyszerű animációk készítését.
Ennek a formátumnak a legfőbb korlátja, hogy 256 színre van korlátozva. Ez ésszerű volt akkor, amikor a 80-as évek végén létrehozták, mivel ugyanez a korlátozás vonatkozott a meglévő kijelzőkre is. A megjelenítési technológia fejlődésével azonban nyilvánvalóvá vált, hogy nem alkalmas bármilyen sima színátmenet reprodukálására, mint például a fényképészeti képeken. Könnyen észrevehetjük az általa előállított színsávot.
A GIF azonban könnyű animációt tesz lehetővé univerzális támogatással. Ez a funkció mind a mai napig életben tartotta a formátumot a minőségi problémákra nem érzékeny használati esetekben, a legjellemzőbbek a kicsi, kevés vagy egyáltalán nem színezett animációs képek.
JPEG
A webes képformátumok királyát a digitális fényképezés munkafolyamatainak támogatására fejlesztették ki.
A szokásos 24 bites mélységgel sokkal nagyobb színfelbontást biztosít (nem szabad összetéveszteni a hatótávolsággal vagy a színskálával), mint amennyit az emberi szem észrevehet. Az emberi látás ismert mechanizmusainak kihasználásával támogatja a veszteséges tömörítést.
Szemünk érzékenyebb a közepes pikkelyekre, mint a finom részletekre. Következésképpen a JPEG lehetővé teszi számunkra a finom részletek (nagy térbeli frekvenciák) elvetését egy minőségi tényező által ellenőrzött mennyiséggel. A kevesebb minőség kevesebb részletet tartalmaz. Ezenkívül sokkal érzékenyebbek vagyunk a nagy fény kontrasztú részletekre, mint a csak kromatikus kontrasztú részletekre.
Tehát a JPEG belső módon újrakódolja az RGB (piros, zöld és kék) képeket egy fényerőben és két színcsatornában. Ez lehetővé teszi számunkra, hogy chroma részmintát használjunk a részletek eldobására csak a chroma csatornákban. Érdemes megjegyezni, hogy a JPEG a képeket 8x8 pixeles blokkokban kódolja.
Amint csökkentjük a minőségi tényezőt és / vagy agresszívabb kroma részmintát veszünk igénybe, egyre növekvő artefaktusokat kapunk a csengésből, a glóriákból, a blokkolásból vagy az elmosódásból. A JPEG problémája az, hogy a kép tartalmától függően a műtermékek különböző minőségi tényező értékeken jelenhetnek meg. A legvadabb különbség akkor jelenik meg, ha összehasonlítjuk a természetes fényképezésre gyakorolt hatásokat a műalkotásokra gyakorolt hatásokkal. Mivel a műalkotások (formák, betűtípusok) általában éles élekre támaszkodnak, még kis eldobott részletekért is műtermékeket kezdenek előállítani.
Fotók esetében a JPEG könnyedén csökkenti a fájl súlyát 10-szeresével, alig észrevehető tárgyakkal, a veszteségmentes tömörítéshez képest.
PNG
Ezt a veszteségmentes grafikai formátumot a GIF helyettesítésére fejlesztették ki, kezelve a színsávos (és licencelési) problémákat. Jelentős mennyiségű művet tartalmazó képekre volt szükség, amelyekhez a JPEG minimális tömörítési arány mellett is nagy műtárgyakat készített.
Támogatja az átláthatóságot és a GIF-hez képest javított tömörítést. Mivel nem dob el információkat, a PNG nem állít elő tárgyakat. Természetesen ez a sokféle színátmenet jelenlétében a nagyobb képtömeg rovására megy, a veszteséges tömörítéshez képest.
Sikeresen kihasználja a műalkotások egyik jellemző tulajdonságát: A fényképekkel ellentétben - amelyek a színek folytonosságát mutatják finom variációkkal - a műalkotások képei általában kevés jól körülhatárolható színt tartalmaznak.
Tehát a PNG tömöríti a képeket azáltal, hogy nagy mennyiségű pixelt képez le egy egyszerű diszkrét palettára, és ennek eredményeként sok bitet takarít meg. A GIF-hez képest sokkal jobb minőséget nyújt, általában sokkal kevesebb bájttal.
Újonnan érkezők részleges támogatással: WEBP és HEIC a HEVC alapján
A videokodekek által az adatfolyamok tömörítésére használt mechanizmusok két fő típusba sorolhatók: képkockák közötti és kereten belüli. Míg az első a redundanciákat használja ki időben, a kereten belüli mechanizmusok a redundancia csökkentésére összpontosítanak egy adott kereten belül, a többitől való függetlenség nélkül. Ez a tömörítési mechanizmus alkalmazható állóképekre.
A videomegosztás robbanása - amelynek középpontjában a mobilhálózatok állnak - és a kijelző felbontásának folyamatos növekedése az új kódolási szabványok iránti erőfeszítéseket hajtotta végre a tömörítés lehető leghatékonyabb elérése érdekében.
Tehát új képformátumok jelennek meg az új videokódolási szabványok származékaként. Ezek az új képformátumok nagyobb funkciókészleteket kínálnak, mint a JPEG, és jelentős megtakarítást ígérnek a fájl súlyában, javított vizuális minőség mellett.
WEBP
A Google ezt a formátumot azzal a céllal fejlesztette ki, hogy egyetlen web-képes képformátumot biztosítson az összes tipikus felhasználási eset kezelésére.
Fontos, hogy a JPEG-nél könnyebb képek elérésére törekszik, a vizuális minőség szankcionálása nélkül. Összetettebb műveleteket használ - mint például a blokk-előrejelzés - és a VP8 videokodek származéka. Támogatja a veszteségmentes tömörítést, és a JPEG-től eltérően lehetővé teszi az átlátszóságot és az animációkat, amelyek egyesíthetik a kódolt képeket veszteségmentes és veszteséges tömörítéssel egyaránt.
Elvileg a JPEG, PNG és GIF helyettesítésére kell szolgálnia. Fontos hátránya az egyetemes támogatás hiánya volt. Egészen a közelmúltig a WebP olyan Google által támogatott szoftverekre korlátozódott, mint a Chrome böngésző és az Android-natív alkalmazások.
Azzal a bejelentéssel azonban, hogy az Edge és a Firefox (kivéve az iOS Firefoxot) 2019-ben bevezetik a WebP támogatást, nyilvánvalóan egyre nagyobb vonzerőt kap. Érdemes megjegyezni azt is, hogy az Apple - a Safari és az iOS - még nem támogatja a WebP-t.
HEIC / HEIF
Ez a formátum két szempontból is jelentős fejlődést hoz.
Először is, a fájltároló támogatja az elérhető képformátumok közül a legnagyobb szolgáltatáskészletet. Támogatja például a több képkockát tömörítő, több képkockát tömörítő képeket - ez a legfontosabb jellemző a hatékony HDR, több fókuszú vagy több nézetből álló képekhez.
Másodszor, a nem képi adatok sok típusát figyelemre méltó rugalmassággal támogatja. Jelenleg a legtöbb konténert használó kép tömörül a H265 / HEVC videokodek képeinek származékával, amelyet úgy fejlesztettek ki, hogy hatékonyan megbirkózzon a legújabb generációs kijelzők által kínált 4k és 8k felbontásokkal. A HEVC kódolás összetettebb műveleteket tartalmaz, kevesebb korlátozással, mint a JPEG. Sokkal nagyobb tömörítési hatékonyságot ér el valamivel magasabb kódolási idők árán - ez egyáltalán nem jelent problémát a webes munkafolyamatokban.
A H265-hez hasonlóan a HEVC-re épülő HEIC-et is az Apple támogatja. Natív támogatást nyújt az iOS-ben és a macOS-ban, de - főleg szabadalmi és licencelési problémák miatt - a többi platform (Android, Windows) nem támogatja. Még a macOS-ban sem támogatja a Safari. Úgy tűnik, hogy az iOS-alkalmazások az egyetlen életképes felhasználási mód a HEIC számára az interneten.
Tehát egy nagy kérdés merül fel: kínáljunk-e WEBP / HEIC alternatívákat és JPEG-t, tartalékként a PNG verziókat?
Nézzük meg az egyes eseteket ...
Szolgáljak-e WEBP-származékokat?
A Google állítása szerint ez a formátum sokkal könnyebb képeket készít, mint a JPEG, összehasonlítható minőségben. Független tesztek rámutattak azonban arra, hogy ez az eredmény a különböző minőségi mérőszámokban nem következetes, és a súlycsökkentést a legtöbb esetben a növekvő homályosság egyensúlyozza ki.
Saját e-kereskedelmi képekkel végzett tesztjeink során fájlmegtakarításokat tapasztaltunk a WebP számára, de a több elmosódás és a kevesebb részlet árán. Bár a műtárgyak csengésének és blokkolásának kisebb kockázatát is láttuk, amit vizuálisan inkább idegesítőnek, mint elmosódásnak tartanánk.
Mivel a WebP nem támogatja az Apple böngészőit és az operációs rendszereket, általában nem javasoljuk a JPEG-szel versengő WebP-származékok kiszolgálását. Az ilyen lépések korlátozott előnyökkel növelnék a médiakezelés összetettségét.
Ez a helyzet megváltozna, ha az Apple elkezdené támogatni a WebP-t.
Ha ez a helyzet állna fenn, akkor a WebP kibővített szolgáltatáskészlete és az előállított könnyebb képek érdemesek lehetnek a használatra, hatékonyan egyszerűsítve a képkezelési munkafolyamatokat.
A WebP kipróbálásához jó lehetőség egy olyan klasszikus eszköz, mint az ImageMagick. Könnyen összehasonlítható képváltozatokat készít, különböző minőségi és felbontási beállításokkal, mind a WebP, mind a JPEG formátumban. Az eredmények megtekinthetők a Chrome-mal.
# 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.webpDifferent 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.
In contrast, HEIC images based on HEVC do offer clear benefits, especially for large resolutions. If traffic of iOS users is relevant for a website with large heavy images, it may be worth considering serving HEIC alternatives for them, with potential UX improvements, especially for slow mobile connections. Besides speeding up, HEIC assures quality, almost free of the annoying blocking and ringing artifacts that plague aggressive JPEG policies.
Although AVIF is expected for 2019, support and adoption will take time. But for sure, it is an image format to keep under your radar for the near future.
Of course, the use of a cloud service -through an image optimization API or an image optimization plugin- will always remain an easy and straightforward alternative for getting the job done.