img标签本身不支持响应式，必须配合srcset和sizes属性才能实现自动适配；srcset提供多张候选图及其固有宽度（w单位），sizes声明不同断点下图片的占位宽度，二者缺一不可，且需保留src作为兼容兜底。
img 标签本身不支持响应式，必须配合 srcset 和 sizes
单独写 <img src="pic.jpg"> 永远只加载一张图，设备再小也下高清图，浪费带宽。真正的响应式不是靠 CSS 宽度拉伸，而是让浏览器根据屏幕宽度、设备像素比（dpr）自动选最合适的源文件。
关键在两个属性：srcset 提供多张候选图及其宽度描述，sizes 告诉浏览器“这张图在不同断点下会占多宽”。两者缺一不可，否则 srcset 会被忽略。
-
srcset里用w单位（如"pic-400w.jpg 400w, pic-800w.jpg 800w"），表示每张图的**固有宽度**（不是显示宽度） -
sizes是媒体查询表达式 + 宽度值，例如"(max-width: 768px) 100vw, 50vw"，意思是：小屏时占视口全宽，大屏时只占一半 - 必须保留
src属性作为兜底——当浏览器不支持srcset时 fallback 到它
常见错误：写了 srcset 却没生效
最常踩的坑是只写 srcset 忘了 sizes，或者 sizes 写成固定像素（如 sizes="300px"）。浏览器无法推算出图的预期显示宽度，就默认按 1x 屏幕密度选最小图，甚至直接忽略 srcset。
另一个典型问题是图宽标注错：比如实际图片是 1200px 宽，却在 srcset 里写成 1000w，会导致尺寸匹配失准，选图偏小或偏大。
- 验证是否生效：打开 Chrome DevTools → Network → 刷新页面 → 看图片请求的 URL 是否随窗口缩放变化
- 用
devicePixelRatio测试高 DPR 设备：iPhone SE（2x）和 MacBook Pro（2x）会倾向选2x图，前提是srcset里提供了对应w值（如800w对应 400px 显示宽度） - 不要混用
x描述符（如"pic@2x.jpg 2x"）和w描述符——二者互斥，w更推荐，兼容性更好且适配视口布局
配合 <picture></picture> 实现艺术指导（art direction）
当需要为不同屏幕尺寸展示**不同构图**的图（比如桌面端用横图，移动端裁成竖图），img 的 srcset 不够用，必须用 <picture></picture> 包裹多个 <source></source>。
<source></source> 的 media 属性控制断点，srcset 提供该断点下的多分辨率图，最后的 <img> 仍是兜底。
<picture><source media="(max-width: 768px)" srcset="mobile-crop-400w.jpg 400w, mobile-crop-800w.jpg 800w" sizes="100vw"><source media="(min-width: 769px)" srcset="desktop-wide-800w.jpg 800w, desktop-wide-1600w.jpg 1600w" sizes="50vw"> @@##@@ </source></source></picture>
-
<source></source>顺序重要：浏览器从上到下匹配第一个满足media的项，后面的被忽略 - 每个
<source></source>都要配sizes，不能复用或省略 -
<img src="fallback.jpg" alt="描述文字">的src和alt仍必需——<picture></picture>本身不渲染，最终由<img>输出
别忘了 loading="lazy" 和现代格式支持
响应式图常用于长页面的瀑布流，加上 loading="lazy" 能显著减少首屏加载压力。但注意：它和 srcset 无冲突，可共存。
如果服务端支持 WebP/AVIF，优先用它们替换 JPEG——相同质量下体积小 30%~50%，对移动网络友好。但得通过 <source type="image/webp"></source> 来提供，不能只改 srcset 里的文件名。
- WebP 兼容性已很好（Chrome/Firefox/Safari 14+），AVIF 更新但需检查目标用户环境
- 不要删掉 JPEG 备份：
<source type="image/webp"></source>+<source type="image/avif"></source>+ 最后<img> -
loading="lazy"在 Safari 中对非视口内<img src="fallback.jpg">生效，无需额外 polyfill
真正麻烦的是 CMS 输出或第三方图床不给你控制 srcset 的机会——这时候就得用 JS 补救，或者换图床。原生方案再好，也得有输出权限才行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
