Представете си това: най-добрият формат на изображението за мрежата през 2019 г.

JPEG, WEBP, HEIC, AVIF? Това ръководство ще ви помогне да изберете.

След десетилетия на ненадмината доминация на JPEG, последните години станаха свидетели на появата на нови формати - WebP и HEIC - които предизвикват тази позиция. Те имат само частична, но значителна подкрепа от големите играчи сред уеб браузърите и мобилните операционни системи. Очаква се още един нов формат на изображението - AVIF - да излезе на сцената през 2019 г. с обещание да обхване цялата мрежа.

В тази статия ще започнем с кратка ревизия на класическите формати, последвана от описание на WebP и HEIC / HEIF. След това ще преминем към изследването на AVIF и ще завършим с обобщение, събиращо всички основни моменти.

Коментарите за предимствата и недостатъците се основават както на прегледа на наличните авторитетни доклади, така и на наблюдения от първа ръка по време на разработването и внедряването на инструменти за тръбопроводи за оптимизиране на изображения в работните процеси на електронната търговия.

Класически формати на изображения за мрежата с универсална поддръжка

Нека си припомним в хронологичен ред трите най-важни класически формата за уеб изображения.

GIF

GIF поддържа LZW компресия без загуби и множество кадри, които ни позволяват да създаваме прости анимации.

Основното ограничение на този формат е, че той е ограничен до 256 цвята. Това беше разумно още при създаването му в края на 80-те години, тъй като същото ограничение се прилагаше към съществуващите дисплеи. С подобряването на технологията на показване обаче стана ясно, че не е подходящо да се възпроизвеждат плавни цветови градиенти, като тези, открити във фотографските изображения. Лесно можем да забележим цветната лента, която произвежда.

GIF обаче позволява лека анимация с универсална поддръжка. Тази функция поддържа формата до днес и в случаи на употреба, които не са чувствителни към проблеми с качеството, като най-типичните са малки анимирани изображения с малко или никакви цветове.

JPEG

Кралят на графичните формати за уеб е разработен в подкрепа на работните процеси на цифровата фотография.

С обичайната 24-битова дълбочина, той осигурява много повече цветова разделителна способност (да не се бърка с обхвата или гамата), отколкото човешкото око може да разпознае. Той поддържа компресия със загуби чрез използване на известни механизми на човешкото зрение.

Очите ни са по-чувствителни към средните везни, отколкото към фините детайли. Следователно JPEG ни позволява да изхвърляме фини детайли (високи пространствени честоти), чрез количество, контролирано от качествен фактор. По-малко качество означава, че се запазват по-малко детайли. Освен това сме много по-чувствителни към детайли с висок контраст на яркост, отколкото детайли само с хроматичен контраст.

Така че JPEG вътрешно прекодира RGB (червено, зелено и синьо) изображения в една осветеност и два хроматични канала. Това ни позволява да използваме подсемплиране на цветността, за да отхвърлим повече подробности само в хроматичните канали. Заслужава да се отбележи, че JPEG кодира изображенията в блокове от 8x8 пиксела.

Тъй като намаляваме качествения фактор и / или прилагаме по-агресивна поддискретизация на наситеността, започваме да получаваме нарастващи артефакти на звънене, ореоли, блокиране или размазване. Проблем с JPEG е, че в зависимост от съдържанието на изображението артефактите могат да се появят при различни стойности на фактора на качеството. Най-дивата разлика се появява при сравняване на ефектите върху естествената фотография с ефектите върху произведения на изкуството. Тъй като произведенията на изкуството (фигури, шрифтове) обикновено разчитат на остри ръбове, те започват да произвеждат артефакти дори за малки количества изхвърлени детайли.

За снимки JPEG лесно осигурява намаляване на теглото на файла с коефициент 10 с едва забележими артефакти в сравнение с компресирането без загуби.

PNG

Този графичен формат без загуби е разработен, за да замести GIF, като се обърне към проблемите с цветовата лента (и лицензирането). Той е необходим за изображения със значително количество произведения на изкуството, за които JPEG създава големи артефакти дори с минимални нива на компресия.

Той поддържа прозрачност и подобрена компресия в сравнение с GIF. Тъй като не изхвърля информация, PNG не произвежда артефакти. Разбира се, това е за сметка на по-голямото тегло на изображението при наличието на много различни цветови градиенти, в сравнение с компресията със загуби.

