图片批量处理三件套
一、场景:上线前的图片资产整理
设计稿拿到手,图片资产往往又大又杂:几 MB 的 banner 原图、需要转成多尺寸的 favicon、要打包给客户预览的产品图。本站的三个图像工具覆盖了"压缩 → 归档 → 图标化"的完整链路,且全部在浏览器本地完成,图片不会上传到任何服务器。
二、第一步:批量压缩
打开 图片压缩,把整批图片拖入上传区。关键参数的选择:
- 格式:照片类优先选 WebP(同质量下比 JPEG 小 25-35%);需要绝对兼容老环境时用 JPEG;截图与线条图选 PNG 无损;
- 质量:网页展示用途 70-80 足够;肉眼几乎无差别,体积却能降一半以上;若图片里有大量文字,建议不低于 80 以免字迹发虚;
- 批量:全部文件会按同一参数处理,输出区显示每张图的压缩前后对比,可单独剔除效果不理想的再整体下载。
判断压缩是否过度:放大到 200% 看色块边界是否出现"毛边",文字边缘是否模糊。
三、第二步:打包成 PDF 交付
需要给非技术人员交付一整套视觉稿时,PDF 比 zip 里的散图友好得多。打开 图片转 PDF:
- 按顺序拖入图片(支持拖拽调整顺序);
- 页面尺寸可选"自适应图片"或统一为 A4;给客户看选 A4 纵向,截图文档选自适应避免留白;
- 页边距按需设置,预览区实时反映排版效果;
- 点击生成,浏览器本地合成 PDF,零上传。
四、第三步:生成多尺寸 ICO 图标
favicon 需要的 .ico 文件本质是多张不同尺寸 PNG 的合集。打开 ICO 图标,上传 512×512 以上的正方形源图,工具会生成包含 16/32/48/64/128/256 多档尺寸的单一 ico 文件,浏览器会按场景自动选用合适的档位。
源图要求:正方形、背景透明(PNG)、主体占满画布。logo 带文字时要确保 16px 下仍可辨认,必要时为小尺寸单独设计简化版。
五、SVG 资产的补充处理
矢量图标(图标类、logo)不必走位图流程,直接用 SVG 优化 清理冗余节点、压缩体积,并生成 Data URI 形式直接内嵌进 CSS,减少一次网络请求。
六、常见问题
- 压缩后体积反而变大:小尺寸 PNG 转 WebP 可能出现,低于 10KB 的图直接用原图更划算;
- PDF 打开图片模糊:源图分辨率不足,PDF 不会放大原图;确保源图长边至少 1000px;
- ICO 在浏览器标签页不更新:缓存问题,强刷(Ctrl+F5)或给链接加版本号查询参数。
七、小结
整理一套"压缩看质量、交付用 PDF、图标走 ICO"的固定流程,可以覆盖前端切图交付的绝大多数需求。所有工具本地运行的特性意味着客户保密图片也可以放心处理。