优化图像大小对性能的影响比所有其他区域的总和还要大。在本文中,Louis Lazaris介绍了可用于减小图像大小的不同工具。
近年来,Web开发社区正确地广泛传播了这样一个信息,即图像通常是任何给定网页上最大的资源。虽然许多开发人员花时间优化网页性能的其他方面,但减小图像的大小对性能的影响可能比所有其他方面的总和更大。
WebUtils Bulk Image Compress
https://www.webutils.app/image-compress
WebUtils 批量图像压缩允许您压缩图像并将其转换为 WebP、JPG、PNG、AVIF 和 JXL。似乎没有迹象表明文件大小或文件数量有限制,但是如果您尝试进行批量转换,则这是一个缓慢的过程。您还可以调整质量和大小,一切都在客户端完成。
WebUtils Bulk Image Compress将图像转换为WebP,AVIF和JPEG-XL。
Compressor.Io#
Compressor.io 允许您使用有损或无损压缩来优化 JPEG、PNG、SVG、GIF 和 WebP,每个文件最多可压缩 10MB。如果要自定义压缩或使用较大的文件,则必须获取高级计划。在这种情况下,压缩似乎在服务器端,因此您将获得更快的结果。
Compressor.io 压缩服务器上的图像。
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的离线本机应用程序,可让您进行批量转换。在任何情况下,都不会将任何文件上载到服务器。
AnyWebP等工具可帮助您改进工作流程。
Compressimage.Io#
Compressimage.io 允许完全离线的图像优化,对文件大小或文件数量没有限制。这似乎具有的唯一限制是您只能压缩JPEG和PNG。自定义选项允许您调整压缩级别,图像大小以及是否要转换为WebP。您还可以向文件名添加自定义后缀。
尝试 Compressimage.io 以获得可靠的图像优化。
JPEG.Rocks#
顾名思义,JPEG.rocks是一个隐私友好的JPEG图像优化器,完全客户端和开源。文件大小或文件数量似乎没有限制,您可以自定义输出文件质量。
JPEG.rocks是一个隐私感知的JPEG优化器,完全在浏览器中处理图像。
压缩机.Js#
https://fengyuanchen.github.io/compressorjs/
Compressor.js与此列表中的其他工具完全不同。它包括大约十几种不同的设置,可让您自定义图像质量,大小,哑剧类型等。唯一的大限制是您必须一次执行一个文件。因此,这对于批量调整大小来说不是一个好的选择,但对于要对特定图像执行的特定优化是有效的。
Compressor.js使用浏览器的本机 API 来执行压缩工作。canvas.toBlob
斯阔什#
Squoosh由Chrome Labs团队设计。Web 应用程序仅限于单个图像,但它包括用于减小大小、调色板、选择压缩方法、压缩质量级别以及大量其他高级设置的选项。为此工具提供支持的引擎也可用作用于批量处理的 API 或 CLI。
Squoosh可以减小文件大小并保持高质量。
SVGOMG#
https://jakearchibald.github.io/svgomg/
SVGOMG 专门用于减小 SVG 图形的大小。它是SVGO的GUI,SVGO是一个基于节点.js的工具。SVG 优化器非常有用,因为许多生成 SVG 的程序在生成图像的 SVG 代码中包含冗余和无用的信息。
您一定会想尝试一下SVCOMG!
Optimizilla#
Optimizilla使用有损压缩来减小JPEG,GIF和PNG图像的大小。您最多可以上传 20 张图像,并且可以在下载之前选择自定义每个图像的压缩级别和质量。
Optimizilla将JPEG,GIF和PNG图像缩小到尽可能小的大小。
缩小我#
Shrink Me 允许您批量优化 JPEG、PNG、WebP 或 SVG 图像,而不会造成明显的质量损失。文件数量或文件大小没有限制,但文件越大,压缩过程越慢。
“缩小我”工具可以帮助您减小图像文件大小,而不会造成视觉质量损失。
JPEG 剥离器#
https://www.toolsley.com/jpegstrip.html
JPEG剥离器通过剥离不必要的数据来优化JPEG文件。一次只允许上传一个图像,因此这只对 JPEG 格式的几张图像有用。
JPEG Stripper由Toolsley创建,是一个工具,可用于从JPEG中删除所有元数据,而不会影响图像质量。
收缩介质#
Shrink Media 可让您优化 PNG、JPEG 和 WebP 图像,分辨率高达 5000x5000,并且还可以作为适用于 iOS 或 Android 的移动应用程序使用。使用交互式滑块更改质量级别和照片尺寸。您也可以将 URL 粘贴到图像中,但此工具一次只允许您优化一个图像。
缩小媒体可让您免费减小图像的大小。
优化图像#
https://www.optimizeimages.com/
优化图像允许您减小SVG,PNG,JPEG,WebP,GIF和AVIF的大小,同时还为您提供了转换为WebP或AVIF的选项。优化多达 30 张图像并选择压缩质量选项(推荐、中或超)。
优化图像可以扫描您的网站以检查需要优化的图像。
ImagesTool.Com#
ImagesTool.com 包括许多不同的图像处理工具。您可以调整大小,转换,压缩图像等。支持 JPEG、WebP、SVG、GIF 和 APNG。所有操作都在客户端完成,您可以在无损压缩和自定义压缩之间进行选择。您可以优化的文件数量没有限制,您还可以按文件夹上传或粘贴到图像中。
您可以转到 ImagesTool.com 来处理图像,而无需上传文件。
AVPress#
AVPress有点不同,因为它专门用于优化视频文件和GIF动画。它允许一次处理单个视频或GIF,并包括几个自定义和输出设置,您可以将其应用于所选文件。
AVPress由Addy Osmani构建,是100%客户端。
AVIF 转换器#
AVIF转换器允许您将几乎任何图像格式转换为AVIF,AVIF是一种下一代文件格式,据称具有比WebP,JPEG,PNG和GIF更好的压缩。此应用程序似乎对文件数量或文件大小没有任何限制,但请注意,并非所有现代浏览器都支持AVIF格式。
AVIF转换器允许您免费,快速地将图像转换为AVIF。
微小的PNG#
TinyPNG是一种较旧的工具,可优化WebP,PNG或JPEG文件。您一次最多可以上传 20 个,每个上传最多 5MB。
TinyPNG使用智能有损压缩技术来减小WEBP,JPEG和PNG文件的文件大小。
用于映像优化的构建工具和 CLI 工具#
到目前为止,我列出的工具是手动批处理或一次优化几个图像的不错选择。但在大型项目的上下文中,您需要考虑使用旨在作为正在进行的工作流或生成过程的一部分合并的不同工具。以下是您可以考虑的一些选项:
- https://github.com/svg/svgo,SVGO是流行的SVG优化工具,是前面提到的SVGOMG背后的核心;
- https://github.com/GoogleChromeLabs/squoosh/tree/dev/libsquoosh,libSquoosh是Squoosh API,允许您构建JavaScript程序来动态优化图像;
- https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli,Squoosh CLI是一个命令行工具,用于使用运行Squoosh的引擎;
- https://pngquant.org/,pngquant是一个命令行实用程序,专门用于优化PNG图像;
- esbuild-squoosh;
- https://github.com/imagemin/imagemin,imagemin 是一个较旧的未维护的 JavaScript 项目,它允许您以编程方式优化图像。
根据您使用的构建工具或任务运行程序,上述 imagemin 可能可用作所选工具的插件。以下是一些用于不同构建工具的 imagemin 插件:
- rollup-plugin-imagemin是一个用于Rollup的插件,它使用imagemin来自动优化Rollup构建中的图像;
- parcel-plugin-imagemin是另一个使用imagemin的插件,这次用于您的包裹构建;
- grunt-contrib-imagemin是另一个imagemin插件,适用于那些仍在使用Grunt的人,Grunt是一个较旧的任务运行工具;
- gulp-imagemin也使用imagemin,这次是用你的Gulp构建;
- ImageMinimizerWebpackPlugin是另一个imagemin插件,这次用于webpack,流行的JavaScript bundler;
- snowpack-plugin-imagemin是一个imagemin插件,用于与Snowpack一起使用,Snowpack是一种现代前端构建工具。
最后,如果你正在构建需要动态图像处理和优化的本机应用,下面是一些 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 应用程序和 Sketch 插件。 - pngcrush
可通过命令行使用的旧版图像压缩工具。 - Trimage
本机跨平台应用程序和命令行界面,用于优化 JPEG 和 PNG 图像。 - PNGGauntlet
适用于 Windows、Mac 和 Linux 的较旧的可配置本机应用程序,可优化 PNG 并将各种格式转换为 PNG。 - Pngyu
另一个使用 pngquant 进行 PNG 优化的本机应用程序。
结论#
如果您知道另一种工具可以优化Web,本机或移动应用程序的不同图像格式,请随时在评论中告诉我们。同时,我希望这个工具列表足以提供满足图像优化要求所需的任何内容。 #设计美学# #设计#
编辑:尘渊文化 321one。com