Посібник з використання зображень Magefan AVIF для Magento

Magefan автоматично конвертує ваші зображення GIF, PNG та JPG у формат AVIF наступного покоління, не видаляючи та не перезаписуючи оригінали. Файли AVIF пропонують набагато менший розмір, ніж JPG, PNG та навіть WebP. Таким чином, сторінки завантажуються швидше, тоді як браузери, які не підтримують формат AVIF, продовжують отримувати оригінальні зображення.

У цьому посібнику ви дізнаєтеся, як налаштувати всі доступні параметри модуль , встановити якість конвертації, виключити файли з конвертації та контролювати створення зображень AVIF у вашому магазині.

Встановлення та оновлення

Щоб встановити модуль AVIF Images для Magento, дотримуйтесь інструкцій з посібника з керування модулі Magefan .

Загальні налаштування конвертації AVIF

Після встановлення модуль перейдіть до Магазини > Конфігурація > Модулі Magefan > Зображення AVIF щоб налаштувати його.

Налаштування якості

Визначте, наскільки стискати зображення AVIV та які метадані вони зберігають.

• Увімкнено — вмикає або вимикає модуль . Якщо вимкнено, зображення AVIF не генеруються, а вже конвертовані зображення AVIF не завантажуються на фронтенд.
• Якість (1-100) — встановлює рівень стиснення згенерованих зображень AVIF. Значення за замовчуванням — 85.

Використовуйте вище значення (90-100) для найкращої візуальної якості, але пам’ятайте, що чим вища якість, тим більший розмір зображеньЗменште значення, якщо вам потрібні менші файли з дещо нижчою якістю.

• Метадані зображення — список метаданих, розділених комами, які потрібно скопіювати з оригінального зображення до файлу AVIF. Допустимі значення: всі, жодні, exif, icc, xmpЗначення за замовчуванням жодного.

Чим більше метаданих ви включите, тим більшим буде конвертоване зображення AVIF. Тому додавайте лише те, що вам дійсно потрібно, наприклад. Міжнародна торгова палата якщо ви покладаєтеся на колірні профілі.

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

Визначте, як і коли створювати зображення AVIF.

• Режим генерації AVIF — визначає, як створюються зображення AVIF:

1. Завантаження сторінки — Зображення AVIF генеруються під час завантаження (рендерингу) сторінки.
2. Крон — зображення конвертуються в AVIF за допомогою cron за встановленим розкладом.
3. Завантаження сторінки та Cron — обидва режими поєднані.
4. Вручну за допомогою команди CLI — зображення конвертуються лише під час виконання команди CLI для конвертації AVIF.

• Асинхронна генерація AVIF (під час завантаження сторінки) — якщо встановлено на ТакЗображення AVIF не генеруються під час завантаження сторінки. Вони генеруються асинхронно, лише тоді, коли файл зображення запитується через pub/get.php. Це дозволяє уникнути будь-яких затримок під час завантаження сторінки, навіть для магазинів з великими каталогами та обсягами зображень відповідно.

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

Виключіть певні файли або цілі папки з конвертації AVIF, щоб заощадити ресурси та час конвертації.

• Пропустити медіа-папки — список файлів і папок у каталозі медіафайлів, які не будуть конвертовані.

• Пропустити статичні папки — список файлів і папок у статичному (тематичному) каталозі, які не будуть конвертовані.

За замовчуванням медіа/капча вже додана до Пропустити медіа-папки, оскільки зображення CAPTCHA не потребують конвертації у формат AVIF.

Кеш AVIF

• Очищення кешу конвертованих зображень — видаляє всі попередньо створені зображення AVIF. Використовуйте цю опцію щоразу, коли ви змінюєте Якість бал абоМетадані зображення налаштування. Потім збережіть налаштування, щоб запустити регенерацію зображення з новими значеннями.

Розширені налаштування конвертації AVIF

Ці налаштування охоплюють власні джерела зображень у вашому магазині Magento: теги зображень, вміст конструктора сторінок, фони CSS, сторонні API та зовнішні URL-адреси.

• Використовуйте тег PICTURE для відображення AVIF — обгортає зображення AVIF у тег, щоб браузери, які не підтримують AVIF, автоматично поверталися до оригінальних зображень.
• Конвертувати зображення з тегами HTML — конвертує зображення всередині теги.
• Конвертувати фонові зображення CSS — конвертує зображення, що використовуються як фони CSS, всередині тегу HTML стильатрибут.

