Якщо ви вже використовуєте Зображення 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 ось так:

.minicart-wrapper .action.showcart.desktop .fa-shopping-cart:before {

У цьому випадку всі браузери отримають зображення WebP, окрім тих, які не підтримують WebP. Вони завантажать зображення .png.

Примітка: якщо ви використовуєте Magento 2 з Розширення Magento 2 WebP " no-webp" & "webp-supported "класи будуть автоматично додані до тегу <body> та будуть доступні вам одразу після встановлення.

Якщо ви використовуєте якусь іншу платформу або розширення, вам потрібно інтегрувати JavaScript (наприклад, Modernizr), який може виявляти WebP, щоб програмно додати класи, що не підтримують Webp та не підтримують webp , до вашого тегу body.