HTML picture 响应式图片

picture元素：基于媒体查询加载不同图片、source srcset媒体条件、WebP/AVIF格式降级、DPR像素密度适配、与img srcset/sizes对比 · 难度：入门 · +10XP

HTML picture 元素 —— 智能选择最佳图片

同一个网页，可能用手机小屏幕看，也可能用台式机大显示器看。如果手机上加载了一张台式机的大图，既浪费流量又加载慢。<picture> 元素就是来解决这个问题的。

基本用法

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-medium.jpg" media="(min-width: 500px)">
  <img src="image-small.jpg" alt="一张美丽的风景照">
</picture>

浏览器会从上到下检查每个 source 的 media 条件：屏幕宽度大于等于800px加载大图，500-799px加载中图，小于500px加载小图。最后的 img 是兜底方案。

按图片格式降级

WebP 和 AVIF 图片格式体积更小，但老浏览器不支持。picture 可以按格式降级：

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="照片">
</picture>

新浏览器加载 AVIF（体积最小），不支持的降级到 WebP，再不行就用 JPG（100%兼容）。

动手练习

1. 基础练习：准备三张不同尺寸的图片（大/中/小各一张），用 picture 按屏幕宽度切换显示。用Chrome DevTools的移动设备模式切换验证。
2. 进阶应用：用 picture 实现暗黑模式适配——在暗黑模式下显示浅色LOGO，明亮模式下显示深色LOGO。
3. 项目实战：用在线转换工具将一张JPG转换为WebP和AVIF格式，用 picture 实现三层格式降级，并用 DevTools 的 Network 面板验证浏览器实际加载了哪种格式。

接下来学什么？

下一课学习 template 模板元素——HTML里的隐藏模板，需要时才复制出来用。