Switching to the new WebP format is one of the first steps in speed optimisation. These images are smaller in size and correspondingly take less time to load. But the question is — how do you convert images to WebP in Magento?
You have two options — do it automatically with the Magefan or convert them elsewhere and upload directly to the admin.
У цьому посібнику ви дізнаєтеся все, що потрібно знати про створення WebP у Magento за допомогою Magefan, моніторинг та керування ними для найкращого досвіду.
Але почнемо з основ.
Системні вимоги Magento для зображень WebP
Оскільки Magento не забезпечує жодної вбудованої конвертації WebP, вам доведеться покладатися на бібліотеки зображень на вашому сервері. Ось чому, перш ніж ви зможете конвертувати зображення у WebP у Magento, вам потрібно перевірити, чи ваш сервер насправді може це впоратися.
Він повинен підтримувати одне з наступного:
- Imagick / ImageMagick з libwebp — має відповідати підтримці WebP, оскільки багато хостинг-провайдерів пропонують її без libwebp.
- PHP GD з увімкненим WebP — має включати підтримку WebP (функція imagewebp() доступна).
- командний рядок libwebp (необов'язково) — використовується для швидшого перетворення.
Примітка: якщо вимоги до вашого сервера не відповідають вимогам, жодне розширення WebP не зможе конвертувати зображення у WebP, навіть якщо ви його встановили правильно.
Ось чому перед встановленням будь-яких розширень потрібно перевірити сумісність із сервером.
Як перевірити, чи підтримує ваш сервер WebP?
Щоб перевірити, чи готове ваше середовище до WebP, виконайте швидкий тест за допомогою простого PHP-скрипта у кореневому каталозі Magento.
1. Створіть новий тестовий файл, наприклад testwebp.php у кореневому каталозі Magento.
2. Додайте наступний код і збережіть файл:
Please enable it in your hosting configuration or ask the server administrator to help you with this.';
if (!function_exists('gd_info')) {
echo ('Error: GD is not enabled in PHP settings.' . $errorSufix);
exit();
}
$hasWebP = false;
foreach (gd_info() as $key => $value) {
if (stristr($key, 'webp')) {
$hasWebP = true;
break;
}
}
if (!$hasWebP) {
echo ('Error: WebP option is not enabled in PHP GD.' . $errorSufix);
exit();
}
if (!function_exists('imagecreatefromwebp')) {
echo ('Error: imagecreatefromwebp function does not exist.' . $errorSufix);
exit();
}
echo ('Success.
Your PHP settings are ready for WEBP.');
3. Відкрийте файл у вашому браузері за такою URL-адресою:
https://mydomain.com/testwebp.php
Якщо ви бачите зелене повідомлення Успіх , це означає, що ваш сервер повністю готовий до зображень WebP.
Однак, якщо файл не завантажується (можливо, це тому, що ваш хостинг блокує прямий доступ), запустіть його безпосередньо з вашої папки Magento за допомогою команди CLI:
php testwebp.php
Якщо ви бачите те саме повідомлення Успіх , тоді ви можете безпечно конвертувати зображення у WebP у Magento.
Примітка: Якщо ви все ще не можете зв'язатися, можливо, вам доведеться попросити адміністратора вашого сервера встановити конфігурацію або просто змінити налаштування PHP на панелі хостингу.
Як працює генерація WebP у Magento?
Тепер ви готові до генерації WebP. Ось лише кілька речей, які вам слід знати про розширення Magefan WebP Images:
- Не видаляє ваші оригінальні зображення PNG та JPG з вашого сервера. Воно створює копії у форматі WebP.
- Не завантажує файли PNG та WebP, хоча ви можете побачити обидва файли в коді на фронтенді. Воно завантажує відповідне зображення на основі браузера користувача.
Наприклад, якщо користувач переходить з новішого браузера, ми завантажимо зображення WebP. Якщо браузер застарілий, користувач побачить оригінальні зображення PNG. Такий підхід забезпечує чудовий досвід для всіх користувачів без винятку.
- Не змінює шляхи оригінальних зображень. Воно створює окрему папку для копій WebP та обслуговує їх звідти.
Як конвертувати зображення у WebP у Magento?
Щоб конвертувати зображення з PNG у WebP у Magento, спочатку потрібно налаштувати розширення WebP Images.
Давайте розглянемо кожен розділ, який вам потрібно охопити.
Крок 1: Ознайомлення з основними налаштуваннями WebP
У цьому розділі ви налаштовуєте як, коли та в якій якості генеруються зображення WebP. Отже, перейдіть доМагазини > Конфігурація > Розширення Magefan > Зображення WebP, , увімкніть розширення Magefan WebP та почніть заповнювати параметри.
Примітка: всі параметри вже налаштовано відповідно до найкращих практик. Тому вам не потрібно нічого робити після ввімкнення розширення. Воно автоматично розпочне генерацію WebP. Змініть або заповніть наступні параметри лише за потреби.
Оцінка якості
Зображення WebP використовують конвертацію з втратами та без втрат, щоб гарантувати найкращу якість під час зменшення розміру. Але ви можете контролювати якість WebP
- Якість (1-100) — визначає якість (рівень стиснення) зображень WebP. Значення за замовчуванням — 85.
Ви можете встановити нижче значення для меншого розміру файлу, але зверніть увагу, що чим менший розмір файлу, тим гірша якість.
Примітка: якщо вам не подобається якість WebP, очистіть кеш WebP та змініть якість, щоб запустити генерацію WebP з новим значенням якості.
- Метадані зображення — визначає список метаданих для копіювання з оригінального зображення до зображення WebP. Зверніть увагу, що чим більше метаданих ви включаєте, тим важче зображення webp.
Режим генерації
Ці опції визначають, як обробляється генерація WebP — автоматично чи вручну.
- Режим генерації WebP — визначає, як будуть генеруватися зображення WebP:
- Завантаження сторінки: зображення WebP генеруються під час завантаження сторінки.
- Cron: зображення конвертуються у формат WebP за допомогою cron щодня.
- Завантаження сторінки та Cron: обидва ці 2 режими комбіновані.
- Вручну за допомогою команд CLI bin/magento magefan:webp:convert: зображення конвертуються у WebP після виконання команди CLI.
- Асинхронна генерація WebP (під час завантаження сторінки) — генерує зображення WebP під час завантаження сторінки асинхронно, лише коли зображення запитуються за допомогою pub/get.php. Це означає, що не буде жодних затримок під час створення зображень, навіть найменших.
Примітка: Незалежно від режиму конвертації, розширення ніколи не конвертує одне й те саме зображення у WebP двічі. Тому воно пропускає зображення, які вже конвертовані у WebP.
Пропустити зображення
Розширення Magefan WebP для Magento конвертує всі зображення у вашому магазині. Але якщо ви хочете пропустити будь-яке зображення або цілу папку, ось де ви це робите.
- Пропустити зображення, створені більше ніж (днів) — дозволяє пропускати зображення, додані нещодавно (більше ніж N днів тому).
- Пропустити медіа-папки та Пропустити статичну папку — виключає цілі папки зображень з конвертації WebP.
Примітка: якщо ви хочете пропустити деякі конкретні теги , додайте атрибут data-webpconverted="1" до тегу
.
e.g. 
"image.jpg" /> —> "image.jpg" data-webpconverted="1" />
Кеш WebP
Кеш WebP дозволяє вам регенерувати зображення WebP, якщо ви хочете змінити якість WebP. Отже, спочатку змініть Якість (1-100), потім Очистити кеш WebP та Зберегти налаштування. Це видалить усі старі зображення WebP та згенерує нові.
Крок 2: Заповніть розширені налаштування WebP
Ці налаштування стосуються користувацьких зображень у вашому магазині або у ваших API.
- Використовувати тег PICTURE для відображення WebP — (увімкнено за замовчуванням) дозволяє розширенню використовувати оригінальні зображення PNG та JPG для браузерів, які не підтримують WebP.
- Конвертувати HTML-тег зображення — конвертує зображення в теги зображень (різні зображення для різних розмірів екрана).
наприклад
- Конвертувати фонові зображення CSS — converts images into CSS background (in the HTML tags style attribute).
наприклад
- Конвертувати вставлені зображення та слайдери через Magento Page Builder — конвертує зображення, додані через конструктор сторінок, у WebP.
- Конвертувати зображення в GraphQL та REST API Requests — конвертувати зображення у WebP у сторонньому застосунку.
Примітка: розширення замінить оригінальні зображення у форматі WebP у GraphQL та результатах REST API запитів лише у випадку, якщо агент користувача (браузер або програма, в якій ви робите запит) підтримує формат WebP.
- Конвертувати зображення із зовнішніх веб-сайтів — конвертує зображення з деяких зовнішніх веб-сайтів, наприклад, WordPress, якщо ви вкажете базові URL-адреси зовнішніх веб-сайтів.
Крок 3: Відстеження створення зображень WebP
Після того, як ви почнете конвертувати зображення у формат WebP у Magento, вони з’являться на панелі Система > Зображення, оптимізовані для WebP > Зображення .
Тут ви можете побачити загальні показники створення WebP, такі як:
- скільки зображень вже конвертовано, пропущено або заплановано
- кількість зображень, конвертованих на основі режиму конвертації
- скільки зображень було конвертовано за останні 5 хвилин, день або тиждень тощо
- порівняння розмірів оригінального та конвертованого зображень
Крім того, ви можете знайти кожне конвертоване зображення у зручній сітці. Це дозволяє порівняти розміри оригінальної версії та версії WebP, побачити відсоток стиснення, стан та використаний метод конвертації.
Примітка: якщо ви використовуєте лише Завантаження сторінки як метод конвертації, ви побачите лише конвертовані зображення в цій сітці. Якщо ви хочете побачити зображення, які потрібно конвертувати, виконайте таку команду — bin/magento magefan:webp:scan — або увімкніть метод конвертації Page Load & Cron .
Поки ви все ще тут, на панелі Зображення , ви можете видалити всі або певні копії WebP. Просто поставте позначку біля відповідного зображення та виберіть Видалити з випадаючого списку Дії . Потім зображення будуть конвертовані в WebP методом конвертації, встановленим у налаштуваннях.
Крок 4: Тестування зображень WebP
За винятком панелі Зображення , ви можете тестувати зображення WebP у магазині.
Генерація WebP займає занадто багато часу
Залежно від кількості зображень, конвертація може зайняти деякий час. Щоб зменшити «тиск» на вашу систему, просто виберіть режим генерації Cron або конвертуйте зображення вручну за допомогою команди CLI.
У другому випадку ви також можете генерувати зображення пакетами, у певній папці. Просто додайте параметр до команди CLI генерації WebP:
bin/magento magefan:webp:convert --path media/wysiwyg/foldername
bin/magento magefan:webp:convert --path static/foldername
Завантаження зображень WebP у Magento
Виходячи з усієї інформації, яку ви щойно прочитали, генерація WebP у Magento може бути повністю автоматичною.
However, if you already have some images converted and just want to завантажте WebP до свого адміністратора, there's a way. But note that this option is more time-consuming. You would have to manually convert and upload WebP images to Magento.
