Оптимізація зображень — це один із перших кроків, який потрібно зробити для покращення роботи веб-сайту. І найкращий спосіб досягнути цього — новий формат 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. Конвертуйте зображення та слайдери додані через page builder ввімкнувши опцію Convert Images and Sliders inserted via Magento Page Builder.
10. Ввімкніть опцію Convert Images in GraphQL Requests якщо ви хочете, щоб зображення конвертувались у формат WebP під час graphQL запиту.
напр. якщо ви використовуєте PWA вітрину магазину або третьосторонній додаток
11. Виберіть чи Convert Images in REST API Requests.
Примітка: модуль замінить оригінальні зображення на зображення в форматі WebP в результатах GraphQL та REST API запитів лише в тому випадку, якщо user agent (браузер чи додаток в якому ви виконуєте запит) підтримує формат WebP.
12. Введіть базові URL-адреси зовнішніх веб-сайтів у полі Convert Images From External Websites, якщо ви використовуєте зображення з інших веб-сайтів і хочете, щоб вони також були конвертовані у WebP.
Після завершення не забудьте Зберегти налаштування і протестувати WebP зображення на вітрині.