图片降级是通过srcset、sizes、picture、loading等属性协同实现多端适配，关键在控制加载时机、尺寸选择、格式回退和视觉过渡，任一环节失效即导致白屏或布局抖动。
图片降级不是“让图不加载”，而是让图在不同网络、设备、浏览器能力下，始终以最合理的方式呈现——既不能白屏，也不能浪费流量。关键在于控制加载时机、尺寸选择、格式回退和视觉过渡这四个环节。
srcset + sizes 配错会导致高分辨率图被强制加载
只写 srcset 不配 sizes，或 sizes 写成固定值如 "100vw"，浏览器会默认按视口宽度估算渲染宽度，大概率选中 1200w 或 2x 图，哪怕用户用的是 320px 宽的低端手机。
-
sizes必须反映图片**实际渲染宽度**，不是容器宽度；常见写法：sizes="(max-width: 768px) 100vw, 50vw" -
srcset中所有项必须统一用w描述符（如photo-400.jpg 400w），混用x和w会让浏览器忽略整个列表 - 务必保留
src属性指向一个可用 fallback 图（如 CDN 托管的 800w 主图），IE 等旧浏览器会直接加载它
的 顺序和 type 值决定是否真生效
<picture></picture> 是格式与条件降级的唯一标准方案，但它不“自动兜底”：浏览器从上到下匹配 <source></source>，第一个 media 为真且 type 被支持的才会加载；其余全部跳过。写错顺序或拼错 MIME 类型，WebP/AVIF 就永远不出现。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把最高兼容性格式（如 WebP）和最具体条件（如
(min-resolution: 2dppx)）放在最前面 -
type值必须严格匹配文件真实 MIME 类型：image/webp、image/avif，错一个字母就失效 - 底部的
<img>不是“备用”，而是最终渲染载体；它的src必须可访问，否则整个<picture></picture>退化为纯文本
loading="lazy" 白屏的根本原因是 src 不可用
不支持 loading="lazy" 的浏览器（如 IE、旧版 Android WebView）会直接忽略该属性，仅加载 src。如果 src 是空、占位图路径错误、或被 display: none 隐藏，结果就是白屏——不是懒加载失败，是降级链断了。
-
src必须始终指向一个真实可用资源：1px GIF、LQIP 模糊图、或 SSR 渲染出的小图；绝不能是""或"#" -
data-src（用于 JS 懒加载）必须静态写在 HTML 中，不能靠 JS 动态注入；断网时 JS 加载失败，data-src就不存在 - 避免用
display: none包裹图片容器——Safari 和多数 Android WebView 会直接跳过该元素，后续显示也无效
没设宽高或 aspect-ratio 是最容易被忽略的布局抖动源
图片加载前若未预留空间，加载完成瞬间会撑开容器，导致文字跳动、按钮位移、CLS（累积布局偏移）飙升。搜索引擎和 Lighthouse 都会因此扣分，用户直观感受就是“页面在抖”。
- HTML 中显式写
width和height（如width="1200" height="600"），让浏览器预知原始比例 - CSS 中用
width: 100%; height: auto;维持比例，或更稳妥地用aspect-ratio: 2 / 1; - 对响应式图片，
sizes值也要尽量贴近真实渲染宽度，否则预留空间仍不准
真正难的不是写对某一行代码，而是让 src、srcset、sizes、<source></source>、loading、width/height 这些属性在各种失效组合下依然能协同兜底。一旦其中一环写死、留空或依赖 JS 补全，降级就变成了单点故障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
