Нотатки від команди про майстерність, формати та невеликі рішення, що стоять за добрим результатом.
Як WebP досягає менших розмірів, ніж PNG
WebP використовує два різні режими стиснення. Режим без втрат поєднує просторове й колірне передбачення з етапом ентропійного оброблення, досконалішим за DEFLATE у PNG, досягаючи ступеня стиснення приблизно на 26 відсотків кращого на типових зображеннях за опублікованим тестом Google. Режим із втратами застосовує блокове перетворення, схоже на відеостиснення, розраховане відкидати перцептивно несуттєву інформацію, зберігаючи те, що око справді бачить. Для зображень з альфа-каналом WebP застосовує окреме стиснення без втрат до даних альфи, а до даних RGB стиснення з втратами, і саме тому WebP із втратами та прозорістю може бути приблизно втричі меншим за PNG за рівноцінної візуальної якості. DEFLATE у PNG уміє лише без втрат і не може скористатися перцептивним компромісом, який розкриває режим із втратами. Різниця форматів і пояснює цей розрив.
Альфа-канал у деталях
І PNG, і WebP підтримують 8-бітну альфа-прозорість, тобто кожен піксель може зберігати значення непрозорості від 0 (цілком прозорий) до 255 (цілком непрозорий). Коли рушій зображень платформи відтворює PNG у WebP, він зчитує значення RGBA кожного пікселя й передає значення альфи прямо на етап стиснення WebP, де вони зберігаються стисненням без втрат, незалежно від того, як опрацьовуються дані RGB. У підсумку кожен прозорий піксель PNG за альфи 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, одна з найрезультативніших одиничних змін для вимірюваної продуктивності сторінки. Хронологія підтримки у браузерах робить це безпечним: Chrome додав WebP у 2011 році, Firefox у 2019, Safari у 2020, а Edge від переходу на Chromium.
Вивід із втратами та налаштування, близьке до без втрат
Запис WebP пропонує параметр якості від 0 до 100, де вищі значення зберігають більше деталі ціною більших файлів. Цей інструмент пише за фіксованого налаштування, близького до без втрат, узгодженого так, щоб урівноважити візуальну точність і розмір файлу для типових вебкатегорій фотографій, графіки інтерфейсу та іконок. За цього налаштування вивід перцептивно невідрізнний від вихідного PNG за звичайної відстані перегляду екрана. Строго кажучи, частина точності на рівні бітів втрачається порівняно зі справді записом без втрат, а отже побайтове порівняння між розкодованими пікселями WebP і вихідними пікселями PNG виявить дрібні числові розбіжності. Ці розбіжності лежать нижче порога людського сприйняття для фотографічного вмісту. Для медичної візуалізації, супутникової зйомки чи архівного цифрового зберігання, де точність без втрат, жорстка вимога, правильний шлях, тримати PNG і застосовувати WebP лише як експорт для доставки, а не як робочу копію.
Поведінка метаданих
Конвеєр для конвертації PNG у WebP вирізає метадані EXIF, IPTC та XMP з виводу. Це збігається з поведінкою, що спостерігається в усіх трьох основних браузерних рушіях. Колірні профілі ICC опрацьовуються непослідовно: Chrome і Safari зберігають тег профілю ICC 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, бо більшість друкарських RIP не працюють із WebP. Якщо картинку відправлять електронною поштою, безпечніший PNG, адже поштові клієнти сумнозвісні непослідовністю щодо сучасних форматів. А якщо картинка, це робочий файл, який редагують і перезаписують багато разів, тримайте PNG як майстер-копію. WebP за якості, близької до без втрат, чудовий формат доставки, а PNG лишається кращим для архівування й редагування. Чистий процес тримає PNG як оригінал і віддає WebP у веб.
