Webp — как подставлять через псевдоэлементы ::after / ::before и при необходимости заменять на jpg / png?

Question

[Alexander9229]

Всем известно, что данный формат не кроссбраузерный, но сейчас он очень сильно нужен.

Нашел статью как его можно выводить с помощью background-image css - кому будет интересно

Мне в проекте некоторые изображения приходиться выводить через before или after, НО есть браузер НЕ поддерживает webp, то соответственно оно пропадает.

Как можно сделать, что если webp не выводиться, то подставить другой актуальный формат?
Есть ли статья на данную тему или решение?

Comments

[WapSter]

Так у тебя а статье же написано как это сделать

[Dymok]

WapSter, в статье про html-элементы, а в вопросе про псевдоэлементы.

[WapSter]

Dymok, и в чем разница? Задать нужный класс родителю и уже от него в css менять бэкграунд

Answer 1

[Dymok]

Определяем, поддерживает ли браузер webp

https://stackoverflow.com/questions/5573096/detect...

Если не поддерживает, добавляем body класс, например "no-webp".

В CSS по умолчанию ставим webp изображение, при отсутствии поддержки заменяем на png/jpg

.block {
  background-image: url('img.webp');
}

body.no-webp .block {
  background-image: url('img.png');
}