提供声明式适配，浏览器依 media、srcset、sizes 和 type 自主选图； 自上而下匹配，media 是 CSS 查询（括号必写），srcset 统一用 w 或 x 描述符，sizes 在 上声明，type 必须为标准 MIME（如 image/webp），错误则跳过；兜底靠 。
为什么直接用 <img alt="HTML5的Picture元素何用_HTML响应式图片难做吗【介绍】" > 不够，非得上 <picture></picture>
因为 <img alt="HTML5的Picture元素何用_HTML响应式图片难做吗【介绍】" > 只能指定一个 src，浏览器没得选——它必须下载那个 URL，哪怕设备像素比是 3x、网络很慢、或屏幕宽度才 400px。而 <picture></picture> 提供的是「声明式适配」：你列出多个候选源，由浏览器按 media、srcset、sizes 和格式支持情况，自主决定加载哪一个。这不是 JS 切换图片，不触发重排，不依赖 JS 执行时机。
<source></source> 的 media 和 srcset 怎么配合生效
浏览器从上到下扫描 <source></source>，遇到第一个匹配 media 查询且该设备支持其 type 的条目，就用它的 srcset 做分辨率切换；不匹配就跳过，继续往下。关键点：
-
media是 CSS 媒体查询，比如(max-width: 768px)，注意括号不能少 -
srcset里可以混用尺寸描述符（1x,2x）和宽度描述符（400w,800w），但同一<source></source>中建议统一用一种 -
sizes必须写在<img alt="HTML5的Picture元素何用_HTML响应式图片难做吗【介绍】" >上，不是<source></source>上；它告诉浏览器“这张图在不同断点下大概占多宽”，影响w描述符的解析 - 最后一个
<source></source>通常不带media，作为兜底（fallback），此时浏览器只看type和格式支持
<picture> <source media="(min-width: 1200px)" srcset="hero-1200w.webp 1x, hero-2400w.webp 2x" type="image/webp"> <source media="(min-width: 768px)" srcset="hero-768w.jpg 1x, hero-1536w.jpg 2x" type="image/jpeg"> <source srcset="hero-small.webp" type="image/webp"> <img src="hero-small.jpg" alt="Hero"> </picture>
WebP / AVIF 图片 fallback 到 JPEG 时，type 属性怎么写才不白费
type 是 MIME 类型，不是文件扩展名。写错就等于告诉浏览器“这个 source 我不支持”，它会直接跳过——哪怕你本地能打开 .webp 文件。常见错误：
- 写成
type="webp"❌（缺image/前缀） - 写成
type="image/webp;"❌（末尾分号非法） - AVIF 写成
image/avif✅，但注意 Safari 16.4+ 才开始支持，旧版 Safari 会跳过该<source></source> - 如果所有
<source></source>都被跳过（比如全写了type="image/webp"但浏览器不支持），最终会退回到<img src alt="HTML5的Picture元素何用_HTML响应式图片难做吗【介绍】" >——所以<img alt="HTML5的Picture元素何用_HTML响应式图片难做吗【介绍】" >的src必须是广泛兼容的格式（如 JPEG 或 PNG）
响应式图片真难做？难点其实不在语法，而在资产管理和测试覆盖
语法本身几行就能写完，麻烦的是背后工作流：
立即学习“前端免费学习笔记（深入）”；
- 你要生成至少 3 倍尺寸（如 400w / 800w / 1200w）+ 多格式（WebP + JPEG）的图片集，手动做不可持续
- CDN 或构建工具（如 Webpack 的
responsive-loader、Vite 插件）能自动化，但配置错一个参数，srcset就生成错位 - 测试不能只看 Chrome Desktop：得真机测 iOS Safari（不支持 AVIF）、低端安卓 WebView（可能不识别
media）、弱网下是否真的加载了小图（用 Chrome DevTools 的 Network → Throttling 验证） -
<picture></picture>不解决懒加载问题，仍需加loading="lazy"，且注意 Safari 对loading的支持晚于其他浏览器
最常被忽略的一点：很多人把 sizes 写成固定值（如 sizes="100vw"），但实际布局中，图片常被 flex 或 grid 限制宽度，这时 sizes 必须反映真实渲染宽度，否则 w 描述符选图会严重偏差。
