srcset与sizes必须成对使用且精准匹配：srcset提供带w描述符的多宽图片源，sizes用媒体查询声明各断点下图片实际渲染宽度（如"(max-width:768px)100vw,50vw"），缺一或错配将导致浏览器回退100vw滥用大图。
img 的 srcset 和 sizes 属性怎么配才不白写
浏览器不会自动“降级”到低分辨率图，除非你明确告诉它哪些资源对应哪些条件。只写 srcset 不配 sizes，或者 sizes 写成固定值（比如 "100vw"），srcset 里的高 DPR 图片大概率压根不会被加载——尤其在桌面端缩放或响应式布局里。
实操建议：
-
sizes必须反映图片在页面中的**实际渲染宽度**（不是容器宽度），常见写法：sizes="(max-width: 768px) 100vw, 50vw"表示小屏占满视口、大屏占半宽 -
srcset中每个候选图后面必须跟宽度描述符（w）或像素密度描述符（x），但二者不能混用；推荐统一用w，更可控 - 生成的图片尺寸建议按 1x/1.5x/2x/3x 梯度提供，例如：
photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w - 别忘了 fallback：
src属性仍需保留一个基础图（如 800w），确保不支持srcset的老浏览器也能显示
picture 元素里 source 的 media 和 type 怎么选才真生效
<picture></picture> 不是“多图任选”，而是**严格匹配优先级**：从上到下依次检查 <source></source>，第一个 media 为真且 type 被浏览器支持的才会加载；其余全部忽略。很多人写了 WebP 但没加 type="image/webp"，或者 media 条件写反了，结果 WebP 压根不触发。
实操建议：
-
<source></source>顺序很重要：把最具体的条件（如media="(min-resolution: 2dppx)"）或最高兼容性格式（WebP）放在前面 -
type值必须和实际文件 MIME 类型一致，WebP 是"image/webp"，AVIF 是"image/avif"，错一个字母都不认 -
media推荐用视口宽度判断（"(max-width: 768px)"），少用resolution，后者在 Safari 和部分安卓 WebView 里行为不一致 - 务必保留底部的
<img>标签——它既是 fallback，也是语义必需节点；<picture></picture>本身不渲染内容
如何检测浏览器是否真的用了降级图
光看页面显示正常没用。Chrome DevTools 的 Network 面板里，Img 类型请求的 Size 列显示的是解码后尺寸，不是文件体积；真正要看的是「实际加载了哪个 URL」以及「响应头里的 Content-Length」。
实操建议：
- 在 Network 面板开启「Disable cache」，并勾选「Large rows」，方便看清每张图的完整请求 URL 和 size
- 用设备模拟器切换不同 DPR（如 iPhone 12 是 3x，Mac Retina 是 2x），观察加载的图是否随 DPR 变化；如果始终加载同一张，说明
srcset或sizes配置失效 - 在无图模式下（Chrome 的 Rendering → Emulate CSS media → print），验证
<picture></picture>是否回退到<img src>—— 这是降级链的最后一环 - 不要依赖控制台打印
img.naturalWidth判断：它返回的是解码后尺寸，和加载源无关
服务端降级（如 Nginx）和客户端降级能混用吗
可以，但容易冲突。比如 Nginx 根据 Accept 头重写图片路径为 WebP，同时前端又用 <picture></picture> 做一次 WebP 判断，结果可能重复压缩、404，或绕过 CDN 缓存。
实操建议：
- 二选一更稳妥：要么全由服务端处理（Nginx +
map $http_accept $webp_suffix），前端只写普通<img src="xxx.jpg">；要么全由前端控制（<picture></picture>），服务端不做格式干预 - 如果必须共存，确保服务端只处理
src（非srcset），且重写规则加if ($args !~ "webp")类条件，避免干扰前端逻辑 - CDN（如 Cloudflare）的“Polish”或“WebP Rewrite”功能会直接替换响应体，可能破坏
<picture></picture>的type匹配，上线前务必关掉测试
srcset、sizes、<source></source> 这些属性明确定义的决策树。漏掉任意一环，或者值写得和实际布局/设备不匹配，整套机制就卡在第一层。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
