Как правильно написать код, который заменяет картинку в background-image на webp (чтобы это видел pagespeed)?

Question

[eugene159]

Для определения, поддерживается ли webp браузером, я использую JS код, который взял на этой странице:
https://developers.google.com/speed/webp/faq

Я вызываю его внутри такой конструкции:

$(function() {
...
});

В callback-функции я, если webp поддерживается, через jquery беру background-image у элементов с нужным классом и меняю значение - ставлю путь к webp картинке. Если webp не поддерживается, то я ничего не делаю.

Проверяю сайт в pagespeed - а он (pagespeed) как будто не видит замены путей в background-image на webp. Почему так? Можно как-нибудь написать JS код, который заменяет картинку из background-image на webp так, чтобы pagespeed это видел? Или надо убирать background-image и писать data-атрибут вместо него - для каждого DOM-элемента, который имеет background-image - чтобы pagespeed не видел background-image (его ведь не будет)? Какой-то слишком сложный способ... Да и не очень верный - пути к картинкам внешнего вида сайта должны быть в стилях, а не в верстке.

Answer 1

[eugene159]

Все просто. При загрузке страницы JS вешает на body класс "webp" или "no-webp" (в зависимости от того, поддерживается webp или нет). background-image для элемента указывается с помощью каскадности:

.webp .header-img {
    background-image: url(../img-webp/header-img.webp); 
}

.no-webp .header-img {
    background-image: url(../img/header-img.png); 
}

В итоге pagespeed не видит png, поэтому не ругается на него.

Подробности тут:
https://css-tricks.com/using-webp-images/