Заметки команды о мастерстве, форматах и небольших решениях, стоящих за хорошей круглой обрезкой.
Что позволяет AVIF давить PNG по размеру
AVIF едет на кодеке AV1, настроенном на то, что глаз принимает, а не на побайтовую точность. PNG опирается на DEFLATE поверх сырых пикселей, без потерь, но слеп к избыточности, которой полно в фотографическом содержимом. AVIF меняет эту избыточность на блочные трюки предсказания из видео-кодирования, роняя детали, которых зрительная система не фиксирует. Отдача крутая. То фото в 116 КБ становится около 16 КБ на качестве 85, а прозрачный PNG обычно падает на 30-50 процентов против сходного WebP. Фото высокого разрешения расширяют разрыв, а простая графика его сужает. Любой сайт, отгружающий прозрачную картинку современной публике, обращает это в более шустрые страницы и более лёгкий счёт за трафик.
Идём по альфа-каналу сквозь запись
PNG и AVIF оба держат прозрачность на отдельной альфа-плоскости рядом с цветом. Пока эта пара читает ваш PNG, чтение растаскивает цветовые пиксели и маску по разные стороны. Сторона AVIF затем кладёт свежую альфа-дорожку, свою собственную, опираясь на внутрикадровое кодирование AV1, чтобы стиснуть цвет и маску поровну на качестве 85. Прозрачность никогда не растворяется в цвете и никогда не получает заливку позади. Падающие тени, растушёванные ободки и полупрозрачные градиенты приходят все верно. Единственная цена в том, что AVIF жмёт альфа-плоскость с потерями тоже, что может оставить слабую бахрому на очень резких краях, когда вы сильно приближаете. На обычных размерах и качестве 85 она остаётся невидимой. Для крошечных пиксельно-точных иконок держитесь PNG.
Реалистичные тайминги на каждом движке
Сторона записи грузится раз за сеанс, примерно 800 миллисекунд на выборку и ещё 300 на раскрутку, так что открывающее преобразование носит около секунды прогрева. Каждый прогретый прогон его пропускает. Chrome на десктопе чистит 0,12 мегапикселя примерно за 40 миллисекунд, мегапиксель около 250, а восемь мегапикселей за 2,8 секунды. Firefox отстаёт, забирая примерно вчетверо больше, что может протолкнуть кадр в 4K за 30 секунд. Safari на WebKit ложится между ними и ближе к Chrome. Телефоны среднего класса идут в три-пять раз медленнее десктопного Chrome по всему фронту. Если крупные файлы это рутина, сеанс десктопного Chrome это самое быстрое кресло в доме.
Случаи, когда PNG должен остаться 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 на удалённое оборудование и затем держит результат по правилам хранения, которых придерживается тот оператор, часто оставленным расплывчатыми. Araluma ясно говорит, как он работает. Поскольку AVIF тяжёл, ради самого чистого результата конвертация идёт на нашем сервере, а кодировщик в браузере включается сам, когда сервер недосягаем. Когда ваш файл доходит до нас, он кодируется и затем очищается примерно за 2 часа, без запроса аккаунта и без применения сверх начатой вами конвертации. Ничего не хранится долго и ничего не передаётся. Тому, кто ведёт клиентскую работу, неопубликованные съёмки продукта или пользовательский контент, честная форма обмена такова: файл может пройти через наш сервер, к нему прикасаются только ради сборки вашего AVIF, и он не задерживается.