Оптимізація зображень — це один із перших кроків, який потрібно зробити для покращення роботи веб-сайту. І найкращий спосіб досягнути цього — новий формат WebP, розроблений Google. Зображення WebP мають менший розмір і відповідно завантажують швидше.

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

Виконайте наступні кроки, щоб налаштувати розширення Magento 2 WebP Images:

1. Підіть в Stores > Configuration > Magefan Extensions > WebP Images.

2. Ввімкніть модуль.

3. Задайте Image Quality (1-100). Примітка: чим вище значення ви задасте, тим кращою буде якість. Проте розмір високоякісних зображень буде більшим.

4. Виберіть WebP Generation Mode. Доступні для вас опції:

  • Page Load: Зображення WebP генеруються під час завантаження сторінки (генерує лише ті зображення, які ще не були конвертовані у WebP)
  • Cron: зображення регулярно конвертуються у WebP за допомогою cron
  • Page Load & Cron: обидві опції використовуються разом
  • Вручну за командою CLI bin/magento magefan:webp:convert зображення перетворюються у WebP після запуску команди.

Примітка: залежно від кількості зображень конвертація може зайняти деякий час. Ви також можете використовувати команду bin/magento magefan:webp:convert --path media/wysiwyg/name folder або bin/magento magefan:webp:convert --path static/ foldername для створення зображень у певній папці.

Зверніть увагу, що розширення не видаляє оригінальні зображення jpg, png, gif, воно створює копію у WebP форматі. Також перед конвертацією розширення перевіряє, чи існує версія зображення у WebP, і лише тоді воно починає конвертацію. Отже, воно пропускає зображення, які вже були перетворені в WebP.

5. Введіть файли або папки, які потрібно пропускати під час конвертації, у полі Skip Media Folders або Skip Static Folder.

6. Очистіть кеш WebP, якщо ви хочете видалити всі наявні копії зображень у WebP, наприклад після зміни значення якості.

Magento 2 WebP Images Extension Configuration

7. Виберіть, чи хочете ви конвертувати зображення в HTML picture тегах (Convert HTML Picture Tag Images). Увімкніть цю опцію, лише якщо ви використовуєте теги зображень із адаптивними зображеннями - responsive images (різними зображеннями для різних розмірів екрану).

Приклад:

<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

8. Виберіть Так, якщо Ви бажаєте перетворити фонові зображення CSS (Convert CSS Background Images). Увімкніть цю опцію, лише якщо ви використовуєте фонові зображення CSS в атрибуті стилю тегів HTML.

Приклад:

<div style="width: 1000px; height: 1000px; background-image: https://mydomain.com/media/wysiwyg/balenciaga1.jpg"></div>

9. Ввімкніть опцію Convert Images in GraphQL Requests якщо ви хочете. щоб зображення конвертувались у формат WebP під час graphQL запиту. 

напрю якщо ви використовуєте PWA вітрину магазину

10. Виберіть чи Convert Images in REST API Requests.

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

11. Введіть базові URL-адреси зовнішніх веб-сайтів у полі Convert Images From External Websites, якщо ви використовуєте зображення з інших веб-сайтів і хочете, щоб вони також були конфертовані у WebP.

Magento 2 WebP Images Advanced Configurations

Після завершення не забудьте Зберегти налаштування.