电商图片降级必须用<picture>+<img>兜底、配Vary: Accept响应头、多尺寸JPG fallback、JS懒加载同步更新所有src，任一环节缺失都会导致空白或性能恶化。
电商网站图片降级不是“备用图随便写一个”，而是必须让老浏览器能显示、CDN能识别、用户不看到空白——漏掉 Vary: Accept 响应头或没写 <img> 兜底，就等于没降级。
WebP/AVIF 降级必须用 <picture>，不能只改 src
直接写 <img src="product.webp"> 在 Safari 13 之前、IE 全系、部分安卓 WebView 里会彻底空白。浏览器不识别格式，也不触发 fallback。
-
<picture>是唯一能按type和media双条件顺序匹配的机制，<source type="image/webp">不匹配就跳过，最终落到<img>标签 - 兜底的
<img>必须存在且带src，不能省略，也不能只靠 JS 动态插入——JS 执行前请求早已发出 - 常见错误：把
<source type="image/webp" srcset="a.webp">和<source type="image/jpeg" srcset="a.jpg">并列，但没写最后的<img src="a.jpg">，导致 Safari 旧版白屏
CDN 自动转码降级要配 Vary: Accept 响应头
Cloudflare Polish、CloudFront Lambda@Edge 这类服务能自动返回 WebP，但若响应头缺 Vary: Accept，中间代理（如运营商缓存）可能把 WebP 版本缓存下来，再返回给不支持 WebP 的设备，结果就是一片空白。
- 确认 CDN 返回的响应中包含
Vary: Accept，而不是只写Vary: User-Agent或干脆没有 - 如果无法控制响应头（如某些轻量 CDN），宁可不用自动转码，老老实实走
<picture>多图方案 - 测试方法：用 Safari 12 或 IE11 访问，打开 DevTools → Network → 看图片响应头和渲染结果
懒加载 + 降级组合时，loading="lazy" 不能替代 data-src 控制逻辑
原生 loading="lazy" 对 <picture> 内部的 <source> 不生效，它只作用于最外层的 <img>；而且在 transform 容器或 display: none 区域里会直接失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法：首屏图用真实
src，非首屏统一用data-src存 WebP 路径、data-src-jpg存 JPG 路径，由 JS 控制替换时机 - 替换时必须同时更新
<img>的src和所有<source>的srcset，否则降级链断裂 - 别忘了加
width/height或aspect-ratio，否则懒加载触发瞬间图片撑开，布局抖动
fallback 图片也要参与响应式，不能只写一个固定尺寸
很多人以为 “WebP 有 srcset 就够了，JPG 版随便给个 800px 的就行”，结果移动端加载 800px JPG，体积是 400px 版本的 3 倍，降级反而更慢。
- JPG 版本同样需要生成多尺寸：
product-400.jpg、product-800.jpg、product-1200.jpg -
<img src="product-800.jpg" srcset="product-400.jpg 400w, product-800.jpg 800w, product-1200.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw">必须和上面<source>的逻辑对齐 - 构建时建议用脚本统一批量生成多格式+多尺寸，人工维护极易漏掉某条
srcset条目
真正容易被忽略的是：降级不是“有备选”就行，而是整个链路——从 HTML 结构、HTTP 响应头、构建产出到 JS 加载逻辑——都得对齐。任意一环断掉，用户看到的就是空白或巨慢的 JPG。
