Посібник із формату

PNG чи WebP: який формат вибрати

Використовуйте WebP для зображень, які показуватиме браузер. Залишайте PNG для оригіналів і для всього, що має відкриватися будь-де. Цікаве тут те, наскільки WebP насправді менший і чим ви за це платите.

Виміряна різниця

Google, яка розробила формат, публікує такі дані: зображення WebP без втрат на 26% менші за PNG, а зображення WebP із втратами на 25–34% менші за порівнянні JPEG за однакової якості. Це середні значення для тестового набору, а не гарантія щодо вашого конкретного файлу, але вони формують правильні очікування.

Поруч

Порівняння PNG і WebP
Властивість PNG WebP
Режими стиснення Лише без втрат Без втрат і з втратами
Типовий розмір без втрат Базовий рівень Приблизно на 26% менший
Прозорість Так Так, в обох режимах
Вартість прозорості Включено Приблизно 22% додаткових байтів у режимі без втрат
Анімація APNG, часткова підтримка Так, широко підтримується
Відкривається в сучасних браузерах Усюди Усюди
Відкривається у старому програмному забезпеченні Усюди Іноді ні

Дані щодо розміру та прозорості взято з документації WebP від Google, де також сказано, що WebP із втратами з прозорістю зазвичай утричі менший за рівнозначний PNG.

Де виграє WebP

  • Зображення на вашій сторінці Кожен сучасний браузер показує WebP. Зменшення ваги зображення на чверть дає реальний приріст швидкості на мобільних з'єднаннях.
  • Прозора графіка з фотографічним вмістом Логотип поверх фотографічного тла є саме тим випадком, де WebP із втратами з альфа-каналом відривається від PNG найдалі.
  • Великі знімки екрана та інтерфейсу Суцільні кольори та чіткий текст добре стискаються у WebP без втрат, тож ви зберігаєте точні пікселі та позбавляєтеся зайвого обсягу.
  • Скрізь, де обмеженням є пропускна здатність Електронні розсилки, сайти документації та каталоги з великою кількістю зображень.

Де PNG досі доречний

Зберігайте PNG як оригінал. Конвертуйте копію для передачі. Одне це правило охоплює більшість випадків нижче.

  1. Файли, які ви ще редагуватимете Повторне збереження у форматі з втратами щоразу трохи погіршує зображення. Оригінал без втрат повністю знімає це питання.
  2. Друкарські і дизайнерські процеси Багато програм для верстки та додрукарської підготовки досі очікують PNG або TIFF. Передавши друкарні WebP, ви ризикуєте отримати небажаного листа.
  3. Усе, що має відкривати стара система Застарілі внутрішні інструменти, старі програми для перегляду документів і деякі форми завантаження відхиляють WebP одразу.
  4. Файли, які ви надсилаєте іншим людям Колега на старому комп'ютері може не відкрити його подвійним клацанням. Саме тому й використовують конвертер WebP у PNG.

WebP без втрат чи з втратами

WebP — це два формати під одним розширенням файлу. Режим без втрат зберігає кожен піксель точно. Режим із втратами відкидає деталі, які, на думку кодувальника, ви не помітите, і файл стає значно меншим.

Вибирайте режим без втрат для логотипів, схем, знімків екрана та всього з чіткими краями чи текстом. Вибирайте режим із втратами для фотографій і тла, яке ніхто не буде збільшувати. Текст у режимі з втратами набуває м'яких ореолів навколо літер, і саме цей артефакт помічають першим.

Конвертер Vaultaire пропонує обидва режими. У режимі без втрат він зчитує новий файл і блокує завантаження, якщо результат не є справжнім зображенням VP8L без втрат, пікселі якого збігаються. Значення альфа-каналу мають збігатися точно, з допуском щонайбільше 2 на попередньо помножений 8-бітний канал для частково прозорого кольору, оскільки вбудовані кодувальники браузера округлюють ці значення.

Що конвертація робить із метаданими

Конвертація також дає змогу позбутися того, що прикріплено до файлу. Конвертер не копіює початкових записів EXIF, ICC, тексту, часу чи C2PA у новий WebP, потім сканує готовий файл незалежним парсером і залишає завантаження заблокованим, якщо виявить будь-який із цих записів.

Це має значення, коли PNG є знімком екрана телефона, експортом із камери або генератора зображень. Якщо ви хочете побачити, що прикріплено до файлу, перш ніж приймати рішення, інспектор метаданих покаже це. Усе виконується в обробнику браузера, і файл ніколи не завантажується на сервер.

Практичні обмеження конвертера: один статичний PNG, до 20 MB, 4,096 пікселів по будь-якій стороні та 16,000,000 пікселів загалом. Анімований PNG відхиляється до декодування, а не мовчки експортується як перший кадр.

Часті питання про PNG і WebP

Чи WebP кращий за PNG?

Для зображень, які показуються у вебі, зазвичай так. За оцінками Google, WebP без втрат на 26% менший за PNG. PNG усе ще кращий, коли інструменту, друкарні або колезі потрібен формат, який підтримується всім уже десятиліттями.

Чи підтримує WebP прозорість?

Так, в обох режимах. Google оцінює альфа-канал у WebP без втрат приблизно у 22% додаткових байтів і каже, що WebP із втратами з прозорістю зазвичай утричі менший за рівнозначний PNG.

Чи втрачається якість під час конвертації PNG у WebP?

Не в режимі без втрат, який зберігає кожен піксель. Режим із втратами змінює пікселі навмисно. Конвертер зчитує готовий файл і блокує завантаження, якщо конвертація без втрат не створила справжнє зображення VP8L без втрат.

Коли варто залишити PNG?

Для оригіналів, які ви ще редагуватимете, для програм друку та дизайну, які його очікують, для всього, що має відкривати стара система, і для архівованих знімків екрана. Конвертуйте копію для передачі замість заміни оригіналу.

Чи шкодить WebP пошуковій оптимізації?

Ні. Менші зображення завантажуються швидше, а швидкість сторінки впливає на ранжування. Віддавайте формат, який приймає браузер відвідувача, і залиште альтернативний текст і назви файлів такими, якими вони були.

Чи можна пізніше конвертувати назад у PNG?

Так, і кодування PNG зберігає відтворені пікселі без втрат. Воно не може скасувати попередній прохід із втратами, тож WebP із втратами, конвертований назад у PNG, буде великим файлом із уже погіршеними пікселями.