响应式图片生成器
生成 srcset 图片尺寸，加速网页加载
一次性创建多种宽度的响应式图片。导出常用断点尺寸，直接复制 HTML 或 Next.js 代码到项目中使用。
本地处理 — 无需上传生成响应式图片
上传图片并选择输出尺寸。可选择缩放比例、断点宽度或添加自定义尺寸。
提示：使用高分辨率源图可获得所有尺寸的最佳清晰度。
上传或拖拽图片
支持单张最大 25 MB 的 PNG、JPG、WebP 文件，所有处理均在浏览器本地完成。
拖拽图片到此处或点击浏览
PNG, JPG, WebP
按原始尺寸的倍数生成图片
用于 srcset 的常用视口宽度 — 选择需要的尺寸
5 sizes selected
响应式图片让浏览器根据设备自动选择合适的尺寸，从而提升加载速度和 Core Web Vitals 指标。本工具可从单张源图生成多种宽度变体。
只需上传一次，即可导出 320px 到 1920px 的多种尺寸，并获取可直接使用的 srcset 代码。所有处理均在本地完成，图片隐私无忧。
一次生成多个断点
批量导出 320、640、960、1280、1920px 等常用宽度。
代码片段即拷即用
获取 HTML srcset 或 Next.js Image 组件代码，直接粘贴到项目中。
优化 LCP 指标
为不同设备提供合适尺寸的图片，提升最大内容绘制（LCP）分数。
推荐的响应式断点
覆盖手机、平板和桌面端的常用宽度。
如何生成响应式图片
几步即可创建适用于 srcset 的优化图片变体。
上传源图片
选择高分辨率的 JPG、PNG 或 WebP。源图越大，缩放后的结果越清晰。
添加响应式尺寸
使用多尺寸导出功能添加 320、640、960、1280、1920px 等宽度。
保持纵横比锁定，确保所有尺寸保留原始比例。
处理并下载
点击「调整尺寸」生成所有变体，然后逐个下载或一次性打包下载。
复制 srcset 代码
使用生成的 HTML 或 Next.js 代码片段，将响应式图片添加到页面中。
何时使用响应式图片
首屏大图和横幅
为桌面端提供 1920px 大图，为手机端提供小尺寸文件，大幅减少移动端加载时间。
博客和文章缩略图
生成多种宽度，让各种设备的读者都能快速加载清晰的预览图。
电商商品图片
提供合适尺寸的商品列表图，提升页面速度和转化率。
功能特点
批量多尺寸导出
添加多个宽度，从单张源图一次性生成所有变体。
保持纵横比
高度按比例缩放，图片不会被拉伸或压缩。
即用型代码
直接复制 HTML srcset 或框架专用代码片段到项目中。
隐私与本地处理
所有处理在浏览器中完成，图片永远不会上传到服务器。
响应式图片常见问题
如何编写 sizes 属性？
sizes 属性告诉浏览器图片在各视口宽度下的显示尺寸。例如 `(max-width: 640px) 100vw, 50vw` 表示小屏幕占满视口，大屏幕占一半。根据你的 CSS 布局来设置。
应该使用多少个断点？
5 到 7 个宽度覆盖手机到桌面是不错的默认选择。尺寸越多灵活性越高，但也会增加存储。建议从 320、640、960、1280、1920 开始，根据实际分析数据调整。
2x 视网膜图片怎么处理？
浏览器会根据视口宽度和像素密度从 srcset 中选择。如果最大源图是 1920px，视网膜手机可能会选择 1280px 版本以获得足够像素。如需更清晰的视网膜显示，可提供更大宽度。
这对最大内容绘制（LCP）有什么帮助？
LCP 衡量页面最大可见元素的加载速度。为移动端提供小尺寸图片可减少传输字节并加快首屏渲染，直接提升 Core Web Vitals 分数。
可以配合 Next.js Image 组件使用吗？
可以。如果自托管，将文件放入 /public 目录并相应设置图片路径。Next.js 内置 loader 也可以动态生成尺寸，但预生成可减少服务器负载。
需要转换为 WebP 或 AVIF 吗？
现代格式可进一步减小文件体积。你可以在单独步骤中转换，或配合 squoosh 工具使用。支持新格式的浏览器会加载更小的文件，其他浏览器回退到 JPG/PNG。