Той успява да използва често срещана характеристика на произведенията на изкуството: За разлика от фотографията - която се отличава с континуум от цветове с фини вариации - картините с произведения на изкуството обикновено се отличават с малко добре дефинирани цветове.

И така, PNG компресира изображения, като картографира големи количества пиксели в проста дискретна палитра и в резултат спестява много битове. В сравнение с GIF, той осигурява много по-високо качество с обикновено много по-малко байтове.

Новодошли с частична поддръжка: WEBP и HEIC, базирани на HEVC

Механизмите, използвани от видеокодеците за компресиране на потоци, могат да бъдат класифицирани в два основни типа: междукадрови и вътрешнокадрови. Докато първият експлоатира съкращенията във времето, вътрешнокадровите механизми се фокусират върху намаляването на съкращенията вътре в даден кадър, без каквато и да е зависимост от останалите. Този механизъм за компресиране може да се приложи към неподвижни изображения.

Експлозията на видео споделяне - с мобилни мрежи в основата - и непрекъснатото увеличаване на разделителната способност на дисплея насочи усилията към нови стандарти за кодиране, за да се постигне възможно най-висока ефективност при компресиране.

Така се появяват нови формати на изображения като производни на новите стандарти за видео кодиране. Тези нови формати на изображения предлагат по-големи набори от JPEG и обещават съответни икономии на тегло на файла с подобрено визуално качество.

WEBP

Google разработи този формат с цел да осигури един-единствен уеб-формат на изображението, който да се справи с всички типични случаи на употреба.

Важното е, че се стреми да постигне по-светли изображения от JPEG, без санкции за визуалното качество. Той използва по-сложни операции - като блоково предсказване - и е производно на видео кодека VP8. Той поддържа компресия без загуби и за разлика от JPEG, позволява прозрачност и анимации, които могат да комбинират изображения, кодирани както с компресия без загуби, така и със загуби.

По принцип той трябва да служи като заместител на JPEG, PNG и GIF. Важен недостатък е липсата на универсална подкрепа. Доскоро WebP беше ограничен до софтуера, подкрепен от Google, като браузъра Chrome и приложенията, използвани от Android.

Въпреки това, с обявяването, че Edge и Firefox (с изключение на iOS Firefox) ще въведат поддръжка на WebP през 2019 г., очевидно набира сила. Също така си струва да се отбележи, че Apple - Safari и iOS - все още не поддържа WebP.

HEIC / HEIF

Този формат носи значително развитие в две различни отношения.

Първо, файловият контейнер поддържа най-големия набор от налични формати на изображения. Той поддържа например многокадрови изображения с многокадрово компресиране - ключова характеристика за ефективен HDR, многофокусен или мулти-изглед изображения.

Secondly, it supports many types of non-image data with a remarkable flexibility. Currently, most images using this container are compressed with a derivative for images from the H265/HEVC video codec, developed to efficiently cope with the 4k and 8k resolutions featured by the latest generation displays. HEVC coding involves more complex operations with fewer restrictions than JPEG. It achieves a much higher compression efficiency at the cost of slightly higher coding times — not a problem at all in web workflows.

Like H265, HEIC based on HEVC is backed by Apple. It has native support in iOS and macOS, but — mostly due to patent and licensing issues — it is not supported by the rest of platforms (Android, Windows). Even in macOS, Safari doesn't support it. iOS apps appear to be the only viable usecase for HEIC in the web.

So a big question arises: should we offer WEBP/HEIC alternatives and JPEG, with PNG versions as a fallback?

Let’s look at each case...

Should I serve WEBP derivatives?

Google claims that this format produces much lighter images than JPEG with comparable quality. However, independent tests have pointed that this result is not consistent across different measures of quality, and weight reduction is, in most cases, balanced by increasing blurriness.

In our own tests with ecommerce images, we saw file savings for WebP, but at the price of more blur and less detail. Although, we also saw less risk of ringing and blocking artifacts, which we’d consider more visually annoying than blur.

As WebP lacks support by Apple browsers and operative systems, we do not generally recommend serving WebP derivatives competing with JPEG. Such moves would increase media management complexity with limited benefits.

This situation would change if Apple started supporting WebP.

If this were the case, then the extended feature set of WebP and the lighter images produced may be worth its use, effectively simplifying image management workflows.

To try WebP yourself, a classic tool like ImageMagick is a good option. It makes easy-to-compare image versions with different settings of quality and resolution for both WebP and JPEG. Results can be viewed with Chrome.

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

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.