直接结论：优先用w单位配合sizes而非x单位，因现代响应式布局下图片宽度由CSS控制，x描述符易失效；仅当图片尺寸固定（如logo、图标）时x才可靠，且必须配src作fallback。
直接结论：用 srcset + sizes 配合 src fallback，而不是靠 CSS 缩放或 JS 切换——浏览器自己选图，你只管喂对数据。
为什么 srcset 里写 1x/2x 大概率不生效？
因为现代页面几乎都用了 Flex/Grid/百分比布局，图片宽度由 CSS 控制，不是固定占满视口。此时浏览器会忽略 1x、2x，只认 w 单位，且必须配 sizes 才能触发宽度匹配逻辑。
- 错例：
srcset="logo@1x.png 1x, logo@2x.png 2x"—— 没sizes，小屏也加载@2x，纯浪费 - 对例：
srcset="logo-320w.png 320w, logo-640w.png 640w, logo-960w.png 960w"+sizes="(max-width: 480px) 100vw, 480px" -
sizes值必须是真实渲染宽度（如480px或50vw），不能写50%或rem
如何让高清图真正在 Retina 屏显示，低清图在普通屏加载？
只有当图片容器宽度固定（比如 logo 总是 200px 宽），且你明确知道它不会随布局变化时，x 描述符才可靠。否则优先用 w + sizes。
- 适用场景：导航栏 logo、图标、头像等尺寸稳定区域
- 写法：
<img src="logo-200.png" srcset="logo-200.png 1x, logo-400.png 2x" alt="logo"> - 关键点：
src必须指向 1x 版本，它是所有不支持srcset的老浏览器唯一入口 - 别把
src设成logo-400.png，否则 IE 和旧 Android WebView 会直接拉伸模糊
怎么验证浏览器到底加载了哪张图？
别看页面“看起来清晰”，要查 Network 面板里实际发出的请求。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Network → 过滤
img - 勾选
Disable cache（Chrome）或关闭缓存（Safari） - 切换设备模拟（如 iPhone SE、MacBook Pro），刷新页面
- 观察加载的是
photo-400w.jpg还是photo-1200w.jpg；如果始终只加载src指向的图，检查控制台是否报Failed to parse 'srcset' value - 常见解析失败原因：逗号后多空格、
sizes漏单位（如写成sizes="50"而非sizes="50vw"）
高清图体积大，怎么平衡清晰度和加载速度？
不是分辨率越高越好，重点是「刚好够用」+「格式升级」。
- 用 WebP 或 AVIF 替代 JPG：同清晰度下体积可降 40%~60%，现代浏览器已普遍支持
-
srcset中不要塞 4K 图源，除非你确认桌面端用户真需要——多数 banner 在 1200w 就已足够 - 配合
width和heightHTML 属性预留空间，避免布局抖动（如原图 1200×800，就写width="1200" height="800"） - CSS 中用
max-width: 100%; height: auto;，别用width: 300px; height: 200px;强制缩放，那会毁掉清晰度
最容易被忽略的一点：sizes 不是你“希望”图片多宽，而是它“实际渲染”多宽——必须和 CSS 布局严格一致，差一个像素，浏览器就可能选错图源。
