不用javascript，srcset+sizes即可实现浏览器自动选图；picture仅在需艺术裁剪或格式降级时必要。最常见加载同一张图的原因是漏写sizes或其值不匹配实际布局宽度，导致浏览器默认按100vw计算而选错资源。
直接结论：不用 JavaScript 切分辨率，靠 srcset + sizes 就能实现浏览器自动选图；<picture></picture> 仅在需要艺术裁剪（比如手机版只留人脸、桌面版展示全景）或强制格式降级（WebP → JPG）时才必要。
为什么写了 srcset 还是加载同一张图
最常见原因是漏了 sizes，或者 sizes 写得不匹配实际布局宽度。浏览器没 sizes 就默认按 100vw 算——哪怕你图片只占卡片一半宽，它也去加载 1200w 的图。
-
sizes必须写，且要反映图片在页面中真实的 CSS 渲染宽度，比如：sizes="(max-width: 768px) 100vw, 33vw" - 如果图片在桌面端固定显示为 400px 宽，就该写：
sizes="(min-width: 768px) 400px, 100vw"，不能写成400w（单位错）或400px（没媒体条件） -
srcset里混用w和x描述符会触发解析失败，浏览器可能退回到第一个源 - Chrome DevTools → Network 面板里看实际加载的图名和 “Size” 列，比肉眼判断清晰度更可靠
什么时候必须用 而不是纯 srcset
当你要换的是构图，不是尺寸——比如移动端竖屏只展示产品特写，桌面横屏展示带场景的完整画面；或者你想优先用 image/avif，但 Safari 13 及更早版本不支持，必须 fallback 到 JPG。
-
<source></source>按顺序匹配，第一个media或type满足即停，后面的不执行 -
media是完整 CSS 媒体查询，必须带括号和单位，比如(max-width: 480px)，不能只写480px -
type="image/webp"失效常见原因：服务器返回的Content-Type不是image/webp，或浏览器根本不支持该 MIME 类型（如旧版 Safari） - 末尾的
<img src="fallback.jpg" alt="...">不可省略，它是所有不匹配<source></source>的兜底，不是装饰
如何验证 x 描述符是否真起作用
2x 表示设备像素比（DPR），不是“物理分辨率 2K”，也不是“CSS 宽度翻倍”。它只在没有 sizes、且图片渲染宽度 ≈ 视口宽度时生效——这种场景极少，基本只用于全屏 banner 或简单 logo。
- 写了
sizes后，srcset="a.jpg 1x, b.jpg 2x"会被忽略；必须改用w描述符：srcset="a.jpg 400w, b.jpg 800w" - 在 Pixel 2 模拟器（DPR=2.625）下仍加载
400w图？说明sizes计算出的目标宽度太小，比如sizes="200px"，浏览器就只找最接近 200px 的源 - 想确认当前加载哪张图？控制台执行
document.querySelector('img').currentSrc，实时返回结果
真正容易被忽略的点：图片文件本身质量。再精准的 srcset 也救不了压缩过度的 800w 图——高 DPR 屏上照样发虚。准备资源时，2x 图的原始像素应至少是目标渲染宽度 × 2，别拿 800w 图硬撑 1200px 容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
