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

.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" буде автоматично доданий до елемента <body> і буде доступний для вас з коробки.

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