image

响应式图片生成器

从一张源图生成多宽度 WebP/JPEG/PNG 资源,并复制 srcset、picture 与 Next.js Image 片段,浏览器本地处理。

将图片拖放到此处

支持 PNG、JPEG、WebP、GIF、BMP。每次处理一张源图。

点击工作区后也可按 ⌘V / Ctrl+V 粘贴。

图片在浏览器本地处理,不会上传到 DevCove 服务器。

输出宽度

用逗号或空格分隔像素宽度,会与上方 preset 合并;仍不会放大源图。

上传、拖放或粘贴源图以开始。

关于此工具

DevCove 响应式图片生成器帮助前端开发者与站长在本地生成响应式图片资源。上传一张源图,选择输出宽度与格式,导出 zip 尺寸文件,并复制带匹配 srcset 描述符的 HTML 或 Next.js 片段。处理全程在浏览器本地完成。

如何使用

当你需要响应式资源与可复制标记时,可按以下步骤使用:

  1. 上传一张源图、拖入工作区,或粘贴截图。
  2. 选择输出宽度(默认 480、768、1024、1280)与 WebP、JPEG 或 PNG。
  3. 点击生成图片,查看每个输出文件的体积与节省比例。
  4. 下载 zip 或单文件,并复制 srcset、picture 或 Next.js 片段。
  5. 复制前可按布局调整 sizes 与 alt 占位文本。

功能特点

面向前端响应式图片工作流:

  • 多宽度导出,且不放大源图。
  • WebP、JPEG、PNG 输出,并检测浏览器编码能力。
  • zip 下载,文件名采用稳定的 {name}-{width}w 规则。
  • 可直接使用的 img srcset、picture 与 Next.js Image 片段。
  • 每个输出文件相对源图的体积与节省对比。
  • 100% 浏览器本地处理。

常见问题

图片会上传吗?

不会。图片仅在浏览器内解码与重编码。

为什么有些宽度被跳过?

工具不会放大源图。宽于源图宽度的 preset 会自动跳过。

该选哪种格式?

WebP 适合网页分发默认选择;照片类无透明可用 JPEG;需要无损边缘用 PNG。

代码片段与导出文件一致吗?

一致。srcset 使用 zip 中实际文件名与宽度描述符。

能批量处理多张源图吗?

首版每次仅支持一张源图。

与图片压缩工具有何不同?

压缩工具侧重缩小体积;本工具生成多宽度响应式资源并输出 srcset 标记。