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