Оптимізація зображень — це один із перших кроків, який потрібно зробити для покращення роботи веб-сайту. І найкращий спосіб досягнути цього — новий формат 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, наприклад після зміни значення якості.
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>
Перегляньте наступну статтю, щоб використовувати WebP зображення у фоновому CSS.
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.
Після завершення не забудьте Зберегти налаштування і протестувати WebP зображення на вітрині.