响应式图片 picture
picture/source 响应式、srcset 分辨率切换、WebP 兼容回退
响应式图片 picture
<picture> 元素让浏览器根据屏幕大小选择合适的图片——手机用小图省流量，大屏用高清图。
学完本章你将： 掌握 picture/source 响应式、srcset 分辨率切换。
picture 元素
html
<picture>
<!-- 屏幕宽度 >= 800px 用大图 -->
<source srcset="large.jpg" media="(min-width: 800px)">
<!-- 屏幕宽度 >= 400px 用中图 -->
<source srcset="medium.jpg" media="(min-width: 400px)">
<!-- 默认（手机）用小图 -->
<img src="small.jpg" alt="响应式图片">
</picture>srcset 分辨率切换
html
<img src="photo-1x.jpg"
srcset="photo-1x.jpg 1x,
photo-2x.jpg 2x,
photo-3x.jpg 3x"
alt="高清屏适配">
<!-- 普通屏加载 1x，Retina 屏加载 2x/3x -->综合示例
html
<picture>
<!-- 支持 WebP 的浏览器用 WebP -->
<source srcset="photo.webp" type="image/webp">
<!-- 不支持 WebP 的回退到 JPEG -->
<img src="photo.jpg" alt="兼容方案">
</picture>