光靠 width: 100% 或 object-fit 拉伸一张图不算响应式图片设计，必须配合 srcset + sizes 实现按需加载合适尺寸，并用 picture 元素支持不同屏幕的构图切换。
直接说结论：光靠 width: 100% 或 object-fit 拉伸一张图，根本不算响应式图片设计——它只解决了“显示”，没解决“加载合适尺寸”和“适配构图”这两个关键问题。
img + max-width: 100% 是起点，不是终点
很多人以为加了 max-width: 100% 和 height: auto 就万事大吉，但实际场景中常遇到：
- 小屏加载了 2MB 的桌面图，首屏卡顿
- 图片在 flex 容器里被压缩变形（
height: auto失效） - Retina 屏显示模糊，因为浏览器默认选了 1x 版本
必须配合容器控制：display: block 消除行内元素间隙；父容器禁用固定像素宽（如 width: 800px），改用 max-width: 100% 或 grid/flex 布局；若需裁剪，优先用 object-fit: cover 而非 background-image。
srcset + sizes 必须成对出现，否则形同虚设
srcset 单独写只是“提供选项”，sizes 才是告诉浏览器“这张图实际占多宽”。不配 sizes，浏览器会按 100vw 推算，导致小屏也加载大图。
-
sizes值必须匹配真实布局断点，比如卡片宽度在移动端是100vw，平板是50vw，桌面是33vw -
srcset中的w描述符要覆盖主流设备逻辑宽度（推荐步进：480w、768w、1200w、1920w） - 避免混用
w和x描述符——同一srcset里要么全用w，要么全用x
示例：<img src="fallback.jpg" srcset="img-480w.jpg 480w, img-768w.jpg 768w" sizes="(max-width: 768px) 100vw, 50vw" alt="产品图">
picture 元素用于真正需要“换构图”的场景
当移动端要裁掉背景突出人脸、桌面端展示全景时，<picture></picture> 不是可选项，而是必需项。常见误区是把它当成 srcset 的替代品——其实它解决的是完全不同的问题。
- 每个
<source></source>必须带media或type，且顺序不能错：浏览器从上到下匹配，第一个满足条件的生效 - 现代格式（如
webp）应放在jpeg/png之前，并用type明确声明 -
<img>标签必须存在且写在最后，它是所有不支持<picture></picture>的浏览器的唯一 fallback
错误写法：<picture><img src="default.jpg"><source srcset="mobile.jpg" media="(max-width:768px)"></source></picture>（<img> 必须在最后）
容易被忽略的细节：loading、alt、DPR 验证
视觉效果好不好，一半在渲染，一半在加载体验和可访问性。这些点常被跳过，但直接影响用户感知：
-
loading="lazy"要加，但首屏关键图建议去掉，避免滚动前就触发加载 -
alt不是摆设——它影响 SEO、屏幕阅读器体验，也是图片加载失败时的唯一提示 - 高 DPR 设备（如 iPhone 14 Pro）是否真加载了
2x图？用 Chrome DevTools → Network → 筛选Img，看实际请求的 URL 和 size - WebP/AVIF 图片必须有 JPEG/PNG fallback，且
<source></source>的type值要严格匹配 MIME 类型（image/webp，不是webp）
最常漏掉的一环：没验证 sizes 是否与真实布局一致——如果 CSS 里用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，那 sizes 就不能硬写 33vw，得按最小项宽度反推。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
