🖼
响应式图片 srcset 生成器
根据多档宽度自动生成 <img> 的 srcset 与 sizes，让浏览器按屏幕挑选最合适的图片。纯前端生成，不上传图片。
本地处理 · 不上传
加载工具中…
相关：srcset生成 · 响应式图片 · sizes属性 · img srcset · 自适应图片
响应式图片 srcset 生成器帮你为同一张图片的多个尺寸版本，快速拼出标准的 srcset 与 sizes 属性。填写文件名模板和一组宽度，就能得到可直接粘进 HTML 的 <img> 标签，让浏览器按设备屏幕和 DPR 自动挑选最合适的图片，既省流量又保证清晰。所有内容在你的浏览器本地生成，不会上传任何图片或数据。
使用步骤
- 在文件名模板里用 {w} 占位宽度，例如 /img/photo-{w}.jpg
- 填写一组宽度（px），用逗号分隔，如 320, 640, 960, 1280
- 按版式设置 sizes，例如 (max-width: 768px) 100vw, 50vw
- 填写 alt 文本，复制生成好的 srcset 或完整 <img> 标签
使用场景
- 为博客或电商详情页配图，做到手机、平板、桌面各取所需
- 配合图片 CDN 的按宽度裁剪参数，批量生成多档地址
- 做性能优化时补齐 srcset/sizes，改善 LCP 与流量占用
- 团队里统一响应式图片写法，避免手写出错
小贴士
- srcset 用宽度描述符（如 640w）时，必须同时提供 sizes，浏览器才能正确选图
- 模板不含 {w} 时会自动在扩展名前插入 -宽度w，例如 photo.jpg → photo-640w.jpg
- src 兜底用最大一档，老浏览器不支持 srcset 时仍能显示
- 加上 loading="lazy" 让首屏外图片延迟加载
常见问题
srcset 里的 640w 是什么意思？
w 是宽度描述符，表示这张图片的真实像素宽度是 640px。浏览器结合 sizes 声明的显示宽度和屏幕 DPR，挑选最合适的一档，而不是按显示宽度死板匹配。
必须写 sizes 吗？
使用 w 宽度描述符时必须写 sizes，否则浏览器默认按 100vw 估算，可能选到过大的图。sizes 用 CSS 媒体条件描述图片在不同视口下的显示宽度。
会上传我的图片吗？
不会。本工具只做字符串拼接，生成 srcset 文本和标签，全过程在浏览器本地完成，不涉及任何图片上传或网络请求。
响应式图片 srcset 生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用响应式图片 srcset 生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。