srcset单独写无效，必须配sizes；因浏览器默认按100vw计算目标宽度，无法感知实际布局宽度，导致始终加载大图，浪费带宽。

只写 img { max-width: 100%; height: auto; } 不算会响应式图片——它只管“不撑破”，不管“少下载”。真正节省带宽、适配高 DPR 屏、应对不同构图的，必须用 srcset + sizes 或 <picture>。

为什么 srcset 单独写没用？必须配 sizes

浏览器看到 srcset="a.jpg 480w, b.jpg 800w, c.jpg 1200w"，但没 sizes 时，默认按 100vw 计算目标宽度。哪怕你页面里这张图只占 33vw（比如三栏网格），它仍可能加载 1200w 的图——因为浏览器不知道你实际要多宽。

• sizes 是字符串，不是 CSS，不支持 calc()，但必须和真实布局断点一致：如果 CSS Grid 断点是 768px，sizes 就写 (max-width: 768px) 100vw, 33.33vw，别写成 767px
• 空格敏感：旧版 Edge 会把 (max-width: 768px) 当作无效语法，整条 sizes 失效；写成 (max-width:768px) 更稳妥
• 混用 w 和 x 描述符（如 "icon.jpg 1x, photo.jpg 800w"）会导致整个 srcset 被忽略，回退到 src

<picture> 什么时候非用不可？

当需要“换图”而不是“换尺寸”时：<picture> 是唯一解。比如手机端裁切人脸特写、桌面端展示完整横幅；或强制用 image/webp 但给不支持的浏览器降级到 image/jpeg。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• <source> 必须放在 <img> 前面，顺序错就完全失效
• <source> 不支持 alt，描述文字全靠最后那个 <img> 的 alt 属性
• 每个 <source> 的 media 断点，必须和实际 CSS 布局断点严格对齐，否则会出现“布局已切三栏，图片还显示着单栏裁切版”的错位
• 示例中 <source type="image/webp" srcset="hero.webp"> 后，必须跟一个同构图的 <img src="hero.jpg" alt="...">，否则 WebP 不支持的设备会空白

常见错误：图片还是加载了大图？先查这三点

加了 srcset 和 sizes 却仍加载大图，大概率不是代码写错，而是环境或逻辑没对齐：

立即学习“前端免费学习笔记（深入）”；

• Chrome DevTools → Network → 刷新页面 → 点开图片请求 → 查 Request Headers 里的 Sec-CH-DPR 和 Sec-CH-Viewport-Width：如果为空，说明服务端或 CDN 清除了这些客户端提示头，浏览器只能保守选最大图
• 检查 viewport meta 标签是否在 <head> 最顶部静态声明：写成 width=375 或动态插入，会导致 iOS Safari 按 980px 解析 DOM，sizes 计算全部错乱
• 父容器用了 flex 但没设 min-width: 0：Flex 项默认有 min-width: auto，会阻止图片缩进窄容器，导致浏览器误判显示宽度，进而选错 srcset 项

真正难的不是写对标签，而是让 sizes 精确反映 CSS 布局中图片的**实际渲染宽度**——这要求你清楚 grid gap、padding、margin 对计算的影响，也要求你验证真机而非仅靠模拟器。很多问题直到安卓低端机上测出白屏或错位才暴露出来。