只写 max-width: 100% 无法阻止浏览器按 100vw 加载大图，真正有效的是 srcset + sizes 组合：srcset 提供多图源，sizes 告知布局宽度，二者配合才能精准选图。
为什么只写 max-width: 100% 会让手机加载大图
浏览器在解析 HTML 阶段就发起图片请求，此时它根本不知道你后面写的 CSS 会把图片缩成多宽。如果只靠 max-width: 100%，浏览器默认按 100vw（即整个视口宽度）去选图——哪怕你最终在手机上只显示 375px 宽，它也可能拉下一张 1200w 的图，解码后强行压缩，浪费带宽还拖慢首屏。
真正起作用的是 srcset + sizes 这对组合：srcset 告诉“我有哪些图”，sizes 告诉“这张图在当前布局里实际占多宽”，浏览器据此挑最匹配的源。
- 漏掉
sizes，srcset就退化为只看设备像素比（DPR），失去布局感知能力 -
sizes必须覆盖完整视口范围，比如写了(max-width: 480px) 100vw，但没写 481px–768px 区间，那这部分会 fallback 到 100vw - 别混用
w和x描述符，如"a.jpg 400w, b.jpg 2x"，整条srcset会被浏览器忽略
srcset 和 sizes 怎么配才不翻车
先确认图片容器在页面中的实际渲染宽度——不是父容器宽度，而是它最终在屏幕上占多少 CSS 像素。比如一个栅格中占 1/3 宽、断点从 768px 开始，那 sizes 就该是 "(max-width: 768px) 100vw, 33.33vw"，而不是硬写 100vw。
srcset 中的 w 值必须是图片固有宽度（单位 px），不是文件名里的数字，也不是你猜的“适合手机用的尺寸”。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：
sizes="100vw"看似保险，但如果容器有max-width: 600px，桌面端仍会加载远超所需的图 - 移动端常用写法：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" -
src属性不能省，它是不支持srcset的旧浏览器兜底方案
关键内容被裁掉？object-position 比换图更轻量
当图片用 object-fit: cover 填满容器时，object-position 决定“看到哪一块”。默认 center center 在桌面没问题，但在手机竖屏下可能只露出下巴。
不用为每种尺寸单独切图，用媒体查询动态调焦点就行：
- 给
<img>加style="object-fit: cover; object-position: top center;" - 再加媒体查询：
@media (max-width: 768px) { img { object-position: 50% 20%; } }，把焦点上移至面部区域 - 避免用
left/right这类绝对关键词，百分比更可控（20%表示从顶部起算 20% 处为横轴中心） - 注意：
object-fit在父容器没设明确width和height时根本不生效
什么情况下非用 <picture> 不可
<picture> 不是用来替代 <img>+srcset 的，它只解决两个刚需：艺术方向（art direction）和格式降级。
比如手机需要裁人脸特写、桌面要展全景，或者必须优先用 webp 但降级到 jpg，这时 <picture> 是唯一选择。
- 每个
<source>的media和type是 AND 关系，顺序决定匹配优先级：最具体的放最前 - 必须以
<img>结尾，且它必须带src和alt，否则无兜底、无障碍失效 -
<picture>不解决“等比缩放”问题，缩放逻辑仍要靠外层 CSS 控制 - 装饰性图片（如 banner 背景）更适合用 CSS
background-image+ 媒体查询，但关键内容图绝不能这么干
viewport 标签必须放在 <head> 最顶部，静态声明 width=device-width, initial-scale=1.0，否则 sizes 里的 vw 单位直接失效；在线运行环境（如 CodePen）不提供目录结构，测试时别用相对路径 src="images/photo.jpg"，一律用绝对 URL 或 base64 占位。
