Зображте це: найкращий формат зображень для Інтернету у 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, мультифокусних або мультифокусних зображень.

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

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

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

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

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

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

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

Оскільки веб-браузерам відсутня підтримка браузерів та операційних систем Apple, ми зазвичай не рекомендуємо обслуговувати похідні WebP, що конкурують з JPEG. Такі кроки могли б збільшити складність управління ЗМІ з обмеженими перевагами.

Ця ситуація зміниться, якби Apple почала підтримувати WebP.

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

Щоб спробувати WebP самостійно, класичний інструмент на зразок ImageMagick - хороший варіант. Це дозволяє легко порівнювати версії зображень з різними налаштуваннями якості та роздільної здатності як для WebP, так і для JPEG. Результати можна переглянути за допомогою Chrome.

# Перетворити на якість WEBP 60
конвертувати input.jpg -якісність 60 вихід_60.webp
# Перетворити в якість JPEG 60
конвертувати input.jpg -якісність 60 output_60.jpg
# Перетворити на якість WEBP 60 та ширину 450 пікселів
конвертувати input.jpg -розміри 450 -качество 60 вихід_450_60.webp

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

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

Перевага HEIC (над JPEG) очевидна. Зменшення ваги постійно значне - близько 50% - без втрати зорової якості. Підтримуваний набір функцій просто вражаючий.

Проблема знову - підтримка браузера та операційної системи.

Враховуючи патентні питання HEVC та пов'язані з цим здоровенні роялті, ми можемо очікувати, що підтримка залишатиметься лише в світі Apple. Оскільки JPEG вже ефективний для стиснення зображень, 50% чогось невеликого може бути недостатньо вартим, щоб додати складності нашому процесу обробки зображень.

Окремі випадки, що використовують великі зображення, з великим інтересом до якості візуалу ТА з великим відсотком пристроїв Apple у їхній базі користувачів, повинні розглянути можливість обслуговування цього формату.

Виконання тестів на HEIC дуже просто. Попередній перегляд дозволяє експортувати зображення до HEIC та JPEG з різними значеннями якості та різною роздільною здатністю. Вам не потрібно буде запускати багато тестів, щоб побачити чітку і систематичну різницю між ними.

Експорт до HEIC у попередньому перегляді

Якщо ви хочете спробувати щось більш гнучке, яке може бути інтегровано в робочий процес обробки веб-зображень, GPAC варто переглянути.

А як щодо AVIF?

AVIF - останній з наших претендентів.

Як і WebP та HEIC на базі HEVC, AVIF є похідною від останніх зусиль у відеостандартів. Він також використовує контейнери HEIC / HEIF і тому підтримує повний набір функцій, що охоплює всі основні наявні формати. Це забезпечує набагато більшу ефективність стиснення, успадкованого від використання механізмів кодування коду AV1. Ці переваги роблять цей формат переконливим.

Ще одна значна перевага - Альянс за відкриті медіа - великий консорціум, що стоїть за його розвитком як повністю відкритого підходу, з відкритою ліцензією, без роялті. Великі гравці, такі як Google, Netflix, Adobe, Mozilla, Microsoft, Facebook та Amazon - основні учасники веб-графіки та відео сцени - підтримують цей новий формат і роблять справу для швидкого та широкого прийняття, як програмного забезпечення, так і апаратного забезпечення. Поки формат потоку був заморожений у березні 2018 року з наявним довідковим кодом, перші пристрої з апаратною підтримкою для AV1 очікуються до кінця 2019 року.

На момент написання цієї статті реалізація наявного AV1 з відкритим кодом все ще може вважатися експериментальною і не придатною для виробництва.

Підсумок

JPEG залишиться форматом короля для загальних зображень для Інтернету у 2019 році, а PNG залишиться опцією за замовчуванням для зображень із значними творами мистецтва.

Причина? Універсальна підтримка.

Все, що відкриє зображення, відкриє JPEG або PNG у 2019 році, як і в попередні роки та десятиліття! Тож не сумнівайтеся, що ці універсальні формати ще деякий час залишаться на місці.

Переваги WebP залишаються суперечливими. Очевидною перевагою WebP є його можливість також замінювати PNG, потенційно спрощуючи робочі процеси обробки зображень. Однак без універсальної підтримки ця перевага зникає. Це може змінитися лише в тому випадку, якщо Apple змінить свою думку і WebP нарешті отримає універсальне прийняття, то це може бути використане як заміна для всіх зображень JPEG, PNG та GIF.
 
На відміну від цього, зображення HEIC на основі HEVC дають чіткі переваги, особливо для великих роздільних можливостей. Якщо трафік користувачів iOS та macOS є релевантним для веб-сайту з великими важкими зображеннями, можливо, варто розглянути можливість подачі альтернатив HEIC для них з потенційними поліпшеннями UX, особливо для повільних мобільних з'єднань. Окрім прискорення роботи, HEIC забезпечує якість, майже без дратівливих артефактів, що блокують та дзвонять, що спричиняють агресивну політику JPEG.

Хоча AVIF очікується на 2019 рік, підтримка та прийняття потребуватимуть часу. Але точно, це формат зображення, який потрібно тримати під радаром найближчим часом.

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