If you already use WebP images for your HTML <img> tags and want to enable WebP for the CSS background as well, the proper way is to use multiple backgrounds in the CSS styling.

Наприклад, у вас є елемент з фоном 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.

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

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