Уявіть собі: найкращий формат зображення для Інтернету в 2019 році

JPEG, WEBP, HEIC, AVIF? Цей посібник допоможе вам вибрати.

Після десятиліть неперевершеного домінування JPEG, останні роки стали свідками появи нових форматів - WebP та HEIC - які кидають виклик цій позиції. Вони мають лише часткову, але значну підтримку з боку основних гравців серед веб-браузерів та мобільних операційних систем. Очікується, що в 2019 році на сцену вийде ще один новий формат зображень - AVIF, який обіцяє пронести весь Інтернет.

У цій статті ми почнемо з короткого перегляду класичних форматів, а потім опису 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, багатофокусного або мульти-перегляду зображень.

По-друге, він підтримує багато типів незображувальних даних із надзвичайною гнучкістю. В даний час більшість зображень, що використовують цей контейнер, стискаються з похідною для зображень з відеокодека H265 / HEVC, розробленої для ефективної роботи з роздільною здатністю 4k та 8k, представленою на дисплеях останнього покоління. Кодування HEVC передбачає більш складні операції з меншими обмеженнями, ніж JPEG. Він досягає набагато вищої ефективності стиснення за рахунок трохи більшого часу кодування - це зовсім не проблема в веб-робочих процесах.

Як і H265, HEIC на базі HEVC підтримується Apple. Він має вбудовану підтримку в iOS та macOS, але - здебільшого через проблеми з патентами та ліцензуванням - він не підтримується рештою платформ (Android, Windows). Навіть у macOS Safari його не підтримує. Програми iOS, здається, є єдиним життєздатним варіантом використання HEIC в Інтернеті.

Тож виникає велике питання: чи варто пропонувати альтернативи WEBP / HEIC та JPEG, а резервні версії PNG?

Давайте розглянемо кожен випадок ...

Чи повинен я обслуговувати похідні WEBP?

Google стверджує, що цей формат дає набагато світліші зображення, ніж JPEG, із порівнянною якістю. Однак незалежні тести показали, що цей результат не узгоджується з різними показниками якості, і зниження ваги, в більшості випадків, збалансовано за рахунок збільшення розмитості.

У наших власних тестах із зображеннями електронної комерції ми побачили економію файлів для WebP, але ціною більшої розмитості та меншої деталізації. Хоча ми також бачили менший ризик дзвонити та блокувати артефакти, що ми вважали б більше візуально дратуючими, ніж розмитими.

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.