许多开发人员花费了很多时刻优化网页性能,比方优化 js、css、减少http 请求等等,但减小图片巨细产生的优化比其他一切范畴加起来影响更大。

WebUtils Bulk Image Compress

WebUtils Bulk Image Compress 答应紧缩图画并将其转化为 WebP、JPG、PNG、AVIF 和 JXL。不约束文件巨细或文件数量,但假如测验进行批量转化,这或许比较缓慢。还能够调整质量和尺度,所以紧缩在客户端完结。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

Compressor.io

Compressor.io 能够运用有损或无损紧缩优化 JPEG、PNG、SVG、GIF 和 WebP,每个文件最高可达 10MB。假如要自定义紧缩或运用较大的文件,则必须付费获得高档方案。在这种情况下,紧缩图片在服务器端完结,因而将获得更快的成果。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

Imagecompresser.com

Imagecompresser.com 答应一起上传多达 10 个文件,并支撑 PNG、JPEG、WebP、JPG 和 GIF 格局。每个图画的文件巨细没有任何约束,因而这或许适用于 10 个或更少的大文件。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

AnyWebP

AnyWebP 专门用于以 WebP 格局转化图画,能够抓换为 JPEG、PNG 或 ICO。能够根据文件巨细或质量进行自定义。也能够将简直任何文件格局 (TIFF、PSD、BMP 等) 转化为 WebP。该东西还为 Mac 和 Windows 供给离线本机应用程序,可批量转化。无论如何,没有一个文件被上传到服务器。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

Compressimage.io

Compressimage.io 答应彻底离线的图画优化,不约束文件巨细或文件数量。仅有的约束是只能紧缩 JPEG 和 PNG。自定义选项答应调整紧缩等级、图画巨细以及是否要转化为 WebP。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

JPEG.rocks

JPEG.rocks, 顾名思义,它是一个隐私友好的 JPEG 图画优化器,彻底客户端和开源。文件巨细或文件数量没有约束,能够自定义输出文件质量。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

Compressor.js

Compressor.js 与此列表中的其他东西彻底不同。它包含十几种不同的设置,可自定义图画质量、巨细、mime 类型等。仅有的大约束是必须一次做一个文件。因而,这关于批量调整巨细不是一个好的挑选,但关于要在特定映像上履行的特定优化是有用的。运用浏览器的本机canvas.toBlob API 做紧缩作业。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

Squoosh

Squoosh is 由 Chrome 实验室团队规划。web 应用程序仅限于单个图画,但它包含几个选项,用于减小尺度、调色板、挑选紧缩办法、紧缩质量等级以及一系列其他高档设置。支撑此东西的引擎也可作为 API 或 CLI 用于批量处理。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

SVGOMG

SVGOMG is 专门用于减小 SVG 图形的巨细。它是 SVGO 的 GUI,是基于 Node.js 的东西。SVG 优化器非常有用,由于许多生成 SVG 的程序在生成图画的 SVG 代码中包含多余和无用的信息。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

Optimizilla

Optimizilla 运用有损紧缩来减小 JPEG、GIF 和 PNG 图画的巨细。最多能够上传 20 张图画,并且能够挑选在下载之前自定义每个图画的紧缩等级和质量。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

Shrink Me

Shrink Me 可批量优化 JPEG、PNG、WebP 或 SVG 图画,而不会形成明显的质量丢失。文件数量或文件巨细没有约束,可是较大的文件将意味着较慢的紧缩进程。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

JPEG Stripper

JPEG Stripper 经过剥离不必要的数据来优化 JPEG 文件。可用于在不影响图画质量的情况下从 jpeg 中删除一切元数据。一次只答应上传一张图片,因而这仅对几张 JPEG 格局的图片有用。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

Shrink Media

Shrink Media 可优化高达 5000×5000 分辨率的 PNG、JPEG 和 WebP 图画,它也可作为 iOS 或 Android 的移动应用程序运用。运用交互式滑块更改质量等级和相片尺度。也能够将 URL 粘贴到图画,但此东西仅答应一次优化一个图画。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

OptimizeImages

