共计 3997 个字符，预计需要花费 10 分钟才能阅读完成。
微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
图像往往是任何特定网页上最大的资源。尽管许多开发者花工夫优化网页性能的其余方面，但缩小图像的大小对性能的影响比所有其余方面加起来还要大。这篇文章将纯正关注于可用于缩小图片大小的不同工具。
WebUtils Bulk Image Compress
地址：https://www.webutils.app/imag…
WebUtils Bulk Image Compress 反对压缩图片并将其转换为 WebP、JPG、PNG、AVIF 和 JXL。
Compressor.Io
地址：https://compressor.io/
Compressor.io 反对有损或无损压缩来优化 JPEG、PNG、SVG、GIF 和 WebP，每个文件最大可压缩 10MB。
Imagecompresser.Com
地址：https://imagecompresser.com/
Imagecompresser.com 反对同时上传多达 10 个文件，反对 PNG、JPEG、WebP、JPG 和 GIF 格局。
AnyWebP
地址：https://anywebp.com/
AnyWebP 是专门用于转换 WebP 格局的图片，能够输入为 JPEG、PNG 或 ICO，也能够按文件大小或品质进行定制，还能够抉择将简直任何文件格式（TIFF、PSD、BMP 等）转换为 WebP。
Compressimage.Io
地址：https://compressimage.io/
Compressimage.io 反对离线的图像优化，对文件大小或文件数量没有限度。惟一的限度是只能压缩 JPEG 和 PNG。
JPEG.Rocks
地址：https://jpeg.rocks/
JPEG.rocks，顾名思义，是一个隐衷敌对的 JPEG 图像优化器，齐全是客户端和开源的。对文件大小或文件数量仿佛没有限度，而且能够自定义输入文件的品质。
Compressor.Js
地址：https://fengyuanchen.github.i…
Compressor.js 与本列表中的其余工具齐全不同。它包含大概十几种不同的设置，能够自定义图像的品质、大小、MIME 类型等等。
Squoosh
地址：https://squoosh.app/
Squoosh 是由 Chrome 实验室团队设计的。这个网络应用仅限于一张图片，但它包含几个选项，用于放大尺寸、调色板、抉择压缩办法、压缩品质等级，以及一系列其余高级设置。为这个工具提供能源的引擎也能够作为 API 或 CLI 用于批量解决。
SVGOMG
地址：https://jakearchibald.github….
SVGOMG 是专门用于缩小 SVG 图形的大小。它是 SVGO 的一个 GUI，是一个基于 Node.js 的工具。SVG 优化器很有用，因为许多生成 SVG 的程序在生成图像的 SVG 代码中蕴含了多余的和无用的信息
Optimizilla
地址：https://imagecompressor.com/
Optimizilla 应用有损压缩来缩小 JPEG、GIF 和 PNG 图像的大小。最多能上传 20 张图片，能够抉择在下载前为每张图片定制压缩级别和品质。
Shrink Me
地址：https://shrinkme.app/
Shrink Me 反对批量优化 JPEG、PNG、WebP 或 SVG 图像，而且没有显著的品质损失。对文件数量或文件大小没有限度。
JPEG Stripper
地址：https://www.toolsley.com/jpeg…
JPEG Stripper 通过剥离不必要的数据来优化 JPEG 文件。一次只容许上传一张图片，所以这只对 JPEG 格局的几张图片有用。
Shrink Media
地址：https://www.shrink.media/
Shrink Media 反对优化 PNG、JPEG 和 WebP 图像，分辨率最高可达 5000x5000，它也能够作为 iOS 或 Android 的挪动应用程序。应用交互式滑块来扭转品质程度和照片尺寸。也能够粘贴图片的 URL。
OptimizeImages
地址：https://www.optimizeimages.com/
OptimizeImages 能够缩小 SVG、PNG、JPEG、WebP、GIF 和 AVIF 的大小，反对转换为 WebP 或 AVIF。最多能够优化 30 张图片，并抉择一个压缩品质选项（举荐、中等或超级）。
ImagesTool.Com
地址：https://imagestool.com/
ImagesTool.com 包含许多不同的图像处理工具。能够调整大小，转换，压缩图像，以及更多。反对 JPEG、WebP、SVG、GIF 和 APNG。
AVPress
地址：https://avpress.zaps.dev/
AVPress 有点不同，因为它是专门用于优化视频文件和 GIF 动画的。一次只能解决一个视频或 GIF，并包含几个自定义和输入设置。
AVIF Converter
地址：https://avif.io/
AVIF Converter 能够将任何图像格式转换为 AVIF，这是一种下一代文件格式，据称比 WebP、JPEG、PNG 和 GIF 有更好的压缩成果。这个应用程序仿佛对文件数量或文件大小没有任何限度，但请留神，AVIF 格局尚未被所有古代浏览器反对。
TinyPNG
地址：https://tinypng.com/
TinyPNG 是一个较早的工具，能够优化 WebP、PNG 或 JPEG 文件。你一次最多能够上传 20 个，每个大小不超过 5MB。
用于图像优化的构建工具和 CLI 工具
到目前为止，所列举的工具是手动批量解决或一次优化几张图片的好抉择。但在一个大型项目的背景下，你会想思考应用不同的工具，这些工具被设计成继续工作流程或构建过程的一部分。这里有一些你能够思考的选项：
- SVGO 是风行的 SVG 优化工具，是后面提到的 SVGOMG 背地的外围。
- libSquoosh 是 Squoosh API，反对构建动静优化图像的 JavaScript 程序
- Squoosh CLI 是一个命令行工具，用于应用运行 Squoosh 的引擎。
- pngquant 是一个专门用于优化 PNG 图像的命令行工具。
- esbuild-squoosh
依据所应用的构建工具或工作运行程序的不同，后面提到的 imagemin 可能是你的所选工具的插件。上面是一些用于不同构建工具的 imagemin 插件：
- rollup-plugin-imagemin 是 Rollup 的一个插件，它应用 imagemin 来主动优化 Rollup 构建中的图片。
- parcel-plugin-imagemin 是另一个应用 imagemin 的插件，这次是为你的 Parcel 构建的。
[grot-contrib-imagemin](https://github.com/gruntjs/grunt-contrib-imagemin)是另一个 imagemin 插件，为那些依然应用 Grunt 的人提供，Grunt 是一个较老的工作运行器工具- ImageMinimizerWebpackPlugin 是另一个 imagemin 插件，这次是与风行的 JavaScript 捆绑包 webpack 一起应用
- snowpack-plugin-imagemin 是一个 imagemin 插件，可与古代前端构建工具 Snowpack 一起应用。
其它工具
QOI
地址：https://qoiformat.org/
Quite OK 图像格式是一种图像格式，它将图像无损压缩到与 PNG 类似的大小，同时提供 20 倍至 50 倍的编码速度和 3 倍至 4 倍的解码速度。
JXL
地址：https://jpegxl.info/
不是一个工具，而是一个以 JPEG XL 图像格式为核心的社区网站。
UPNG.js
地址：https://github.com/photopea/U…
这是风行的 Photopea 应用程序背地的 PNG 引擎，一个先进的 PNG/APNG 解码器和编码器，提供有损和无损优化。
Optimus
地址：https://github.com/Splode/opt…
一个本地的桌面应用程序，反对压缩、优化和转换图像，反对 JPEG、PNG 和 WebP 格局。
ImageOptim
地址：https://imageoptim.com/mac
一个 Mac 应用程序和 Sketch 插件，用于缩小图像文件大小。
pngcrush
地址：https://pmt.sourceforge.io/pn…
一个传统的图像压缩工具，能够通过命令行应用。
Trimage
地址：https://trimage.org/
一个原生的跨平台应用程序和命令行界面来优化 JPEG 和 PNG 图像。
PNGGauntlet
地址：https://pnggauntlet.com/
一个较早的可配置的本地应用程序，实用于 Windows、Mac 和 Linux，可优化 PNG 并将各种格局转换为 PNG。
Pngyu
地址：https://nukesaq88.github.io/P…
另一个应用 pngquant 进行 PNG 优化的本地应用程序。
总结
心愿这个工具清单足以提供你所须要的任何货色来满足你的图像优化要求。
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
起源：https://www.smashingmagazine….
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。