在 CSS 中使用 WebP 图片并设置回退

cssweb developmentfront end technology更新于 2024/9/4 2:20:17

为了在网站中渲染大量图片，建议使用 webp 格式，因为它可以提供更好的压缩率。

我们使用 <picture> 元素为不支持的浏览器提供回退 −

<picture>
   <source srcset="filename.webp" type="image/webp">
   <source srcset=" filename.jpg" type="image/jpeg">
   <img src=" filename.jpg">
</picture>

以下示例说明了这种回退。

示例

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 2%;
}
</style>
</head>
<body>
<picture>
   <source srcset="sky.webp">
   <img src="sky.jpg" />
</picture>
</body>
</html>

输出

这将产生以下结果 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 10px;
}
</style>
</head>
<body>
<picture>
   <source srcset="tree.webp" type="image/webp" />
   <source srcset="tree.jpg" type="image/jpeg" />
   <img src="tree.jpg" />
</picture>
</body>
</html>