强大的图像优化工具


近年来,网页开发社区广泛传播了一个重要信息:图像往往是任何网页上最大的资源。尽管许多开发人员花时间优化网页的其他性能区域,压缩图像的大小对性能的影响可能比其他所有区域加起来还要大。

你可能已经知道,Smashing Magazine 出版了由 Addy Osmani 撰写的《图像优化》一书,详细探讨了这个话题。但本文可以看作是对该书的补充,因为它将专注于介绍不同的图像压缩工具。

WebUtils Bulk Image Compress

WebUtils Bulk Image Compress 允许你压缩图像并将其转换为 WebP、JPG、PNG、AVIF 和 JXL 格式。文件大小或数量似乎没有限制的提示,但如果尝试批量转换,过程会比较慢。你还可以调整质量和尺寸,所有操作都在客户端完成。

Compressor.io

Compressor.io 让你通过有损或无损压缩优化 JPEG、PNG、SVG、GIF 和 WebP 图像,单个文件最大支持 10MB。如果你想自定义压缩或使用更大的文件,需要升级到 Premium 计划。压缩过程似乎是在服务器端进行的,因此你可以获得更快的结果。

Imagecompresser.Com

Imagecompresser.com 允许你同时上传最多 10 个文件,支持 PNG、JPEG、WebP、JPG 和 GIF 格式。每张图像的文件大小似乎没有限制,因此对于不超过 10 个的大文件来说,这个工具可能非常适合。


通过 Imagecompresser.com 同时上传文件。

AnyWebP

AnyWebP 专用于将图像转换为 WebP 格式,你可以将输出格式设为 JPEG、PNG 或 ICO。你还可以根据文件大小或质量进行自定义。此外,它支持将几乎任何文件格式(TIFF、PSD、BMP 等)转换为 WebP。该工具还提供了 Mac 和 Windows 的离线本地应用程序,支持批量转换。所有文件都不会上传到服务器。

Compressimage.io

Compressimage.io 允许完全离线的图像优化,没有文件大小或数量的限制。唯一的限制是它只支持压缩 JPEG 和 PNG。自定义选项允许你调整压缩级别、图像大小,并支持转换为 WebP。你还可以在文件名中添加自定义后缀。

JPEG.Rocks

顾名思义,JPEG.rocks 是一个隐私友好的 JPEG 图像优化工具,完全在客户端进行操作,并且是开源的。它似乎对文件大小或数量没有限制,用户可以自定义输出文件的质量。

JPEG.rocks 是一个注重隐私的 JPEG 优化器,完全在浏览器中处理图像。

Compressor.Js

Compressor.js 与其他工具不同,它包含十几个不同的设置,允许你自定义图像质量、大小、MIME 类型等。唯一的限制是你一次只能处理一个文件。因此,这并不是批量调整大小的理想选择,但如果你想对特定图像进行具体优化,它非常有效。

Compressor.js 使用浏览器的原生 canvas.toBlob API 来执行压缩工作。

Squoosh

Squoosh 是由 Chrome Labs 团队设计的。这款网页应用只允许处理单张图像,但提供了多种选项来减少文件大小,比如调整色彩调色板、选择压缩方法、设置压缩质量级别以及其他高级设置。该工具的引擎还可以作为 API 或 CLI 供批量处理使用。

Squoosh 可以减少文件大小并保持高质量。

SVGOMG

SVGOMG 专门用于压缩 SVG 图形文件。它是基于 Node.js 的 SVGO 工具的图形用户界面 (GUI)。SVG 优化器很有用,因为许多生成 SVG 的程序会在代码中包含冗余和无用的信息。

Optimizilla

Optimizilla 使用有损压缩来减少 JPEG、GIF 和 PNG 图像的大小。你可以一次上传最多 20 张图片,并且可以在下载之前为每张图片自定义压缩级别和质量。


Optimizilla 将 JPEG、GIF 和 PNG 图像压缩到尽可能小的尺寸。

Shrink Me

Shrink Me 允许你批量优化 JPEG、PNG、WebP 或 SVG 图像,并且不会有明显的质量损失。虽然没有文件数量或大小的限制,但较大的文件会导致压缩过程变慢。

Shrink Me 工具可以帮助你在不损失视觉质量的情况下减少图像文件大小。

JPEG Stripper

JPEG Stripper 通过删除不必要的数据来优化 JPEG 文件。它一次只能上传一张图像,因此适用于少量 JPEG 文件的优化。


由 Toolsley 创建,JPEG Stripper 是一款可以在不影响图像质量的情况下删除 JPEG 元数据的工具。

Shrink Media

Shrink Media 允许你优化分辨率高达 5000x5000 的 PNG、JPEG 和 WebP 图像。该工具还提供适用于 iOS 和 Android 的移动应用程序。你可以使用交互式滑块来调整质量等级和照片尺寸。你还可以粘贴图像的 URL 进行优化,但该工具一次只能优化一张图像。

