HTML source元素type属性不同格式图片实例页面

回到相关文章 »

效果：

不同浏览器加载不同格式的图片

//zxx: 打开控制台查看网络请求

代码：

CSS代码：
img {
    width: 180px; height: 221px;
}
HTML代码：
<picture>
  <source srcset="zxx.avif" type="image/avif">
  <source srcset="zxx.webp" type="image/webp">
  <img src="zxx.jpg">
</picture>