微信搜索【大招天下】，给大家分享前端行业趋势，学习方法等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。图像往往是任何给定网页上最大的资源。虽然许多开发人员花时间优化网页性能的其他方面，但减小图像的大小对性能的影响比所有其他方面的总和还要大。这篇文章将纯粹关注可用于减小图像大小的不同工具。WebUtilsBulkImageCompress地址：https://www.webutils.app/imag...WebUtilsBulkImageCompress支持压缩图片并将其转换为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由ChromeLabs团队设计。该Web应用程序仅限于单个图像，但它包括几个用于缩小尺寸、调色板、选择压缩方法、压缩质量级别和许多其他高级设置的选项。为该工具提供支持的引擎也可用作批处理的API或CLI。SVGOMG地址：https://jakearchibald.github....SVGOMG是专门为减小SVG图形尺寸而设计的。它是SVGO的GUI，SVGO是一个基于Node.js的工具。SVG优化器很有用，因为许多生成SVG的程序在生成图像的SVG代码中包含冗余和无用的信息Optimizilla地址：https://imagecompressor.com/Optimizilla使用有损压缩来减小JPEG、GIF和PNG图像的大小。您最多可以上传20张图片，并可选择在下载前为每张图片自定义压缩级别和质量。ShrinkMe地址：https://shrinkme.app/ShrinkMe支持批量优化JPEG、PNG、WebP或SVG图片，质量无明显损失。文件数量或文件大小没有限制。JPEGStripper地址：https://www.toolsley.com/jpeg...JPEGStripper通过剥离不必要的数据来优化JPEG文件。一次只允许上传一张图片，所以这只对JPEG格式的几张图片有用。ShrinkMedia地址：https://www.shrink.media/ShrinkMedia支持优化后的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，并且包括多个自定义和输出设置。AVIFConverter地址：https://avif.io/AVIFConverter可以将任何图片格式转换成AVIF，AVIF是据说比WebP、JPEG、PNG、GIF压缩率更好的下一代文件格式。该应用程序似乎对文件数量或文件大小没有任何限制，但请注意，并非所有现代浏览器都支持AVIF格式。TinyPNG地址：https://tinypng.com/TinyPNG是较早的工具，可以优化WebP、PNG或JPEG文件。您一次最多可以上传20个，每个大小不超过5MB。用于图像优化的构建工具和CLI工具到目前为止列出的工具是手动批处理或一次优化几个图像的不错选择。但在较大项目的上下文中，您需要考虑使用不同的工具，这些工具旨在成为正在进行的工作流或构建过程的一部分。以下是您可以考虑的一些选项：SVGO是流行的SVG优化工具，是上述SVGOMG背后的核心。libSquoosh是支持构建动态优化图像的JavaScript程序的SquooshAPISquooshCLI是使用运行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的人，这是一个较旧的任务运行器工具ImageMinimizerWebpackPlugin是另一个imagemin插件，这次与流行的JavaScript包webpacksnowpack-plugin-imagemin是一个用于现代前端构建工具Snowpack的imagemin插件。其他工具QOI地址：https://qoiformat.org/QuiteOK图像格式是一种图像格式，可以将图像无损压缩到类似PNG的大小，同时提供20倍至50倍的编码速度和3倍至4倍的解码速度。JXL地址：https://jpegxl.info/不是一个工具，而是一个以JPEGXL图片格式为中心的社区网站。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，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。来源：https://www.smashingmagazine....交流有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
