Нотатки від команди про майстерність, формати та невеликі рішення, що стоять за добрим результатом.
Чому 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, і він там не залишається.