如何使用Webp图像和支持野生动物园
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用Webp图像和支持野生动物园相关的知识,希望对你有一定的参考价值。
由于压缩效果更好,我试图在整个网站上使用webp图像。但是,我知道Safari浏览器不支持webp。使用background-image: url("img/img.webp)
加载图像。然后,我应用其他background
属性。
我了解<picture>
标签可用于显示不同的图像,具体取决于浏览器的支持。像这样。
<picture>
<source srcset="some_img.webp" type="image/webp">
<img src="some_img.jpg"alt="">
</picture>
但是,如果有一种方法可以使用css进行操作,这样省去了我为所有图像编写新的html和样式的麻烦,那将更加方便。
例如类似这样的东西
#image-id
background-image: url("../img/img.webp", "../img/img.jpeg"); // show jpeg if webp not supported
或者如果不可能的话,也许是这样的
@media only screen and (safari-specific-property:)
background-image: url("../img/img.jpeg"); // show jpeg for safari
在维护浏览器支持的同时使用Webp图像的最佳解决方案是什么,理想情况下使用CSS?
有趣的问题。据我所知,您可以使用级联或@supports。
让我们看看使用层叠时会发生什么:
.bg
/*fallback */
background-image: url("https://www.gstatic.com/webp/gallery/2.jpg")
background-image: url("https://www.gstatic.com/webp/gallery/1.webp");
它可以正常工作,但是了解JPG和WebP(占大多数)的浏览器会提出两个请求,而这并不是最佳选择。
现在,让我们看一下@supports at rule。
@supports not (background-image: url("https://www.gstatic.com/webp/gallery/1.webp"))
.bg
background-image: url("https://www.gstatic.com/webp/gallery/2.jpg")
.bg
background-image: url("https://www.gstatic.com/webp/gallery/1.webp");
由于大多数浏览器都支持WebP,所以我认为此解决方案是理想的。
不支持WebP的浏览器将按照规则获取JPG。然后,他们将阅读下一个称为WebP的样式,由于他们不支持该功能,因此他们将坚持使用JPG。我想知道您是否可以在野生动物园浏览器中尝试此操作。
感兴趣的链接:
https://css-tricks.com/how-supports-works/
https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
以上是关于如何使用Webp图像和支持野生动物园的主要内容,如果未能解决你的问题,请参考以下文章