OptimizeImages 可减小 SVG、PNG、JPEG、WebP、GIF 和 AVIF 的巨细,一起还能够挑选转化为 WebP 或 AVIF。 能够扫描你的网站以检查需求优化的图画。优化多达 30 张图画,并挑选紧缩质量选项 (引荐、中等或超清)。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

ImagesTool.com

ImagesTool.com 包含许多不同的图画处理东西。您能够调整巨细、转化、紧缩图画等。支撑 JPEG、WebP、SVG、GIF 和 APNG。客户端悉数完结,您能够在无损和自定义紧缩之间进行挑选。您能够优化的文件数量没有约束,也能够按文件夹上传或粘贴到图画中,不需求上传。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

AVPress

AVPress 有点不同,由于它专门用于优化视频文件和 GIF 动画。它答应一次处理单个视频或 GIF,并包含可应用于所选文件的多个自定义和输出设置。彻底在客户端完结。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

AVIF Converter

AVIF Converter 答应任何图画格局转化为 AVIF,AVIF是一种下一代文件格局,宣称比 WebP、JPEG、PNG 和 GIF 具有更好的紧缩。此应用程序对文件数量或文件巨细没有任何约束,但请注意,并非一切现代浏览器都支撑 AVIF 格局。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

TinyPNG

TinyPNG 运用智能有损数据紧缩技术优化 WebP、PNG 或 JPEG 文件的东西。一次最多能够上传 20 个,每个巨细最多能够上传 5mb。

30+ 图片压缩工具集合,包含在线压缩和CLI工具

图片紧缩 CLI 东西

到目前为止,我列出的东西是手动批处理或一次优化一些图画的好挑选。可是在大型项目的布景下,您需求考虑运用不同的东西,这些东西被规划为作为正在进行的作业流或构建进程的一部分。以下是您能够考虑的一些选项:

  • SVGO 是流行的 SVG 优化东西是前面说到的 SVGOMG 背面的中心;
  • libSquoosh 是运用 Squoosh API,答应您构建可动态优化图画的 JavaScript 程序;
  • Squoosh CLI 是 用于运用运转 Squoosh 的引擎的命令行东西;
  • pngquant 专门用于优化 PNG 图画的命令行实用程序;
  • esbuild-squoosh esbuild 插件 运用 Squoosh API
  • imagemin 是一个较旧的 JavaScript 项目,可让您以编程方式优化图画。

根据您运用的构建东西或使命运转程序,上述 imagemin 或许可作为您挑选的东西的插件运用。

以下是一些用于不同构建东西的 imagemin 插件:

  • rollup-plugin-imagemin
  • parcel-plugin-imagemin
  • grunt-contrib-imagemin
  • gulp-imagemin
  • ImageMinimizerWebpackPlugin
  • snowpack-plugin-imagemin

C 言语紧缩东西

  • MozJPEG 是一个用于优化 JPEG 图画的程序,用作图形程序、图画处理东西和类似应用程序的库;
  • jpegoptim 是一个优化 JPEG 文件的东西;
  • libvips 是一个处理图画的库。

其他紧缩东西

您或许需求检查其他用于图画优化的东西和资源。这些不一定归于上述类别,但它们或许适合您的特定用例之一。

  • QOI 相当好的图画格局是一种图画格局,它无损地将图画紧缩到与 PNG 类似的巨细,一起供给 20x-50x 更快的编码和 3x-4x 更快的解码。
  • JXL 不是一个东西,而是一个以 JPEG XL 图画格局为中心的社区网站。
  • UPNG.js 这是流行的 Photopea 应用程序背面的 PNG 引擎,这是一个先进的 PNG/APNG 解码器和编码器,供给有损和无损的优化。
  • Optimus 本机桌面应用程序,答应您紧缩、优化和转化支撑 JPEG、PNG 和 WebP 格局的图画。
  • ImageOptim Mac app Sketch 插件
  • pngcrush 能够经过命令行运用的传统图画紧缩东西。
  • Trimage 本机跨渠道应用程序和命令行界面,用于优化 JPEG 和 PNG 图画。
  • PNGGauntlet 适用于 Windows、Mac 和 Linux 的较旧的可配置本机应用程序,可优化 PNG 并将各种格局转化为 PNG。
  • Pngyu 一个本地 App 运用 pngquant 来紧缩图片

原文地址: www.smashingmagazine.com/2022/07/pow…