Зображення роблять сайт привабливішим, але великі файли можуть збільшувати час завантаження сторінок. Це особливо помітно на мобільних пристроях або при повільному інтернет-з'єднанні.
Один зі способів оптимізувати графіку — використовувати формат WebP. У цій статті розберемося, що це за формат, як перетворити JPG і PNG у WebP та як не втратити більше якості, ніж потрібно.
Що таке WebP?
WebP — формат зображень, розроблений для ефективного зберігання графіки в інтернеті. Він підтримує стиснення з втратами та без втрат, а також прозорість.
Залежно від зображення, налаштувань і вихідного формату WebP може забезпечити менший розмір файлу, ніж JPG або PNG. Однак результат не завжди однаковий: складні фотографії, прості ілюстрації та зображення з прозорим фоном стискаються по-різному.
Навіщо конвертувати зображення у WebP?
Перетворення зображень може бути корисним у кількох ситуаціях:
Для сайтів і блогів. Менші файли можуть скоротити обсяг даних, які потрібно завантажити відвідувачу.
Для інтернет-магазинів. Оптимізація фотографій товарів допомагає зменшити вагу сторінок.
Для мобільних користувачів. Зображення меншого розміру потребують менше трафіку.
Для публікацій і портфоліо. Оптимізована графіка займає менше місця на диску.
Сам по собі формат WebP не гарантує швидкого сайту. На швидкість також впливають розміри зображень у пікселях, кешування, код сторінки та швидкість сервера.
Як конвертувати JPG або PNG у WebP
Крок 1. Виберіть зображення
Знайдіть файл, який потрібно оптимізувати. Це може бути фотографія JPG, ілюстрація PNG або інше підтримуване зображення.
Збережіть оригінал, якщо він може знадобитися для подальшого редагування.
Крок 2. Відкрийте конвертер зображень
Скористайтеся конвертером зображень KiwiLab, якщо потрібний формат доступний серед підтримуваних.
Виберіть файл на своєму пристрої та перевірте, чи правильно визначився його формат.
Крок 3. Виберіть WebP
Якщо конвертер підтримує WebP, встановіть цей формат як вихідний. За наявності налаштування якості почніть із середнього або високого значення, а потім порівняйте результат з оригіналом.
Для фотографій можна випробувати стиснення з втратами. Для графіки з прозорістю або чіткими межами варто перевірити, чи зберігаються потрібні деталі.
Крок 4. Завантажте результат
Збережіть конвертований файл і порівняйте його розмір з оригіналом.
Наприклад, якщо початкове зображення займало 800 КБ, а нове — 300 КБ, розмір файлу зменшився на 62,5%. Це лише приклад розрахунку, а не гарантований результат конвертації.
Крок 5. Перевірте якість
Збільште зображення та перевірте дрібні деталі, контури, текст і кольорові переходи. Якщо з'явилися помітні артефакти, повторіть конвертацію з вищою якістю.
Як зменшити розмір зображення ще більше
Формат — лише один зі способів оптимізації.
Зменшуйте роздільну здатність. Якщо зображення відображатиметься в блоці шириною 600 пікселів, оригінал завширшки 4000 пікселів може бути зайвим для цього сценарію.
Вибирайте формат за типом зображення. Для фотографій часто підходять WebP або JPEG. Для графіки з прозорістю можна використовувати PNG або WebP. Для логотипів та іконок також варто розглянути SVG, якщо він підходить для конкретного зображення.
Не стискайте багаторазово. Повторне збереження фотографії зі стисненням із втратами може погіршити її якість.
Перевіряйте мобільний вигляд. Не завантажуйте на телефоні повнорозмірну графіку, якщо сторінка може показувати оптимізовану версію відповідного розміру.
Чи завжди WebP кращий за JPG і PNG?
Ні. Вибір залежить від призначення зображення.
Тип зображенняЩо розглянутиФотографіяWebP або JPEGІлюстрація з прозорістюWebP або PNGЛоготип із чіткими лініямиSVG або відповідний растровий форматГрафіка для подальшого редагуванняЗберігайте оригінал у робочому форматіТакож враховуйте сумісність із програмами та системами, де плануєте використовувати файл.
Висновок
WebP може допомогти зменшити розмір зображень для сайтів без помітної втрати якості. Щоб отримати найкращий результат, вибирайте відповідний формат, перевіряйте параметри стиснення та порівнюйте готовий файл з оригіналом.
Інші корисні інструменти для роботи з файлами доступні в каталозі онлайн-інструментів KiwiLab.