+ srcset + sizes 可纯 HTML 实现响应式图片：srcset 提供多分辨率资源（如 400w, 800w），sizes 告知浏览器各断点下图片布局宽度（如 (max-width:768px) 100vw, 50vw），二者协同使浏览器精准选图；必须保留 作为降级兜底，WebP/AVIF 格式需用 显式声明。
用 <picture></picture> + srcset 一步到位
不需要 JS，不引入框架，纯 HTML 就能适配不同屏幕密度和视口宽度。关键不是“写得少”，而是把 srcset 和 sizes 配合好，浏览器自己选图。
常见错误是只写 srcset 不写 sizes，结果高 DPR 设备（比如 iPhone）仍加载小图；或者把 width 值写成实际像素（如 400w），但没告诉浏览器“这张图在页面里占多宽”，导致选择失准。
-
srcset列出多个资源及其固有宽度（单位必须是w），例如"photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" -
sizes告诉浏览器“这张图在不同断点下占视口的多少”，例如"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" - 始终保留一个
src作为降级（老浏览器或 JS 关闭时兜底），值建议设为中等分辨率图
懒加载 + 响应式不能只靠 loading="lazy"
loading="lazy" 只控制加载时机，不参与响应式决策。它和 srcset 完全正交，可以共存，但别误以为加了 lazy 就不用管 sizes 了。
真正容易被忽略的是：如果图片在首屏，loading="lazy" 会被浏览器自动忽略（规范要求），所以首屏图的响应式质量直接决定 LCP。此时 sizes 的准确性比 lazy 更关键。
立即学习“前端免费学习笔记（深入）”；
- 首屏图务必写准
sizes，例如全宽轮播图就用sizes="100vw" - 非首屏图可叠加
loading="lazy"，但依然要配全srcset+sizes - 不要用
background-image替代<img alt="如何用最少代码实现HTML响应式图片" >来“简化”——CSS 背景图无法被srcset管理，也不支持alt和语义化
WebP / AVIF 格式必须用 <picture></picture> 包裹
想让现代浏览器优先加载 WebP 或 AVIF，而旧浏览器回退到 JPEG，就不能只靠 srcset——它只选尺寸，不选格式。必须用 <picture></picture> 的 <source></source> 显式声明 type。
常见错误是把所有格式塞进一个 srcset，或者漏写 <img alt="如何用最少代码实现HTML响应式图片" > 作为最终 fallback（没有它，不支持 <picture></picture> 的浏览器会显示空白）。
- 每个
<source></source>写清楚type和srcset，例如<source type="image/avif" srcset="photo.avif 400w, photo@2x.avif 800w" sizes="100vw"></source> -
<img alt="如何用最少代码实现HTML响应式图片" >标签放在<picture></picture>最后，带完整的src、srcset、sizes和alt - AVIF 在 Safari 16.4+、Chrome 109+ 才稳定支持，上线前用
caniuse查兼容性
最简可行代码不是删功能，而是砍冗余：去掉 JS 加载器、去掉 CSS 媒体查询控制宽高、去掉无意义的 width/height 属性（它们不参与响应式计算）。核心就三样：srcset 描述资源集，sizes 描述布局意图，<picture></picture> 描述格式优先级。其余都是干扰项。
