前端工程师必会的HTML响应式图片代码-html教程-PHP中文网

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

前端工程师必会的html响应式图片代码

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

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

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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

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

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

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