<picture> <!-- 判断浏览器是否支持 WebP 格式 --> <source srcset="example.webp" type="image/webp"> <!-- 如果不支持 WebP 格式，加载 JPEG 格式 --> <source srcset="example.jpeg" type="image/jpeg"> <!-- 如果都不支持，加载默认图片 --> <img src="example.png" alt="Example Image"> </picture>
WebP 格式是由 Google 开发的一种图像压缩格式，可以显著减小图片文件大小，提升网页加载速度。但并非所有浏览器都支持 WebP 格式，为了兼容性，大家可以在 CSS 中判断浏览器是否支持 WebP 格式并加载相应的图片。
以上代码通过<source>和<img>标签实现了以下逻辑：
- 优先判断浏览器是否支持 WebP 格式，如果支持，则加载
example.webp图片。 - 如果浏览器不支持 WebP 格式，则加载
example.jpeg图片。 - 如果浏览器同时不支持 WebP 和 JPEG 格式，则加载默认图片
example.png。