Нотатки від команди про майстерність, формати та невеликі рішення, що стоять за гарною круглою обрізкою.
Як WebP досягає менших розмірів, ніж PNG
WebP біжить у двох окремих режимах. Його режим без втрат зводить просторове й колірне передбачення з етапом ентропії, що перевершує DEFLATE у PNG, приземляючись на стисненні приблизно на 26 відсотків кращому на типових картинках за опублікованими цифрами Google. Його режим із втратами позичає блокове перетворення зі світу відео, зроблене відпускати деталь, що око ледь помічає, тримаючи те, що воно тримає. Коли картинка несе альфу, WebP стискає цю альфу без втрат на її власній доріжці, а дані RGB трактує з втратами, і так WebP із втратами та прозорістю може дійти близько третини розміру PNG за якості візуально до пари. DEFLATE у PNG знає лише без втрат і ніколи не може торкнутися перцептивної угоди, яку укладає доріжка з втратами. Цей структурний поділ, уся причина різниці в розмірі.
Альфа-канал у деталях
Обидва формати зберігають прозорість у 8 бітах, тобто кожна точка картинки може нести градацію непрозорості, що йде від 0, цілком наскрізної, до 255, повністю наповненої. У відбудові, яку робить рушій зображень платформи, значення RGBA зчитуються точка за точкою, а частка прозорості іде своєю смугою, стиснута без втрат, не залежачи від поводження з кольором. Так наскрізна точка в 0, напівпрозора десь між 1 і 254 та непрозора в 255 знову з'являються у WebP рівно в тій самій градації, у якій були. Та м'яка кромка відкинутої тіні чи тексту зі згладжуванням на наскрізному тлі доходить до іншого боку без шорсткості. Саме цього JPG не дає, адже його формат просто не відводить місця під прозорість і мусить усадити фігуру на колір, перш ніж закрити файл.
Core Web Vitals і вибір формату зображення
Largest Contentful Paint відмірює, скільки найбільший видимий елемент сторінки бере, щоб виринути в області перегляду, а на більшості контентних сторінок цей елемент, головна картинка. Google складає LCP усередину свого сигналу ранжування Core Web Vitals, а PNG, рецидивіст за LCP із чистої ваги, де фотографічний PNG у 4K може бігти на кілька мегабайтів, тоді як та сама картинка як майже без втрат WebP, частка цього. PageSpeed Insights називає це прямо у своєму пункті про формати нового покоління й указує на PNG як формат на заміну. Обернення PNG, що сидять на критичному шляху відмалювання сторінки, у WebP, серед найоплатніших одиничних ходів для вимірюваної швидкості. Хронологія підтримки тримає це безпечним, із WebP у Chrome від 2011, у Firefox від 2019, у Safari від 2020 і в Edge від часів його пересбирання на Chromium.
Вивід із втратами та налаштування, близьке до без втрат
WebP виставляє ручку якості від 0 до 100, де вищі числа тримають більше деталі й коштують більше байтів. Araluma закріплює цю ручку в майже без втрат точці, обраній урівноважити вірність проти розміру по звичайних вебкатегоріях, фотографіях, графіці інтерфейсу та іконках. У цій точці вивід читається як невідрізнний від вихідного PNG на нормальних дистанціях екрана. Строго, дрібка точності на рівні бітів зісковзує проти істинно без втрат запису, тож побайтова перевірка між розкодованим WebP і вихідним PNG розкрила б крихітні числові шпарини, усі що сидять нижче порога людського зору на фотографічному матеріалі. Для медичних знімків, супутникової зйомки чи архівного зберігання, де без втрат, жорстке правило, правильний хід, тримати PNG і трактувати WebP суто як експорт для доставки, а не робочу копію.
Поведінка метаданих
Обернення PNG у WebP змітає поля EXIF, IPTC та XMP геть із виводу, що й робить кожен із трьох великих браузерних рушіїв. Колірні профілі, там, де рушії розходяться. Chrome і Safari тримають мітку sRGB, що їде на WebP, тоді як Firefox вичищає все, профіль ICC і решту. Так WebP читається як безпечний у sRGB усюди, але мітка широкого охоплення, Display-P3, Adobe RGB, ProPhoto RGB, що сидить на вихідному PNG, не протримається крізь Firefox. Ця шпарина кусає у професійній роботі з критичним кольором, тож коли справжній вірності кольору треба їхати разом, беріть конвертер, що пише дані ICC навмисно, або притисніть мітку профілю назад опісля спеціальним редактором метаданих.
Коли лишити PNG, а коли WebP достатньо
Думайте через призначення картинки. Якщо вона завершує на сторінці чи застосунку, відкритому в будь-якому браузері від 2020 року й далі, експорт у WebP, природний шлях. Потрапить усередину редактора на кшталт Figma, Sketch чи Affinity Designer? Тоді спершу перевірте, чи та конкретна версія відкриває WebP, бо підтримка хитається від програми до програми. Призначення друкарні просить обережності, там PNG або TIFF зазвичай і є замовленням, адже чимала частина друкарських процесорів не перетравлює WebP. Відправка поштою теж хилить шальку до PNG, за тієї нерівності, з якою поштові клієнти зустрічають свіжі формати. А для будь-якої речі, що входить у цикли правки й перезапису, місце PNG, біля вцілілої матриці. На балансі WebP сяє як формат доставки майже без втрат, а PNG далі панує як файл роботи й зберігання, і ідеальний потік береже вихідний PNG і відправляє WebP у веб.
