Ваш сайт можна зробити швидшим і легшим, лише змінивши формат зображень на ньому. Причому навіть без додаткової компресії та втрати якості. Для цього треба ознайомитися з форматом WebP і конвертувати в нього всі картинки на сторінці. Але давайте про все по порядку.
Короткий опис WebP
WebP – це формат файлу, розроблений компанією Google у 2010 році. Його особливістю є просунутий алгоритм стиснення, що дає змогу скоротити розмір картинки без видимих втрат у якості.
Так, інші формати теж підтримують стиснення, але технології, що стоять в основі WebP, куди прогресивніші. І якщо порівнювати WebP з конкурентами у співвідношенні ступеня стиснення до якості картинки, то розробка Google здобуде впевнену перемогу.
У середньому вага картинок скорочується на 25-35%, що дає змогу вебмайстрам розміщувати на сайтах більше зображень, не витрачаючи даремно дорогоцінний простір на жорсткому диску орендованого VDS.
Під час розроблення формату співробітники Google використовували ті самі методики стиснення, що використовуються в компресії кодеків VP8.
Переваги WebP над іншими форматами
Природно, основна перевага – це розмір. Скорочення розміру позитивно впливає відразу на чотири аспекти роботи в інтернеті:
- Сайти зі стиснутими WebP-картинками працюють швидше. Йде менше часу на обробку невеликих файлів. Навіть якщо в статті буде під сотню зображень, компресія врятує від надто довгих завантажень.
- Завантажуючи на VDS маленькі зображення, можна заощадити на просторі жорсткого диска.
- Користувачі витрачатимуть менше мобільного трафіку під час відвідування сайту зі смартфона.
- Виділений інтернет-канал до сервера буде завантажений набагато менше, якщо переданий медіаконтент менше важить. Ще один плюс до продуктивності.
Але говорити про переваги WebP простіше в порівнянні з іншими форматами.
WebP проти JPEG
JPEG – формат, що чудово підходить для зображень з великою кількістю кольорів. Він мало важить і має прийнятну якість, через що здобув таку велику популярність серед користувачів.
Головний недолік JPEG – помітна втрата в якості та деталізації через недостатньо продумані алгоритми стиснення. Це особливо помітно під час наближення або коли у картинки спочатку не надто висока роздільна здатність.
У WebP якість картинки практично не втрачається. Якщо ознайомитися з галереєю Google, то стане зрозуміло, що відрізнити їхній формат від високоякісних JPEG практично неможливо. Це видно тільки за розміром файлів.
WebP проти PNG
PNG – формат, що став золотим стандартом і зумів зберегти ідеальний баланс між якістю і вагою. Він підходить для зображень з логотипами або невеликим текстом. Там, де потрібна висока деталізація.
Але йдеться про графіку. З фотознімками PNG справляється гірше за більш вузькоспеціалізовані розширення. До того ж PNG помітно важчий за той же JPEG навіть після компресії (хоч і зберігає високу якість).
WebP за деталізацією і передачею кольору на одному рівні з PNG. Різницю важко помітити навіть при порівнянні лоб в лоб. Він добре відображає як графіку, так і фотографії. При цьому розмір часто нижчий, ніж у PNG, на 30%.
Недоліки WebP
Підтримка цього формату серед браузерів і веб-додатків поступово зростає. Зараз із WebP не виникає проблем ні в Google Chrome, ні навіть у Safari. Але залишилися сайти і програми, які все ще не знайомі з цим розширенням картинок. Підтримка в браузері Apple з’явилася не так давно, а в Internet Explorer не з’явиться ніколи.
Проблема не тільки в браузерах, а й в інших програмних рішеннях. Наприклад, у WordPress немає нативної підтримки WebP, а це, між іншим, найпопулярніша CMS у світі. І таких ресурсів усе ще багато.
А ще WebP-файли часто нічим відкривати на комп’ютері. Тому деякі користувачі Windows і Linux обурюються, коли намагаються завантажити картинку через Google Chrome, а отримують файл із невиразним розширенням, який не можна відкрити.
Як відкрити WebP-файл
Якщо ви зіткнулися з тим, що у вашій ОС немає програми для роботи з WebP, то вам допоможе підтримуваний браузер. Алгоритм дій:
- Відкриваємо картинку у форматі WebP на будь-якому сайті, де нам вдалося її розшукати.
- Клікаємо по ній правою кнопкою миші і зберігаємо на жорсткий диск у форматі WebP.
- Потім клікаємо правою кнопкою миші по картинці вже на жорсткому диску.
- У контекстному меню системи шукаємо пункт “Відкрити за допомогою…” і вибираємо в ньому браузер Google Chrome або Firefox.
У Linux можна відкривати WebP-файли за допомогою редактора зображень GIMP. У macOS цей формат підтримується за замовчуванням у додатку “Перегляд”, у ньому ж картинку можна відредагувати і конвертувати.
Зберігаємо WebP як JPEG (або конвертуємо в інший відповідний формат)
Інструкція для тих, хто не бажає возитися з WebP і хоче змінити формат зображення на більш звичний.
Є кілька методів перетворення WebP на умовний PNG або JPEG засобами Windows. Через браузер, через Microsoft Paint і через спеціалізований декодер і команду в терміналі Windows (раптово).
- Можна скопіювати посилання на сайт із зображенням у новому форматі та вставити його в Internet Explorer. Він не підтримує новинку і тому завантажить картинку в іншому розширенні.
- Або скопіювати зображення прямо з веб-сторінки і вставити його в редактор зображень Microsoft Paint. А вже перебуваючи в ньому, одночасно натиснути клавіші Ctrl + Shift + S, щоб зберегти картинку на жорсткому диску і вказати розширення (JPEG, TIFF тощо).
- Або використовувати команду у форматі C:\Путь до файлу dwebp.exe назва файлу.WebP – o назва файлу.png. За замовчуванням декодер лежить у папці “Изображения”, відповідно, у команді треба вказати шлях до неї.
Конвертуємо PNG у WebP
Інструкція для тих, хто хоче стати частиною нової тенденції і перейти на WebP уже зараз.
У мережі вже вистачає онлайн-конвертерів, що змінюють формат зображення на будь-який за бажанням користувача. До того ж для зміни розширення підходять і методики, описані в попередньому блоці, хіба що дії виконуються у зворотному напрямку.
Ми розглянемо більш практичні способи з точки зору постійної роботи з веб-контентом. Тобто інструменти, що використовуються вебмайстрами в повсякденній роботі під час публікації сайтів і нових матеріалів на них.
Через плагін для Фотошопа
Беремо дітище Adobe як найпопулярніший редактор серед дизайнерів веб-інтерфейсів і основної маси контентників.
Спочатку завантажуємо плагін WebP Photoshop Plugin з офіційного сайту розробників. Після цього встановлюємо і перезапускаємо редактор. Під час повторного запуску в ньому з’явиться новий формат для експорту. Відкриваємо зображення у форматі JPG, PNG тощо, потім відкриваємо меню File і вибираємо пункт Save As… У спливлому віконці вказуємо розширення WebP або WebP Lossless. Другий варіант передбачає трохи інший тип стиснення, що зберігає всі деталі зображення.
З’явиться інтерфейс програми, що пропонує вибрати рівень якості, ступінь чіткості і навіть рівень зниження шумів.
Через node.js
Підійде тим, кому треба пачками конвертувати різного роду зображення в WebP, витрачаючи на це мінімум сил. Природно, потрібно хоча б приблизно розуміти, що таке node.js і встановити її до себе на комп’ютер з Linux.
Уявімо, що node.js уже встановлено і працює. Повертаємося до конвертера. Будемо використовувати плагін imagemin і відповідний скрипт на його базі, щоб автоматизувати процес конвертації.
Щоб встановити imagemin, введемо в командний рядок:
npm install imagemin imagemin-webp
Потім створюємо скрипт у форматі JavaScript з наступними вступними даними і запустимо його в node.js:
var imagemin = require(“imagemin”),
webp = require(“imagemin-webp”),
outputFolder = “./img”, // Папка під WebP
PNGImages = “./img/*.png”, // Назва картинки в PNG
JPEGImages = “./img/*.jpg”; // Назва картинки в JPEG
imagemin([PNGImages], outputFolder, {
plugins: [webp({
lossless: true // Losslessly encode images
})]
});
imagemin([JPEGImages], outputFolder, {
plugins: [webp({
quality: 65 // Налаштування якості від 0 до 100
})]
});
За замовчуванням у змінних outputFolder, PNGImages і JPEGImages вказані значення img, але їх можна замінити на інші. У назвах зображень зовсім можна залишити зірочку, щоб скрипт конвертував усі зображення з розширеннями JPEG і PNG, що зможе виявити в папці.
Через плагін для WordPress
Якщо працюєте в CMS WordPress, можна не виганяти node.js, а встановити плагін WebP Express. Він використовує бібліотеку WebP Convert Library для конвертації зображень із розширеннями PNG і JPEG у формат компанії Google.
Але він не просто замінює одне розширення іншим, а додає ще один файл для браузерів, які підтримують цей стандарт. Альтернативные форматы никуда не исчезают и продолжают отображаться в неподдерживаемых браузерах.
А еще есть плагины для сжатия изображений в WordPress, которые создают WebP-копии загружаемых картинок и распространяют их по CDN. Они также ужимают другие форматы, минимизируя потери в качестве.
Подключаем WebP к HTML- и CSS-файлам
В случае с плагинами и CMS все понятно. Там есть графические интерфейсы для загрузки изображений. С кодом тоже нет сложностей. WebP можно встраивать в HTML-разметку как «обычные» изображения – через тег <img> Правда, только для поддерживаемых браузеров.
У випадку з непідтримуваними доведеться додати в розмітку елемент і всередині нього прописати додаткові джерела зображень з усіма розширеннями. Це робиться через тег <source srcset=”посилання на картинку” type=”image/формат картинки”>. У CSS WebP додається через параметр background-image: url (посилання на картинку з потрібним розширенням).
На цьому все. Як бачите, у форматі WebP немає нічого страшного. Звичайні картинки, просто не скрізь підтримуються. Звідси і деякі складнощі в роботі, але зовсім скоро ця проблема зникне і WebP остаточно стане веб-стандартом.
