Qu; є WebP і як використовувати цей формат d; зображення в Wordpress - Zen Devs
Оскільки зображення зазвичай складають 50% ваги середньої веб-сторінки, все, що ви можете зробити для оптимізації ваших зображень, не тільки заощадить місце на сервері, але й швидше обслуговуватиме ваші сторінки.
На щастя, за допомогою формату зображення WebP ви можете створювати менші, насиченіші зображення, які в середньому на 26% легше, ніж PNG, і на 25-34% менше порівняно з JPEG - при цьому зберігаючи незмінну якість.
У цій статті ми розглянемо, що таке WebP і як використовувати цей формат зображень на вашому сайті WordPress, щоб різко зменшити розмір ваших зображень.
Що таке WebP ?
WebP - це формат файлу зображень, створений веб-командою Google, розроблений для заміни форматів JPEG, PNG та GIF, підтримуючи стиснення, прозорість та анімацію.
Вперше він був оголошений у вересні 2010 року як новий відкритий стандарт стиснених кольорових зображень в Інтернеті, що створює менші розміри файлів та якість, порівнянну за якістю з JPEG.
Підтримка прозорих зображень без втрат була оголошена в 2012 році, що робить WebP альтернативою формату PNG.
Стиснення з втратами WebP використовує прогностичне кодування для кодування кадру - той самий метод, який використовує відеокодек VP8 для стиснення ключових кадрів у відео. Прогнозне кодування працює, використовуючи значення сусідніх піксельних блоків для прогнозування значення блоку, тоді кодує лише різницю.
Стиснення без втрат WebP використовує раніше побачені фрагменти зображення для реконструкції нових пікселів і може використовувати локальну палітру, якщо збіг не знайдено.
Як ви можете бачити на прикладах нижче з галереї WebP Google, немає помітної різниці в якості між зображеннями JPEG ліворуч та версіями WebP праворуч. Якщо ви не перевірите розмір файлу, ви не бачите, що зображення WebP на 30% менше, ніж зображення JPEG.
Але, як я вже говорив тут, коли справа стосується ваги сторінки, розмір має значення. Зрештою, чим менший розмір файлу веб-сторінки, тим швидше вона завантажиться. Це так просто 😉
Отже, зменшуючи розмір файлу ваших зображень із використанням такого формату, як WebP, у поєднанні з іншими методами, такими як використання функції ледачого завантаження, ви можете обслуговувати зображення, розмір яких менший і гарантує, що ваші сторінки швидше доставляються відвідувачам вашого сайту.
Підтримка формату WebP у браузерах
Вам може бути цікаво, оскільки WebP існує вже вісім років, чому він не популярніший? Чому ми все ще використовуємо JPEG та PNG, коли WebP може створювати менші файли порівнянної якості ?
Ну, як і багато веб-технологій, які намагаються знайти ноги, не всі сучасні браузери підтримують WebP. Відповідно до Чи можу я використовувати…, браузери, які підтримують WebP, включають Chrome, Opera, Opera, Opera Mini, браузер Android та Chrome для Android.
Microsoft оголосила про підтримку WebP у своєму браузері Edge у жовтні минулого року, а Mozilla зробила подібне оголошення незабаром для Firefox. Зараз це просто Safari від Apple, який відстає без сумісності.
Вперше проявивши інтерес до підтримки формату зображення, коли він додав підтримку WebP в iOS 10 та MacOS Sierra, пізніше Apple замінила його на HEIF, формат зображення, заснований на стандарті стиснення відео HEVC (також відомий як H.265 та MPEG-H Частина 2 ).
Незважаючи на те, що останнім часом не було жодних вказівок на те, що Apple буде підтримувати WebP у майбутньому, компанія насправді не має вибору зараз, як усі інші основні браузери та програмне забезпечення для редагування зображень.
Використання WebP - з JPEG/PNG як резервного рішення
Те, що Apple не підтримує WebP, не означає, що ви не повинні використовувати цей формат. Можна надавати файли WebP відвідувачам, які використовують підтримувані браузери, переглядаючи файли JPEG та PNG як резервну копію для користувачів Safari.
Таким чином, замість того, щоб доставляти WebP всім користувачам і ризикувати, щоб користувачі Safari бачили зламані зображення, ви можете переконатися, що всі відвідувачі вашого сайту бачать ваші зображення - тоді як користувачі з підтримуваними браузерами отримують швидший досвід.
Але перед тим, як вирішити, використовувати WebP на своєму сайті чи ні, слід пам’ятати декілька речей.
Перш за все, знайте, що Chrome - найпопулярніший браузер із часткою ринку близько 64%. Тому дуже ймовірно, що більшість відвідувачів вашого сайту зможуть переглянути всі зображення WebP на вашому сайті.
А також чудова ідея перевірити свою Google Analytics, щоб побачити, якими браузерами користуються ваші відвідувачі, щоб знати, чи використовувати цей метод, або просто переглядати WebP без будь-яких відмов.
Як використовувати WebP з WordPress
Ось ще одна перешкода для використання WebP: WordPress його не підтримує.
Хоча WordPress підтримує найпопулярніші формати файлів зображень, включаючи JPEG, PNG, GIF та ICO, він ще не додав WebP до цього списку. Це означає, що ви не можете просто завантажити файл WebP у свою медіатеку WordPress, оскільки ви отримаєте таку помилку безпеки:
Не хвилюйтеся, ви все ще можете використовувати формат WebP на своєму сайті WordPress - просто використовуйте плагін.
Наприклад, за допомогою безкоштовного плагіна WebP Express ви можете подавати автоматично створені зображення WebP браузерам, що підтримують WebP, зберігаючи при цьому зображення JPEG/PNG для користувачів Safari. Цей параметр працює на всіх зображеннях на вашому сайті, включаючи зображення в медіатеці, галереях та темах.
Сайт-прискорювач Jetpack (раніше відомий як Photon) також автоматично перетворює JPEG та PNG у формат зображення WebP.
Крім того, ви також можете використовувати свій CDN. Користувачі Cloudflare на платних тарифах можуть отримати доступ до польської функції CDN, яка пропонує автоматичне перетворення WebP. Як і інші рішення, про які я згадав вище, польська працює, замінюючи зображення JPEG та PNG сторінки на версії WebP для браузерів, які підтримують цей тип файлів.
Для користувачів WP Rocket ви будете раді почути, що підтримка WebP є в основу майбутнього випуску WP Rocket 3.3.
Підтримка WebP також є частиною дорожньої карти для плагіна Imagify для оптимізації зображень.
Порівняння JPG/PNG проти WebP
Команда веб-ефективності Google обіцяє зображення WebP без втрат, які на 26% менше, ніж зображення PNG, і зображення WebP із втратами на 25-34% менше, ніж зображення JPEG. Тому я провів кілька порівняльних тестів, щоб побачити різницю в розмірах, яку ми могли б отримати за допомогою WebP.
Порівняння JPEG та WebP
Я завантажую шість випадкових зображень JPEG з Unsplash, стискаю їх (із середньою оптимізацією 90% за допомогою OptimiZilla), щоб побачити, яку економію я можу отримати, а потім конвертую оригінальні зображення у WebP для порівняння.
| Прізвище | Оригінальний jpeg | Стиснений JPEG | WebP | Різниця |
| Image1.jpg | 1,6 МБ | 1,5 МБ | 590.5 kb | 60% |
| Image2.jpg | 5,4 МБ | 4,7 МБ | 2,0 МБ | 57% |
| Image3.jpg | 6,6 МБ | 5,8 МБ | 2,3 МБ | 60% |
| Image4.jpg | 4,0 МБ | 3,7 МБ | 820.9 kb | 78% |
| Image5.jpg | 2,5 МБ | 2,3 МБ | 1,1 кб | 52% |
| Image6.jpg | 1,4 МБ | 1,3 МБ | 419,9 КБ | 68% |
Перетворення на WebP призвело до середнього зменшення розміру зображення на 50%. З іншого боку, можна збільшити оптимізацію JPEG. Наприклад, я проходжу OptimiZilla, яка автоматично вибирає ступінь стиснення для зображень і яка вже робить чудеса для оптимізації ваги, не змінюючи занадто багато фото !
Ось чому я був дуже здивований, побачивши різницю в розмірі між версіями JPEG та WebP image4 (але суцільний фон багато в чому пояснює цю різницю в розмірі. Нижче ви можете побачити обидві паралельні версії. Зображення JPEG зліва трохи гостріше, ніж зображення WebP праворуч.
Порівняння PNG та WebP
Знову ж таки, я вибрав навмання шість зображень, цього разу PNG-файли з freepngs.com. Я стиснув їх, а потім перетворив оригінальні зображення на WebP, щоб порівняти їх.
| Прізвище | Оригінальний PNG | Стиснений PNG | WebP | Різниця |
| Image1.png | 428,3 КБ | 127.4 kb | 53,91 КБ | 58% |
| Image2.png | 569,6 | 149 кб | 73,24 КБ | 51% |
| Image3.png | 1,3 МБ | 328,9 кб | 109.51 kb | 68% |
| Image4.png | 415,5 кб | 112,4 кб | 94,57 кб | 16% |
| Image5.png | 1,2 МБ | 482,7 КБ | 235,68 kb | 51% |
| Image6.png | 2,0 МБ | 491 кб | 164,01 kb | 66% |
Найбільші відмінності у розмірах файлів були у детальних зображеннях квітучої рослини з листям та фотографії Анджеліни Джолі (: p) (image3.png та image6.png відповідно), тоді як менша різниця стосувалася 2 гітар з дуже кілька кольорів (picture4.png).
Загалом перетворення PNG на WebP призвело до зменшення розміру файлу в середньому на 52%.
Висновок
Формат файлу WebP продовжує набирати популярності та підтримки, і від цього формату файлу можна багато чого отримати. Він не тільки може замінити формати файлів JPEG та PNG (і GIF!) На стиснення з втратами або без втрат, але також пропонує значно менші розміри файлів.
Насправді не існує іншого формату зображення або інструменту оптимізації зображень для Інтернету, який може досягти менших розмірів файлів без помітної втрати якості, як це може WebP.
Сподіваємось, ми побачимо, що WordPress - і Apple - в майбутньому запровадять підтримку WebP. До цього часу я закликаю вас поекспериментувати з цим форматом файлу та ознайомитися з іншими інструментами, які можуть допомогти вам розміщувати зображення WebP на вашому сайті WordPress.
Повний веб-розробник стека протягом 15 років у веб-агентстві на півдні Франції та Geek, оскільки завжди навчання та обмін є невід’ємною частиною моєї філософії, а також особистого розвитку та буддистської мудрості.