srcset 生成器 — 响应式图片多尺寸一键出
上传一张图,自动生成多档宽度的文件并拼好 srcset / sizes / picture 代码:断点按文件体积增量智能筛选(不做无意义的等分),支持转 WebP,多尺寸打包 ZIP,另附 Next.js / Nuxt 写法。浏览器本地处理、图片不上传。支持电脑、平板、手机浏览器。
响应式图片就是让手机下小图、桌面下大图:HTML 的 srcset 列出多档宽度的文件,浏览器按视口和屏幕像素密度自己挑。本工具把繁琐的部分全自动化——上传原图后按常用宽度档(320 到 2560)用 Canvas 本地生成各尺寸文件,并做一步很多工具不做的筛选:相邻档如果体积只差不到 20%,那档就被跳过,因为它省不了多少流量却多占一个缓存位;断点应该按「文件大小增量」挑,而不是宽度等分。选定后直接给出四种即用代码:img srcset、picture、Next.js、Nuxt,sizes 属性带默认值和注释说明,多尺寸文件一键打包 ZIP。全程浏览器本地处理,图片不上传。
什么时候需要
网页性能优化
首屏大图按视口下发,移动端流量立减。
静态站 / 博客
没有图片 CDN 的站点,预生成多尺寸直接引用。
交付切图
一张设计图出全套尺寸 + 代码,贴上就能用。
生成策略说明
- 断点按体积增量筛选:省不了流量的档自动跳过
- srcset / sizes / picture / Next / Nuxt 四种代码即拷即用
- 可一键转 WebP,多尺寸 ZIP 打包
- sizes 的默认值只是示例,务必按你的真实布局修改
- 放大无意义:只生成不超过原图宽度的档
- 有图片 CDN(如 Cloudinary / 又拍)时优先用 CDN 动态裁切
srcset 生成常见问题
srcset 告诉浏览器「有哪些宽度档可选」(如 640w / 1280w);sizes 告诉浏览器「这张图在页面上实际占多宽」(如移动端满屏、桌面固定 768px)。浏览器结合两者与设备像素密度挑最合适的文件。sizes 写错是响应式图片最常见的翻车点,生成的代码里已附注释示例。
因为它与相邻档的文件体积差不到 20%——多这一档几乎省不了流量,却让浏览器多一个候选、缓存多一份文件。断点按体积增量挑(而非宽度等分)是响应式图片的最佳实践,这正是本工具与「无脑出 5 档」工具的差别。
面向现代浏览器直接选 WebP:体积通常比 JPG 小 25%-35%,支持度已超 97%。需要兼容极老浏览器时,用 picture 写法把 WebP 放 source、原格式放 img 兜底——或直接用同原格式最稳。
不会。多尺寸缩放和编码全部用浏览器 Canvas 在本地完成,ZIP 也是本地打包直接下载,不联网、不上传、不存储。