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 сохраняет прозрачность и снимает вес для браузера.