picture标签不是升级开关，旧站优化应优先解决尺寸冗余和格式陈旧问题；仅当存在明确art-direction需求（如移动端裁剪人脸）时才需使用，否则srcset+sizes更轻量、兼容性更好。
先判断：你真需要 吗？
90% 的旧站图片问题其实出在尺寸冗余和格式陈旧，srcset + sizes 就够了——它比 picture 更轻、兼容性更好、构建更简单。
- 如果你只是想让 Retina 屏加载 @2x 图、小屏加载窄图：直接改
<img src="a.jpg" srcset="a-400w.jpg 400w, a-800w.jpg 800w" sizes="..."> - 如果你要为手机换一张构图完全不同的图（比如 banner 主视觉），才轮到
picture - 旧站用的是固定宽高
<img style="max-width:90%" style="max-width:90%">？别急着加picture，先补alt和响应式 CSS，再考虑资源切分
重构时 顺序写错，高 DPR 设备反而加载低清图
浏览器从上到下匹配 <source></source>，遇到第一个满足条件的就停，不会继续看后面的。所以最具体、限制最强的规则必须放最前面。
- 错误写法：
<source media="(max-width: 768px)" srcset="m.jpg 1x, m@2x.jpg 2x"></source>放在前面，<source media="(min-width: 768px) and (min-resolution: 2dppx)" srcset="d@2x.jpg 2x"></source>放后面 → 手机横屏（768px 宽 + 2x DPR）会命中第一条，加载 m.jpg，跳过第二条 - 正确顺序：把带
min-resolution或复合条件的<source></source>放最前，再是纯宽度断点，<img>必须在最后且带src - IE8–10 不识别
<source></source>，但能渲染<img>—— 所以<img src>不能是占位图，得是可用 fallback
type 属性不是“自动降级开关”，服务器 Content-Type 错一个字符就失效
写 type="image/webp" 没用，如果 Nginx 返回的响应头是 Content-Type: image/jpg 或 text/plain，Chrome 会标为 blocked:mime-type 并跳过该 <source></source>。
- 验证方式：Network 面板里点开请求，看 Response Headers 中的
Content-Type是否与type值**完全一致**（大小写、拼写、空格都不能错） - WebP 回退必须配两套路径：
<source type="image/webp" srcset="a.webp"></source>+<source type="image/jpeg" srcset="a.jpg"></source>，不能只写一个type然后指望浏览器“猜” - 旧站用 Apache？确认
mod_mime已启用，并在.htaccess或配置中加AddType image/webp .webp
不支持 picture 的老浏览器，光靠 html5shiv 不够
IE8–10 不解析 <picture></picture>，html5shiv 只让它变成可识别的 DOM 节点，但默认是 display: inline，会导致图片塌陷、margin 失效、父容器高度为 0。
- 必须在引入 html5shiv 后，加这段 CSS：
picture { display: block; } - 别用
document.createElement('picture')手动初始化——IE8–9 需要 html5shiv 的完整注入流程，单独调用无效 - 如果项目已用
core-js或其他 polyfill，检查全局HTMLPictureElement是否被污染；重复 patch 可能导致picturefill的 onload 回调丢失 - IE11 原生支持
<picture></picture>，但srcset的w描述符支持不全，仍建议用picturefill@4.3.2（最后兼容 IE9+ 的稳定版）保底
sizes 值和实际 CSS 布局对不上。先跑通一张图的完整链路（从构建生成 → 服务响应 → 浏览器匹配 → Network 验证），再批量推进。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
