Якщо ви хочете прискорити свій сайт WordPress, зменшення розміру зображень забезпечить більшу віддачу від інвестицій.
У середньому зображення становлять близько половини розміру файлу веб-сторінки, тому навіть невеликі покращення можуть дати вагомі результати.
WebP – це сучасний формат зображень, який зменшує розмір зображень без зміни їхнього вигляду. У середньому перетворення зображення в WebP може зменшити його розмір на 25-35% без помітної втрати якості.
Що таке WebP
WebP – це графічний формат, розроблений Google. Ми знаємо формати зображень, такі як JPEG або JPG та PNG, а WebP – альтернативний формат файлів для зображень.
WebP орієнтований на надання одного і того ж файлу зображення, тільки з меншим розміром файлу. Зменшуючи розмір ваших графічних файлів, ви все одно зможете надавати відвідувачам вашого сайту таку можливість, але ваш сайт буде завантажуватися швидше.
Якщо ви запускаєте свій сайт за допомогою PageSpeed Insights, одна з багатьох рекомендацій – обслуговувати зображення у форматах наступного покоління, таких як WebP:
То як формат Google WebP дозволяє досягти такого зменшення розміру файлу?
WebP підтримує стиск із втратами і без втрат, тому точне скорочення залежатиме від того, чи використовуєте ви стиск із втратами або без втрат
При стисненні втрат WebP для зменшення розміру файлу використовує так зване «інтелектуальне кодування». Інтелектуальне кодування використовує значення сусідніх пікселів у зображенні для прогнозування значень, а потім кодує лише різницю. Він базується на кодуванні ключових кадрів VP8.
Без втрат WebP використовує набагато складніший набір методів, розроблених командою WebP.
Які веб-браузери підтримують WebP
Щоб зображення WebP працювали, їх має підтримувати веб-браузер відвідувача. Хоча підтримка браузерів значно зросла, сумісність з WebP все ще не універсальна.
Зображення WebP підтримуються популярними браузерами, такими як:
- Chrome (настільний та мобільний).
- Firefox (настільний та мобільний).
- Edge.
- Опера (настільний та мобільний).
Тим не менш, помітною перешкодою є Safari. На момент написання цієї статті ні настільна, ні мобільна версія Safari не підтримують зображення WebP. Apple коротко експериментувала з підтримкою WebP для Safari у 2016 році, але з того часу подальших дій не було.
В Internet Explorer також немає підтримки WebP, але Edge підтримує WebP, тому що він заснований на Chromium.
В цілому близько 77% інтернет-користувачів використовують браузер, який підтримує WebP. Хоча користуються підтримкою більшості, але ці 23% дуже великі, щоб їх ігнорувати. Нижче ми покажемо, як впоратися з цим, щоб у всіх відвідувачів були однакові можливості:
Порівняння розмірів WebP та JPG з PNG
У тестах зі стиснення WebP Google виявив, що файл зображення WebP в середньому:
- на 25-34% менше, ніж можна порівняти зображення JPEG.
- на 26% менше, ніж можна порівняти зображення PNG.
Обидва тести засновані на більш ніж 11 000 зображень, у тому числі:
- знаменитий Lenna image.
- 24 зображення з набору Kodak True Color Image.
- 100 зображень із Tecnick.com.
- Випадкова вибірка з більш ніж 11 000 зображень з пошуку картинок Google.
Як використовувати зображення WebP на WordPress
Оскільки не всі браузери підтримують зображення WebP, ви не можете просто завантажити файли зображень WebP у свою медіатеку і безпосередньо використовувати їх у WordPress, як це можна робити з JPEG і PNG.
Знову ж таки, 23% людей (включаючи всіх користувачів Safari) використовують веб-браузер, який не підтримує WebP. Якщо ви конвертуєте зображення WebP та використовуєте їх безпосередньо у своєму контенті, ці відвідувачі не зможуть бачити ваші зображення.
Але є рішення. Замість прямого завантаження зображень WebP у WordPress можна використовувати плагін WordPress, який перетворює ваші вихідні зображення у формат WebP, а також надає вихідне зображення як запасний варіант, якщо браузер відвідувача не підтримує WebP.
Наприклад, якщо ви завантажите файл JPEG на свій сайт, плагін буде:
- Перетворювати файл JPEG на WebP і використовувати версію WebP для відвідувачів, які переглядають Chrome, Firefox та інші.
- Показувати оригінальний файл JPEG відвідувачам, які переглядають Safari та інші браузери, які не підтримують WebP.
Таким чином, кожен зможе побачити ваше зображення та отримати максимально швидкий доступ до сторінок сайту.
Нижче ми розглянемо деякі з найкращих плагінів WordPress для WebP.
Дивіться також:
Як додати папки у медіатеку WordPress.
ShortPixel
У межах свого списку функцій ShortPixel дає можливість автоматично конвертувати зображення на WebP та надавати ці зображення браузерам, які підтримують WebP.
ShortPixel має обмежений безкоштовний тариф, який дозволяє безкоштовно оптимізувати 100 зображень на місяць. Після цього платні плани починаються з 4,99 дол. США на місяць до 5000 зображень/кредитів або 9,99 дол. США одночасно за пакет із 10000 кредитів.
ShortPixel вважає кожен розмір зображення WordPress, який ви оптимізуєте як кредит. Тому, якщо потрібно оптимізувати кілька розмірів мініатюр зображень, одне зображення може використовувати кілька кредитів. Для зображень немає обмежень на розмір файлу.
Ви можете розподілити свої кредити ShortPixel на необмежену кількість сайтів – всі ваші сайти можуть використовувати один і той же обліковий запис ShortPixel.
Щоб використовувати ShortPixel для обслуговування зображень WebP у WordPress, вам необхідно встановити плагін з WordPress.org та додати свій ключ API, який ви можете отримати, зареєструвавшись для безкоштовного облікового запису ShortPixe.
На вкладці «Загальні» можна налаштувати основні параметри оптимізації зображень. Наприклад, який рівень стиснення використовувати та чи потрібно змінювати розмір зображень:
Щоб увімкнути зображення WebP, перейдіть на вкладку «Додатково» та:
- Встановіть прапорець для зображень WebP.
- Встановіть прапорець: Доставити версії WebP ... (з'являється після того, як ви позначите перший прапорець).
- Виберіть перемикач для використання синтаксису тега (з'являється після перевірки попереднього поля).
- Залишіть значення за замовчуванням: Тільки через вибір WordPress хуків.
Потім збережіть зміни.
Imagify
Він може автоматично стискати та змінювати розмір зображень, які ви завантажуєте на свій сайт WordPress. Потім він перетворює їх на WebP і надає версії WebP відвідувачам з браузерами, які його підтримують.
З погляду можливостей, ShortPixel та Imagify мають багато спільного. Різницю ви помітите у цінах. Зважаючи на те, що ShortPixel стягує плату за зображення без обмеження розміру для кожного зображення, Imagify стягує плату із загального розміру файлу без обмеження зображень.
Так що якщо вам потрібно оптимізувати багато великих зображень, ShortPixel підхід може бути дешевше. Але якщо вам потрібно оптимізувати безліч маленьких зображень, плагін Imagify буде вам вигіднішим.
Imagify має обмежений безкоштовний рівень, що дозволяє оптимізувати 25 МБ на місяць. Після цього платні плани починаються з 4,99 дол. США на місяць на суму до 1 ГБ або 9,99 дол. США за разовий кредит у 1 ГБ.
Як і ShortPixel, ви можете використовувати свій обліковий запис на необмежену кількість веб-сайтів.
Щоб використовувати Imagify для зображень WordPress WebP, потрібно встановити плагін з WordPress.org і додати ключ API.
Активувавши плагін, можна використовувати поле «Загальні налаштування» для вибору рівня стиснення.
Щоб увімкнути зображення WebP, перейдіть до розділу «Оптимізація» і знайдіть розділ «Формат WebP»:
- Встановіть прапорець, щоб створити веб-версії зображень.
- Встановіть прапорець: Відображати зображення у форматі webp…
- Виберіть перемикач, щоб використовувати теги .
Optimole
- Він може обслуговувати ваші зображення через свій CDN (працює на Amazon CloudFront).
- Він пропонує адаптивні зображення в режимі реального часу, у результаті Optimole надасть зображення оптимального розміру для кожного відвідувача. Наприклад, хтось, переглядаючи невеликий екран, отримає зображення з нижчою роздільною здатністю, ніж той, хто переглядає на екрані Retina.
Цей підхід аналогічний до інших сервісів оптимізації / маніпуляції в реальному часі, таких як Cloudinary, imgix, обробка зображень KeyCDN та інші.
У рамках цієї оптимізації зображень у реальному часі Optimole може також доставляти зображення WebP відвідувачам за допомогою браузерів, що його підтримують.
Optimole має обмежений безкоштовний план, який може обробляти покази зображень приблизно до 5000 відвідувачів на місяць. Після цього платні плани починаються з $ 19 на місяць для ~ 25 000 відвідувачів.
Для початку вам необхідно встановити плагін з WordPress.org та активувати його за допомогою API-ключа, який ви отримаєте під час реєстрації безкоштовного облікового запису Optimole.
Як тільки ви зробите це, Optimole почне автоматично оптимізувати ваші зображення і доставляти їх через CDN. Підтримка WebP включена за замовчуванням, тому немає потреби вмикати її вручну.
Щоб налаштувати інші параметри, такі як рівні стиснення та масштабування, перейдіть до розділу «Медіа» → «Optimole» → «Налаштування»:
Оскільки Optimole обробляє доставку зображень через власний CDN, вам не потрібно налаштовувати будь-які правила.
Більшість сучасних браузерів підтримують WebP і близько 77% інтернет-користувачів мають браузер, який підтримує WebP. Однак деякі браузери, зокрема Safari, як і раніше, не підтримують WebP, тому ви не можете надавати зображення WebP усім відвідувачам.
Щоб вирішити цю проблему, використовуйте один із представлених у цій статті плагінів WordPress. Вони перетворюють зображення на WebP та відображають версії WebP відвідувачам, чиї браузери підтримують цей формат, при цьому використовують оригінальні зображення для відвідувачів, чиї браузери його не підтримують.
Джерело: kinsta.com
Коментарі до запису: 0