HTML代码中img属性srcset多分辨率倍率-html教程-PHP中文网

srcset 中的1x/2x/3x仅在无sizes、全用x单位、设备dpr恰好匹配时生效；否则浏览器切换至宽度匹配模式，忽略x描述符。

html代码中img属性srcset多分辨率倍率

srcset 里的 1x、2x、3x 不是“分辨率倍率”的自由设定，而是严格对应设备像素比（DPR）的声明值——浏览器只认这个，不会做换算或插值。

常见现象：明明提供了 logo@2x.jpg 并写进 srcset="logo@1x.jpg 1x, logo@2x.jpg 2x"，但 iPhone 或 MacBook 上仍加载了 1x 版本。

根本原因：你加了 sizes 属性——一旦出现 sizes，浏览器立刻切换成「宽度匹配模式」，完全忽略所有 x 描述符，只看 w 单位项
src 指向的图片被当作 fallback，不是“默认加载”，它只在不支持 srcset 的老浏览器中起作用
设备 DPR 是动态的（比如 Safari 在某些缩放设置下会报告 DPR=1.5），而 1x/2x/3x 是离散匹配，没有 1.5x 就只能退到最近的（通常是 1x）

只有同时满足以下三点，1x/2x/3x 才真正起作用：

没写 sizes 属性（空字符串也不行）
所有 srcset 条目都用 x 单位，不能混用 w（例如 "a.jpg 1x, b.jpg 2x, c.jpg 600w" 会导致整个 srcset 被忽略）
目标设备 DPR 恰好等于某个 x 值（如 DPR=2 → 加载 2x；DPR=2.5 → 通常选 2x，但非强制，取决于浏览器实现）

示例有效写法：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

@@##@@

绝大多数响应式场景（比如 banner 图在手机上占满屏、桌面端固定 800px 宽）本质是「布局驱动」，不是「设备驱动」。硬套 x 反而容易失效。

sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 800px" 告诉浏览器：“这张图在小屏下渲染宽度 ≈ 375px，在中屏下 ≈ 480px，在大屏下就是 800px”
srcset="banner-400.jpg 400w, banner-800.jpg 800w, banner-1200.jpg 1200w" 提供的是图片文件的**固有宽度**（即自然宽，单位 px），不是显示宽
浏览器把 sizes 算出的渲染宽度（比如 375px），和 srcset 中最接近的 w 值（比如 400w）匹配，再结合 DPR 决定是否升档（如 375px × DPR=2 → 需要 ~750px 有效像素 → 选 800w）

工具链（如 sharp）批量生成时容易出错：

导出 @2x 图时，实际像素宽必须是 @1x 的 2 倍（如 logo-24.png 是 24×24，则 logo@2x.png 必须是 48×48，不能是 50×50）
用 w 描述符时，文件名里带 800w 没用，关键是图片本身的 width 属性值（可用 identify -format "%w" img.jpg 验证）
Webpack/Vite 插件若自动注入 srcset，要确认它读取的是真实文件尺寸，而不是根据文件名后缀猜测