• Конвертувати зображення та слайдери, вставлені за допомогою Magento Page Builder — конвертує зображення та вміст слайдера, додані через стандартний конструктор сторінок Magento.
• Конвертувати зображення в запитах GraphQL — конвертує зображення, що повертаються GraphQL, у AVIF для headless та PWA-вітрин.
• Конвертувати зображення в запитах REST API — конвертує зображення, що повертаються запитами REST API, в AVIF для користувацьких застосунків.

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

Моніторинг та регенерація зображень AVIF

Щойно модуль Magefan AVIF почне конвертувати зображення, ви зможете відстежувати прогрес і керувати кожним файлом з…Зображення сітка. Перейдіть до Система > Зображення, оптимізовані для AVIF > Зображення щоб відкрити його.

Панель керування зображеннями AVIF

У верхній частині сторінки знайдіть зведену інформацію про активність конверсії AVIF у вашому магазині:

• Інформація про оптимізацію— кругова діаграма, що показує, скільки зображень було успішно конвертовано (Успіх), скільки було пропущено (Пропустити), і скільки з них не вдалися (Помилка).
• Конвертовано за інформацією — розподіл зображень за методом генерації: Завантаження сторінки, Крон або Команда командного рядка, залежно від використаних режимів перетворення.
• Період / Кількість — кількість зображень, конвертованих за різні часові проміжки: останнє 5 хвилин, година, день і 7 днівВикористовуйте це, щоб підтвердити, що конвертація зображень AVIF активно виконується.
• Загальні розміри зображень — порівняння вашого Оригінал розмір зображення, Оригінал (оброблений) розмір (оригінали, які вже були відскановані), конвертований AVIF розмір, і Різниця — загальний обсяг дискового простору, який ви зекономили, перейшовши на зображення AVIF.

Сканування та конвертація зображень

Дві кнопки у верхньому правому куті дозволяють керувати конвертацією вручну, окрім будь-яких інших...Режим генерації AVIF ви налаштували:

• Сканування — шукає у ваших медіафайлах та статичних папках зображення, які ще не були оброблені, та додає їх до сітки. Конвертацію буде виконано під час наступного cron-запуску або Оптимізувати дія.
• Оптимізувати — конвертує зображення, знайдені під час сканування, у формат AVIF.

bin/magento magefan:image-converter:scan

bin/magento magefan:image-converter:convert

Використання сітки

Кожне зображення, знайдене або конвертоване модуль AVIF, перелічено в таблиці нижче, з інформацією про шляхи до оригінального зображення та зображення AVIF, розміри оригіналу та AVIF у КБ, відсоток конвертації, стан, метод конвертації та додаткові дії: видалити або регенерувати кожне зображення.

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

Виправлення неполадок із зображеннями AVIF

Знайдіть найпоширеніші проблеми, пов’язані з генерацією AVIF, які можуть виникнути, та їх вирішення.

Зображення AVIF не створюються

Якщо ви не бачите створення жодних файлів AVIF, це зазвичай означає, що модуль вимкнено або для вашої конфігурації вибрано неправильний режим генерації.

Рішення:

1. Перейти до Магазини > Конфігурація > Модулі Magefan > Зображення AVIF і переконайтеся Увімкнено встановлено на Так.
2. Перевірте Режим генерації AVIF — якщо встановлено на Вручну за допомогою команди CLI, зображення не конвертуватимуться, доки ви не виконаєш команду CLI. Тому найкраще перейти на Завантаження сторінки та Cron режим.
3. Якщо ви використовуєте Крон або Завантаження сторінки та Cron режим, підтвердіть, що crons налаштовано та запущено:

php bin/magento cron:run

Зміни якості не застосовуються до існуючих зображень

модуль не конвертує зображення, які вже були конвертовані у формат AVIF. Таким чином, зміна...Якість Цей параметр впливає лише на зображення, які ще не конвертовано.

Рішення:

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

Деякі зображення все ще відображаються в оригінальному форматі

Це очікувана поведінка, але лише для браузерів, які не підтримують AVIF, або для файлів зображень, пропущених під час конвертації AVIF у Пропустити медіа-папкиабо Пропустити статичні папки розділи.

Рішення:

1. Перевірте, чи папка або файл із зображенням вказані у спискуПропустити медіа-папки або Пропустити статичні папки розділи та видаліть їх за потреби.
2. Перевірте сторінку у браузері, який підтримує AVIF, щоб переконатися, що причиною не є повернення до оригінальних файлів.
3. Якщо уражений файл знаходиться у фоновому режимі CSS або є слайдером, доданим через конструктор сторінок, переконайтеся, що відповідна опція ввімкнена в Розширені налаштування конвертації AVIF.