Підтримайте Якщо ви вже використовуєте WebP зображення для HTML-тегів <img> і хочете також увімкнути WebP для фонових малюнків у CSS, правильним буде використати кілька фонів в CSS стилях.
Наприклад, у вас є елемент із фоновим CSS .png:
.minicart-wrapper .action.showcart.desktop .fa-shopping-cart:before {
background: url(../images/icon-cart.png) no-repeat;
}
Щоб переключити його на WebP, вам потрібно вручну конвертувати PNG/JPG/GIF зображення у формат WebP, використовуючи один із безкоштовних інструментів доступних в Інтернеті. Збережіть його в тій же папці та використовуйте CSS ось так:
body.webp-supported .minicart-wrapper .action.showcart.desktop .fa-shopping-cart:before {
background: url(../images/icon-cart.webp) no-repeat;
}
body.no-webp .minicart-wrapper .action.showcart.desktop .fa-shopping-cart:before {
background: url(../images/icon-cart.png) no-repeat;
}
У цьому випадку всі браузери отримуватимуть WebP зображення, за винятком тих, які не підтримують WebP. Вони завантажать .png зображення.
Примітка: якщо ви використовуєте Magento 2 із розширенням Magento 2 WebP Image, клас "no-webp" та "webp-supported" буде автоматично доданий до елемента <body> і буде доступний для вас з коробки.
Якщо ви використовуєте іншу платформу або розширення, то вам потрібно інтегрувати JavaScript (напр., Modernizr), який виявить WebP, щоб програмно додати клас no-webp, webp-supported до вашого тегу <body>.
