оптимізація зображень

Перехід на новий формат Веб-програма – один із перших кроків до оптимізації швидкості. Ці зображення менші за розміром і, відповідно, завантажуються швидше. Але питання полягає в тому, як конвертувати зображення у WebP у Magento?

У вас є два варіанти: зробити це автоматично за допомогою Magefan Розширення WebP Images для Magento або конвертувати їх в інше місце та завантажити безпосередньо до адміністратора.

У цьому посібнику ви дізнаєтеся все, що потрібно знати про створення 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. Додайте наступний код і збережіть файл:

<?php 

$errorSufix = '<br/>Please enable it in your hosting configuration or ask the server administrator to help you with this.</strong>';

if (!function_exists('gd_info')) {
   echo ('<strong style="color:red">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 ('<strong style="color:red">Error: WebP option is not enabled in PHP GD.' . $errorSufix);
    exit();
}

if (!function_exists('imagecreatefromwebp')) {
    echo ('<strong style="color:red">Error: imagecreatefromwebp function does not exist.' . $errorSufix);
    exit();
}


echo ('<strong style="color:green">Success.<br/>Your PHP settings are ready for WEBP.</strong>');

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: Розглянемо Basic налаштування WebP

У цьому розділі ви налаштовуєте як, коли та в якій якості створюються зображення WebP. Отже, перейдіть до розділу Сховища > Налаштування > Розширення Magefan > Зображення WebP, , увімкніть розширення Magefan WebP та почніть заповнювати параметри.

Примітка: всі параметри вже налаштовано відповідно до найкращих практик. Тому вам не потрібно нічого робити після ввімкнення розширення. Генерація WebP розпочнеться автоматично. Змініть або заповніть наступні параметри лише за потреби.

Оцінка якості

Зображення WebP використовують конвертацію з втратами та без втрат, щоб гарантувати найкращу якість під час зменшення розміру. Але ви можете контролювати якість WebP.

  • Якість (1-100) — визначає якість (рівень стиснення) зображень WebP. Значення за замовчуванням — 85.

Ви можете встановити нижче значення для меншого розміру файлу, але зверніть увагу, що чим менший розмір файлу, тим гірша якість.

показник якості зображення webp

Примітка: якщо вам не подобається якість WebP, очистіть кеш WebP та змініть якість, щоб запустити генерацію WebP з новим значенням якості.

  • Метадані зображення — визначає список метаданих для копіювання з оригінального зображення до зображення WebP. Зверніть увагу, що чим більше метаданих ви включаєте, тим важче зображення webp.

Режим генерації

Ці параметри визначають, як обробляється генерація WebP — автоматично чи вручну.

  • Режим генерації WebP — визначає, як будуть генеруватися зображення WebP:
  1. Завантаження сторінки: зображення WebP генеруються під час завантаження сторінки.
  2. Cron: зображення конвертуються у формат WebP за допомогою cron щодня.
  3. Завантаження сторінки та Cron: ці два режими комбіновані.
  4. Вручну за допомогою команд CLI bin/magento Magefan:webp:convert: зображення конвертуються у WebP після виконання команди CLI.
  • Асинхронна генерація WebP (під час завантаження сторінки) — генерує зображення WebP під час завантаження сторінки асинхронно, лише тоді, коли зображення запитуються за допомогою pub/get.php. Це означає, що не буде жодних затримок під час генерації зображень, навіть найменших.

режим генерації webp у Magento

Примітка: незалежно від режиму конвертації, розширення ніколи не конвертує одне й те саме зображення у WebP двічі. Тому воно пропускає зображення, які вже конвертовані у WebP.  

Пропустити зображення

Розширення Magefan WebP для Magento конвертує всі зображення у вашому магазині. Але якщо ви хочете пропустити будь-яке зображення або цілу папку, ось де ви це робите.

  • Пропустити зображення, створені більше ніж (днів) — дозволяє пропустити зображення, додані нещодавно (більше ніж N днів тому).
  • Пропустити медіа-папки та Пропустити статичну папку — виключити цілі папки зображень з конвертації WebP.

пропустити зображення з генерації webp

Примітка: якщо ви хочете пропустити деякі конкретні <img> Теги додають атрибут data-webpconverted="1" до тегу <img>. 

e.g. <img src="image.jpg" />     —>    <img src="image.jpg" data-webpconverted="1" />

Кеш WebP

Кеш WebP дозволяє вам регенерувати зображення WebP, якщо ви хочете змінити якість WebP. Отже, спочатку змініть Якість (1-100) , потім Очистити кеш WebP та Зберегти налаштування. Це видалить усі старі зображення WebP та згенерує нові.

очистити кеш webp magento

Крок 2: Заповніть розширені налаштування WebP

Ці налаштування стосуються користувацьких зображень у вашому магазині або у ваших API.

  • Використовувати тег PICTURE для відображення WebP — (увімкнено за замовчуванням) дозволяє розширенню використовувати оригінальні зображення PNG та JPG для браузерів, які не підтримують WebP.
  • Конвертувати тег зображення HTML — перетворює зображення в теги зображень (різні зображення для різних розмірів екрана).

наприклад,




Кріс стоїть, тримаючи свою дочку Елву
</picture>

конвертувати html-тег зображення images у webp

наприклад,

<div style="width: 1000px; height: 1000px; background-image: https://mydomain.com/media/wysiwyg/balenciaga1.jpg "></div>
  • Конвертувати зображення та слайдери, вставлені через Magento Page Builder — конвертує зображення, додані через конструктор сторінок, у WebP.

конвертувати фонові зображення css у magento

конвертувати зображення у webp у запитах graphql magento

Примітка: розширення замінить оригінальні зображення у форматі WebP у GraphQL та результатах запитів REST API лише у випадку, якщо агент користувача (браузер або програма, в якій ви робите запит) підтримує формат WebP.

  • Конвертувати зображення із зовнішніх веб-сайтів — конвертує зображення з деяких зовнішніх веб-сайтів, наприклад, WordPress, якщо ви вкажете базові URL-адреси зовнішніх веб-сайтів.

конвертувати зображення із зовнішніх веб-сайтів у webp magento

Крок 3: Відстеження створення зображень WebP

Після того, як ви почнете конвертувати зображення у формат WebP у Magento, вони з’являться на панелі Система > Зображення, оптимізовані для WebP > Зображення .

Тут ви можете побачити загальні показники створення WebP, такі як:

  • скільки зображень вже конвертовано, пропущено або заплановано
  • кількість зображень, конвертованих на основі режиму конвертації
  • скільки зображень було конвертовано за останні 5 хвилин, день або тиждень тощо
  • порівняння розмірів оригінального та конвертованого зображення

показники Модуль Magento 2 WebP Images

Крім того, ви можете знайти кожне конвертоване зображення у зручній сітці. Це дозволяє порівняти розміри оригіналу та версії WebP, побачити відсоток стиснення, стан та використаний метод конвертації.

метрики генерації magento webp

Примітка: якщо ви використовуєте лише Завантаження сторінки як метод конвертації, ви побачите лише конвертовані зображення в цій сітці. Якщо ви хочете побачити зображення, які потрібно конвертувати, виконайте таку команду — bin/magento Magefan:webp:scan — або увімкніть метод конвертації Page Load & Cron .

Поки ви все ще тут, на панелі Зображення , ви можете видалити всі або певні копії WebP. Просто поставте позначку біля відповідного зображення та виберіть Видалити з випадаючого списку Дії . Потім зображення будуть конвертовані у WebP за допомогою методу конвертації, встановленого в налаштуваннях.

видалити зображення WebP у Magento

Крок 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 може бути повністю автоматичною.

Однак, якщо у вас вже є конвертовані зображення і ви просто хочете завантажте WebP до свого адміністратора , є спосіб. Але зауважте, що цей варіант займає більше часу. Вам доведеться вручну конвертувати та завантажувати зображення WebP до Magento.