Заметки команды о мастерстве, форматах и небольших решениях, стоящих за хорошим результатом.
Почему AVIF так решительно обходит PNG по размеру файла
AVIF построен на кодеке современного формата, рассчитанном на перцептивную эффективность, а не на сохранение без потерь. PNG применяет DEFLATE к сырым пиксельным данным, что без потерь, но оставляет огромную избыточность в фотографическом содержимом нетронутой. AVIF заменяет эту избыточность блочным предсказанием, заимствованным из видео, отбрасывая информацию, которую зрительная система человека не замечает. Итог разительный. Фото в 116 КБ превращается примерно в 16 КБ в AVIF на качестве 85, а прозрачный PNG обычно ужимается на 30-50 процентов против равнозначного WebP. Разрыв растёт на фотографиях высокого разрешения и сужается на простой графике. Для любого сайта, отдающего прозрачные изображения современной аудитории, экономия трафика напрямую превращается в более быструю загрузку и меньшую плату за исходящий трафик.
История альфа-канала в подробностях
И PNG, и AVIF хранят прозрачность в отдельной альфа-плоскости рядом с цветовыми данными. Когда эта пара обрабатывает ваш PNG, чтение извлекает цветовые пиксели и альфа-маску независимо друг от друга. Сторона AVIF затем пишет новый файл со своей собственной альфа-дорожкой, применяя внутрикадровое современная компрессия для сжатия обеих плоскостей на качестве 85. Альфа не запекается в цвет и не заменяется фоновой заливкой. Мягкие тени, растушёванные края и частично прозрачные градиенты передаются достоверно. Единственная деградация, которую добавляет AVIF, это сжатие с потерями самой альфа-плоскости, что может создать едва различимую кайму вокруг очень жёстких краёв при крайнем увеличении. При обычных размерах показа и на качестве 85 разница не видна. Для пиксельно точной работы с иконками крошечного размера держите PNG.
Скорость преобразования на практике, браузер за браузером
Сторона AVIF загружается один раз за сеанс браузера, около 800 миллисекунд на запрос плюс 300 на инициализацию, так что первое преобразование несёт примерно секунду прогрева. Прогретые преобразования пропускают это целиком. В Chrome на десктопе 0,12 мегапикселя занимает около 40 миллисекунд, 1 мегапиксель около 250 миллисекунд, а 8 мегапикселей примерно 2,8 секунды. Firefox исключение, выполняя ту же работу примерно вчетверо медленнее, так что фото в 4K может занять там 30 секунд или больше. WebKit в Safari располагается между ними, ближе к Chrome. На среднем мобильном железе числа идут в три-пять раз хуже, чем у Chrome на десктопе. Если вы конвертируете крупные файлы часто, Chrome на десктопе или ноутбуке даёт лучшую пропускную способность.
Когда оставить PNG вместо преобразования
PNG остаётся верным выбором в нескольких случаях, даже когда размер файла важен. Во-первых, графика с резким текстом в малых размерах, вроде подписей, значков или иконок масштаба favicon, может показать в AVIF артефакты, неприемлемые на типичных дистанциях просмотра. Во-вторых, эталонные файлы, используемые для дальнейшего редактирования, должны оставаться PNG, поскольку каждый проход через формат с потерями накапливает потерю качества. В-третьих, среды, отвергающие AVIF, включая некоторые редакторы документов, старые дизайнерские инструменты и почтовые клиенты, требуют PNG для совместимости. Наконец, анимация за пределами первого кадра не сохраняется, поскольку эта пара обрабатывает один кадр. Для всего остального, прозрачных фотографий и графических ресурсов, идущих в современную веб-доставку, PNG в AVIF это верный размен.
Core Web Vitals и аргумент трафика
Largest Contentful Paint, главная метрика загрузки, напрямую зависит от размера самого большого изображения на странице. Уменьшение этого изображения со 116 КБ до 16 КБ, как измерено на фото в 4K при разработке, срезает время передачи на соединении 10 Мбит/с примерно с 93 миллисекунд до примерно 13 для одного этого элемента. Помножьте это на товарную сетку, карусель героя или интерфейс, набитый прозрачными иконками, и накопленная экономия толкает LCP заметно ниже порога в 2,5 секунды, который Google считает хорошим. Принятие AVIF ускорилось именно потому, что аргумент можно изложить в твёрдых числах. При охвате около 94,3 процента браузеров случай отката достаточно мал, чтобы выигрыш трафика перевешивал лишнюю разметку элемента picture.
Чем это отличается от обычного онлайн-конвертера
Большинство онлайн-конвертеров AVIF загружают ваш PNG на машины, которые вы не контролируете, обрабатывают его там и хранят по политике хранения, заданной этим провайдером, часто расплывчатой. RoundCut прямо говорит о своём процессе. Поскольку AVIF тяжёлый, конвертация идёт на нашем сервере ради лучшего результата, а кодировщик в браузере служит автоматическим запасным вариантом, когда сервер недоступен. Когда ваш файл отправляется нам, он конвертируется и затем удаляется примерно за 2 часа, без аккаунта и без какого-либо применения сверх запрошенной конвертации. Нет постоянного хранения и нет передачи вашего изображения. Для тех, кто работает с документами клиентов, собственной предметной съёмкой или пользовательским контентом, честная версия сделки такова: файл может пройти через наш сервер, он обрабатывается только ради создания вашего AVIF и там не остаётся.