数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会科学
时尚研究
法律研究在 CSS 中使用具有备用方案的 WebP 图像
为了在一个网站中呈现大量图像，建议使用 webp 格式，因为它提供了更好的压缩效果。我们使用 <picture> 元素为不受支持的浏览器提供备用方案 −
<picture> <source srcset="filename.webp" type="image/webp"> <source srcset=" filename.jpg" type="image/jpeg"> <img src=" filename.jpg"> </picture>
要设置图像，使用 <source> 元素的 srcset 属性。<source> 标签允许用户为元素（如 <picture>、<video> 等）指定多个媒体资源。
<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp" /> <source srcset="https://www.gstatic.com/webp/gallery/4.sm.jpg" type="image/jpeg" /> <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" />
使用 <source> 标签设置备用图像文件，以便 Web 浏览器可以根据浏览器的兼容性选择任何一种文件
以下示例说明了此备用方案。
使用 source 元素
为了放置 WebP 图像和另一种格式的图像，我们在网页上使用了 <source> 元素 −
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
}
</style>
</head>
<body>
<picture>
<source srcset="https://www.gstatic.com/webp/gallery/1.webp">
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</picture>
</body>
</html>
多次使用 source 元素
在此示例中，我们在 <source> 标签中设置了多个具有不同扩展名的类似图像 −
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 10px;
}
</style>
</head>
<body>
<picture>
<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp" />
<source srcset="https://www.gstatic.com/webp/gallery/4.sm.jpg" type="image/jpeg" />
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" />
</picture>
</body>
</html>
更新日期：2023 年 12 月 14 日
571 次查看
广告