Перетворіть непрозорий PNG на WebP і порівняйте результат

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

Прозорість тут потребує особливої ​​уваги. Хоча формат WebP може зберігати альфа-версію, цей інструмент наразі відтворює вихідні дані WebP на білому тлі. Тому прозорий вхід втратить цю прозору область під час експорту. Зберігайте PNG для логотипів, вирізів і накладень, які мають розташовуватися на різних фонах, і використовуйте це перетворення для зображень, де доречний непрозорий результат.

Попереднє налаштування зберігає розміри та починається з якості 90% із вимкненою різкістю. Спробуйте один файл із дрібним текстом, а інший – із фотографічним фоном. Огляньте тонкі межі, кольорові букви та плавні градієнти. Дизайн може виглядати добре з першого погляду, показуючи кольорові ореоли поруч із міткою, коли вона відображається в призначеному розмірі.

Якщо PNG , це скріншот інтерфейсу, читабельність може мати більше значення, ніж зменшення кількох байтів. Порівняйте експорт PNG або збережіть джерело, коли WebP пом’якшує важливі деталі. Для великої непрозорої фотографії перевірте відповідність за фактичні межі відображення перед подальшим зниженням якості. Спочатку зменште непотрібні пікселі, якщо веб-сайт їх ніколи не показує, але збережіть достатню роздільну здатність для запланованого розміщення.

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

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

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

Потім перегляньте дисплей мобільного телефону. Для великої маркетингової графіки може знадобитися простіший макет замість більш стисненої копії, коли її напис стає нерозбірливим на телефоні. Чуйний вибір зображень і зарезервовані розміри залишаються окремими завданнями веб-сайту. Коли зразок стане правильним, обробіть відповідні файли разом. Дані вашого зображення залишаються в браузері під час цього перетворення, а джерело PNG залишається незмінним.

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