AVIF у PNG: заради прозорості й заради зображень, які ви ще редагуватимете
AVIF уміє зберігати прозорість, і більшість конвертерів її викидають. Пропустіть логотип із чистими кутами через недбалий сервіс, і за ним опиниться білий прямокутник, а то й чорний. Це перша причина обрати тут PNG, а не JPG: у PNG є справжній альфа канал, тож вирізаний об'єкт приходить готовим лягти на слайд, у макет чи на картку товару.
Друга причина це редагування. Стиснення PNG без втрат: він записує ті пікселі, які йому віддали, і більше нічого не відкидає. Переведіть зображення в JPG, і кожне наступне збереження додасть артефакти поверх наявних. Якщо картинка йде в редактор або ви кілька разів кадруватимете та перезберігатимете її, PNG не бере плати за жодне з таких кіл.
Перевірка прозорості, піксель за пікселем
Ми зібрали AVIF із трьох вертикальних смуг: одна повністю прозора, одна рівно наполовину прозора, одна повністю непрозора. Потім прогнали його через усі налаштування на власному сервері й перевірили результат піксель за пікселем.
| Налаштування | Прозора ділянка | Напівпрозора ділянка | Непрозора ділянка |
|---|---|---|---|
| Recommended | лишилася прозорою | лишилася рівно наполовину | лишилася непрозорою |
| Smallest, 64 кольори | лишилася прозорою | лишилася рівно наполовину | лишилася непрозорою |
| Palette compression вимкнено | лишилася прозорою | лишилася рівно наполовину | лишилася непрозорою |
Часткова прозорість уціліла навіть на 64 кольорах. Саме на цьому спотикається більшість конвертерів: в обмеженій палітрі їй начебто немає очевидного місця, і м'яка тінь зазвичай перетворюється на жорсткий край. Тут за жодного налаштування нічого не зводиться на кольорову підкладку. Той самий файл, пропущений через конвертацію AVIF у JPG, повернувся з прозорою смугою, залитою суцільним кольором, бо JPEG узагалі не вміє зберігати прозорість.
Чому ми не обіцяємо вам відсотків
Palette compression увімкнено за замовчуванням, бо повнокольоровий PNG фотографії виходить величезним, а звичайний zlib майже його не зменшує. Скільки саме ви заощадите, цілком залежить від зображення. Ось той самий AVIF 1200 на 900, 21 КБ на диску, сконвертований за кожного налаштування:
| Налаштування | Палітра | PNG на виході | Що сталося |
|---|---|---|---|
| Fast | 256 кольорів | 281 КБ | залишено повнокольоровий PNG, палітровий варіант вийшов більшим |
| Recommended | 128 кольорів | 223 КБ | палітру застосовано |
| Smallest | 64 кольори | 197 КБ | палітру застосовано |
| Palette compression вимкнено | немає | 227 КБ | строго без втрат, повний колір |
На цьому конкретному зображенні палітра не дала майже нічого, а на 256 кольорах зробила б файл більшим, тож інструмент від неї відмовився й лишив повнокольоровий варіант. На пласкому логотипі чи скриншоті те саме налаштування здатне врізати файл більш ніж удвічі. Тому ніде на цій сторінці немає жодної цифри економії у відсотках. Єдина обіцянка, яку варто давати, це та, якої ми можемо дотримати: ви завжди отримуєте той варіант, що менший, а результат повідомляє, який саме вам дістався.
Розраховуйте, що PNG буде в кілька разів важчим за ваш AVIF
AVIF це сучасний кодек із втратами, якому дозволено відкидати деталі, відсутності яких око не помітить. PNG зобов'язаний записати кожен переданий йому піксель. Фотографія, що вкладається в пару сотень кілобайт в AVIF, у повнокольоровому PNG іде в мегабайти, і це ціна відсутності втрат, а не брак конвертації. Якщо PNG усе ще заважкий для вашого завдання, найімовірніше це фотографія, і AVIF у JPG підійде їй краще.
Скриншоти й текст лишаються чіткими
Різкі краї, текст інтерфейсу та пласкі заливки це найгірше, з чим дає раду JPEG. Він працює маленькими квадратними блоками й лишає помітні ореоли навколо кожної літери. PNG зберігає такі краї точно, тож скриншот конвертується з текстом такої самої чіткості, яка була в AVIF. На пласкій графіці Palette compression і окуповується найсильніше, бо у скриншоті чи логотипі справді мало різних кольорів. Для скриншота з градієнтами, коли вам потрібна не економія, а впевненість, вимкніть Palette compression і збережіть усі кольори.
Задайте палітру самі
Під налаштуванням стиснення є поле Colours з кількістю кольорів. Не чіпайте його, і кожне налаштування візьме власне значення за замовчуванням. Поставте будь яке число від 2 до 256, і палітра буде саме такою, що зручно, коли ви підганяєте зображення під уже готовий матеріал або тиснете іконку до межі. Повністю вимкнене Palette compression дає строго попіксельно точний повнокольоровий PNG.
Орієнтація, колір і розміри
Тег орієнтації з телефонного знімка застосовується до запису файлу й потім прибирається з результату, тож зображення приходить правильно повернутим і жоден переглядач не розверне його вдруге. Широкий профіль Display P3 вбудовується в PNG, а не викидається, і це різниця між точним кольором і небом, яке повертається кислотним; налаштування Colour profile коректно переводить зображення в sRGB, коли одержувач профілі ігнорує. Розміри в пікселях не змінюються ніколи. Конвертується формат, а не розмір.
Перейменовані та анімовані файли
Формат читається з самих байтів файлу, тож AVIF, збережений кимось під іменем із розширенням .jpg, усе одно конвертується правильно. Анімований AVIF віддає перший кадр одним нерухомим зображенням, і результат про це прямо повідомляє. Анімований PNG ми не робимо: розгортати анімацію в сотні майже однакових кадрів це не те, чого чекає людина, яка конвертує один файл.
Що ви отримуєте
- Прозорий фон повністю, разом із частковою прозорістю та м'якими тінями
- Стиснення без втрат, тож кадрування й перезбереження потім нічого не коштують
- Той варіант, що менший, палітровий чи повнокольоровий, вирішується для кожного файлу окремо
- Власна палітра, коли вона вам потрібна, від 2 до 256 кольорів
- Фотографії правильно повернуті, широкий колірний охоплення збережено або переведено в sRGB на запит
- Ті самі розміри в пікселях, з яких ви почали, щоразу
Що далі?
Це звичайна фотографія без прозорості? AVIF у JPG дасть вам значно легший файл із тим самим зображенням.
PNG важчий, ніж ви очікували? Стиснути PNG зменшить його далі, не чіпаючи розмірів.
Повертаєте зображення на сайт? PNG у WebP зберігає прозорість і знімає вагу для браузера.