使用背景图像的 webP 的 Jpg 备份选项?
Jpg backup option for webP using Background-image?
我正在为我的项目使用 Vue。我的很多图像都是使用背景图像完成的。
<div :style="`background:url('${user.image});`"></div>
根据 google 如果我正在使用我可以设置:
<picture>
<source srcset="img/awesomeWebPImage.webp" type="image/webp">
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>
有没有办法对背景图像做类似的事情?
没有真正唯一的 CSS 解决方案,为此您必须依赖 javascript。
最好的可能是有一个 1x1px 的 webp 图片并尝试加载它然后设置一个标志。
不幸的是(?)这个过程是异步的。
function testWebPSupport() {
return new Promise( (resolve) => {
const webp = "data:image/webp;base64,UklGRkAAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAIAAAAAAFZQOCAYAAAAMAEAnQEqAQABAAFAJiWkAANwAP79NmgA";
const test_img = new Image();
test_img.src = webp;
test_img.onerror = e => resolve( false );
test_img.onload = e => resolve( true );
} );
}
(async ()=> {
const supports_webp = await testWebPSupport();
console.log( "this browser supports webp images:", supports_webp );
// for stylesheets
if( !supports_webp ) {
document.body.classList.add( 'no-webp' );
}
// for inline ones, just check the value of supports_webp
const extension = supports_webp ? 'webp' : 'jpg';
// elem.style.backgroundImage = `url(file_url.${ extension })`;
})();
.bg-me {
width: 100vw;
height: 100vh;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/9/98/Great_Lakes_from_space_during_early_spring.webp);
background-size: cover;
}
.no-webp .bg-me {
/* fallback to png */
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Great_Lakes_from_space_during_early_spring.webp/800px-Great_Lakes_from_space_during_early_spring.webp.png);
}
<div class="bg-me"></div>
我正在为我的项目使用 Vue。我的很多图像都是使用背景图像完成的。
<div :style="`background:url('${user.image});`"></div>
根据 google 如果我正在使用我可以设置:
<picture>
<source srcset="img/awesomeWebPImage.webp" type="image/webp">
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>
有没有办法对背景图像做类似的事情?
没有真正唯一的 CSS 解决方案,为此您必须依赖 javascript。
最好的可能是有一个 1x1px 的 webp 图片并尝试加载它然后设置一个标志。
不幸的是(?)这个过程是异步的。
function testWebPSupport() {
return new Promise( (resolve) => {
const webp = "data:image/webp;base64,UklGRkAAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAIAAAAAAFZQOCAYAAAAMAEAnQEqAQABAAFAJiWkAANwAP79NmgA";
const test_img = new Image();
test_img.src = webp;
test_img.onerror = e => resolve( false );
test_img.onload = e => resolve( true );
} );
}
(async ()=> {
const supports_webp = await testWebPSupport();
console.log( "this browser supports webp images:", supports_webp );
// for stylesheets
if( !supports_webp ) {
document.body.classList.add( 'no-webp' );
}
// for inline ones, just check the value of supports_webp
const extension = supports_webp ? 'webp' : 'jpg';
// elem.style.backgroundImage = `url(file_url.${ extension })`;
})();
.bg-me {
width: 100vw;
height: 100vh;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/9/98/Great_Lakes_from_space_during_early_spring.webp);
background-size: cover;
}
.no-webp .bg-me {
/* fallback to png */
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Great_Lakes_from_space_during_early_spring.webp/800px-Great_Lakes_from_space_during_early_spring.webp.png);
}
<div class="bg-me"></div>