OptimizeImages

OptimizeImages 让你压缩 SVG、PNG、JPEG、WebP、GIF 和 AVIF 图像,同时还提供将图像转换为 WebP 或 AVIF 的选项。你可以一次优化多达 30 张图像,并选择压缩质量选项(推荐、中等或超强)。


OptimizeImages 可以扫描你的网站,检查需要优化的图像。

ImagesTool.com

ImagesTool.com 提供多种图像处理工具。你可以调整大小、转换格式、压缩图像等。支持 JPEG、WebP、SVG、GIF 和 APNG,所有操作都在客户端完成。支持无损和自定义压缩,没有文件数量限制,你还可以通过文件夹上传或粘贴图像。

AVPress

AVPress 是专门用于优化视频文件和 GIF 动画的工具。它一次只能处理一个视频或 GIF 文件,并提供多个自定义和输出设置供你选择。

AVIF Converter

AVIF Converter 允许你将几乎任何图像格式转换为 AVIF,这是一种新一代文件格式,据称其压缩效果优于 WebP、JPEG、PNG 和 GIF。该应用似乎没有文件数量或大小的限制,但需要注意的是,AVIF 格式尚未在所有现代浏览器中得到完全支持。


AVIF Converter 允许你免费快速将图像转换为 AVIF。

TinyPNG

TinyPNG 是一款较老的工具,用于优化 WebP、PNG 或 JPEG 文件。你可以一次上传多达 20 个文件,每个文件大小限制为 5MB。

TinyPNG 使用智能有损压缩技术来减少 WebP、JPEG 和 PNG 文件的大小。

构建工具和 CLI 工具的图像优化

我之前列出的工具都适合手动批量处理或一次优化少量图像。但是,对于一个大型项目,你可能需要考虑那些可以集成到持续工作流程或构建过程中的工具。以下是一些可以考虑的选项:

  • SVGO 是流行的 SVG 优化工具,也是之前提到的 SVGOMG 背后的核心;
  • libSquoosh 是 Squoosh 的 API,允许你构建可动态优化图像的 JavaScript 程序;
  • Squoosh CLI 是一个命令行工具,使用运行 Squoosh 的引擎;
  • pngquant 是一个专门用于优化 PNG 图像的命令行工具;
  • esbuild-squoosh 是 esbuild 的 Squoosh 插件;
  • imagemin 是一个旧的、不再维护的 JavaScript 项目,允许你以编程方式优化图像。

根据你使用的构建工具或任务管理器,前面提到的 imagemin 可能作为插件可用于你选择的工具。以下是一些 imagemin 插件:

  • rollup-plugin-imagemin:这是 Rollup 的插件,使用 imagemin 自动优化 Rollup 构建中的图像;
  • parcel-plugin-imagemin:另一个插件,使用 imagemin 优化 Parcel 构建中的图像;
  • grunt-contrib-imagemin:用于 Grunt 的 imagemin 插件,这是一个较旧的任务管理工具;
  • gulp-imagemin:用于 Gulp 构建的 imagemin 插件;
  • ImageMinimizerWebpackPlugin:一个用于 webpack 的 imagemin 插件;
  • snowpack-plugin-imagemin:用于 Snowpack 的 imagemin 插件,Snowpack 是一个现代前端构建工具。

如果你正在构建需要动态图像处理和优化的本机应用程序,以下是一些 C 语言的选项:

  • MozJPEG:一个用于优化 JPEG 图像的程序,适用于图形程序、图像处理工具等;
  • jpegoptim:一个用于优化 JPEG 文件的工具;
  • libvips:一个图像处理库。

其他工具

你可能还想查看其他的图像优化工具和资源,虽然它们不一定属于上述类别,但可能适合你的某些特定用例:

  • QOI:Quite OK 图像格式,一种无损压缩图像格式,压缩效果与 PNG 相似,但编码速度快 20-50 倍,解码速度快 3-4 倍。
  • JXL:不是一个工具,而是围绕 JPEG XL 图像格式的社区网站。
  • UPNG.js:这是流行的 Photopea 应用程序背后的 PNG 引擎,支持有损和无损优化的高级 PNG/APNG 解码器和编码器。
  • Optimus:一个本地桌面应用程序,支持 JPEG、PNG 和 WebP 格式的图像压缩、优化和转换。
  • ImageOptim:一款 Mac 应用和 Sketch 插件,用于减少图像文件大小。
  • pngcrush:一个旧的命令行图像压缩工具。
  • Trimage:一个跨平台的本地应用程序和命令行界面,用于优化 JPEG 和 PNG 图像。
  • PNGGauntlet:一个较旧的可配置本地应用程序,适用于 Windows、Mac 和 Linux,用于优化 PNG 并将多种格式转换为 PNG。
  • Pngyu:另一个本地应用程序,使用 pngquant 进行 PNG 优化。