srcset降级需三者协同：sizes准确声明渲染宽度、srcset统一用w或x描述符、src提供可靠兜底；缺一不可，否则高分辨率图误载或降级失效。

srcset 降级不是“多写几个图就自动选对”，浏览器选哪张，取决于 sizes 告诉它“这张图会占多宽”、srcset 里写的宽度是否真实、以及 src 是否始终可用——三者缺一不可。

srcset + sizes 配错直接导致高分辨率图强制加载

只写 srcset 不配 sizes，或把 sizes 写成固定值如 "100vw"，浏览器会按视口宽度估算渲染宽度，大概率选中 1200w 或 2x 图，哪怕用户用的是 320px 宽的低端手机。

• sizes 必须反映图片**实际渲染宽度**，不是容器 CSS 宽度；常见写法：sizes="(max-width: 768px) 100vw, 50vw"
• srcset 中所有项必须统一用 w 描述符（如 photo-400.jpg 400w），混用 x 和 w 会让浏览器忽略整个列表
• 用 Chrome DevTools Network 面板勾选「Disable cache」验证实际加载源，右键 →「Copy response」确认返回尺寸是否匹配 srcset 中声明的宽度

src 属性是降级链的最后保险，不能空、不能假

src 不是可选项，它是所有不支持 srcset 的旧浏览器（如 IE11）唯一能识别的入口。一旦它失效，整条降级链就断了。

• 必须指向一个静态、高可用、HTTP 200 的资源：推荐 CDN 托管的 1×1 透明 GIF（src="https://cdn.example.com/i/px.gif"）或内联 SVG 占位图
• 禁止写成 src=""、src="#"、src="broken.jpg"（且该文件实际不存在）
• 避免带查询参数的动态地址（如 ?format=webp），CDN 缓存策略可能误判，后端挂掉时直接 500

宽高比不一致会引发布局抖动，和清晰度无关

不同 srcset 图片原始像素尺寸不一致，会导致浏览器切换时重算 intrinsic 尺寸，触发布局重排——文字跳动、按钮位移、CLS 飙升。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 用命令行验证：file logo.webp 和 file logo.jpg 输出必须都明确写着相同宽高（如 800 x 450）
• 若 JPEG 显示 data 或 no dimensions，说明 EXIF 被清空，需用 exiftool -ImageWidth=800 -ImageHeight=450 logo.jpg 强制写入
• 终极兜底：放弃依赖图片自身尺寸，用 style="aspect-ratio: 16/9" 或 width/height 属性显式声明

混用 w 和 x 描述符是静默失效的高发原因

同一组 srcset 中混用 w（适配不同视口宽度）和 x（适配不同设备像素比），浏览器会直接忽略整个属性，退化为只加载 src。

• 响应式场景优先用 w：如 photo-320.jpg 320w, photo-768.jpg 768w, photo-1200.jpg 1200w
• 多清晰度场景才用 x：如 photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x，且必须配合固定 width/height 使用
• 服务端可配合 Vary: DPR 响应头，让 CDN 根据 Sec-CH-DPR 请求头直接返回匹配 DPR 的图，减少客户端缩放

最容易被忽略的是：所有 srcset 图片的真实像素宽度必须和描述符数值严丝合缝——差 1px，sizes 算出的目标尺寸就会偏移，浏览器就可能选错图。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！