HTML5响应式图片核心是<picture>、srcset和sizes：srcset按设备像素比或宽度选图，sizes告知浏览器图片渲染宽度以精准匹配资源，<picture>支持媒体查询实现艺术指导；三者需与CSS容器同步维护。
HTML5 原生支持响应式图片，关键不在“怎么写布局”，而在于用对 <picture>、srcset 和 sizes 这三个机制——它们解决的是「不同设备加载合适尺寸/格式的图片」，不是靠 CSS 宽高撑满容器就能叫响应式。
什么时候该用 <img srcset> 而不是只写 width: 100%
纯 CSS 拉伸图片（比如 max-width: 100%; height: auto）只是让图片“看起来”自适应，但浏览器仍会下载 src 指向的那张原始大图，浪费带宽、拖慢首屏。而 srcset 让浏览器自己选最合适的资源：
-
srcset提供多个分辨率版本（如"small.jpg 1x, medium.jpg 2x"），浏览器按设备像素比选 - 或提供多个宽度描述（如
"small.jpg 400w, medium.jpg 800w, large.jpg 1200w"），配合sizes属性决定加载哪张 -
src是降级兜底，必须保留，否则不支持srcset的老浏览器会空白
<img
src="fallback.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 900px) 50vw,
33vw"
alt="响应式示例">
为什么 <picture> 比 srcset 更适合艺术指导（Art Direction）
当不同屏幕下需要裁剪、缩放比例甚至完全不同的构图（比如手机竖图、桌面横图），<picture> 才是正确解法——它用 <source> 按媒体查询主动切换图片源，srcset 只能被动适配尺寸。
- 每个
<source>可带media、type（如image/webp）、srcset和sizes - 浏览器从上到下匹配第一个满足条件的
<source>，不匹配则回退到内部<img> - 注意：IE 完全不支持
<picture>，需用picturefillpolyfill 或服务端降级
<picture> <source media="(max-width: 768px)" srcset="mobile-crop.jpg"> <source type="image/webp" srcset="desktop.webp"> <img src="desktop.jpg" alt="艺术指导示例"> </picture>
sizes 不是 CSS，它的值直接影响浏览器资源选择逻辑
sizes 是一个字符串，告诉浏览器“这张图在当前页面布局中大概占多宽”，浏览器据此从 srcset 列表里挑最接近的资源。写错会导致加载过大或过小的图：
立即学习“前端免费学习笔记（深入）”；
-
sizes="100vw"表示图宽占视口 100%，适合全宽 banner -
sizes="(min-width: 600px) 50vw, 100vw"表示 ≥600px 时占半屏，否则占满屏 - 千万别写成
sizes="100%"或sizes="100px"——语法错误，浏览器直接忽略整个sizes，退化为仅按像素比选图 - 如果布局用 CSS Grid/Flex 控制图片容器宽度，
sizes必须和实际渲染宽度一致，否则预估失准
真正难的不是写对标签，而是维护多套图片资源并保证 srcset、sizes、CSS 容器三者同步——改了布局忘了调 sizes，或者新增了 3x 屏设备却没加对应 srcset 条目，都会让响应式失效。
