Какой самый идеальный вариант webp заменить на jpg если не поддерживает браузер?
Какой самый идеальный вариант webp заменить на jpg если не поддерживает браузер?
body {
background-image: url(../images/image.webp);
background-image: url(../images/image.jpg);
}
<img src="/images/image.webp">
<img src="/images/image.jpg">
Хотелось бы получить идеальное решение без JS, так как по поиску тут везде с JS предлагают.
Или можно на JS, но самым минимум кода.
Предложите варианты которые существуют
Ответы (1 шт):
Автор решения: Sergey Mironov
→ Ссылка
function checkWebP(callback){
let webP = new Image();
webP.onload = webP.onerror = function(){
callback(webP.height == 2);
};
webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
};
checkWebP(function(support){
if(support) document.body.classList.add("webp");
else document.body.classList.add("no-webp");
});body.webp {
background: url("img/bg.webp");
}
body.no-webp {
background: url("img/bg.jpg");
}