图片优化工具介绍

图片优化工具介绍

近年来,Web开发社区都在传播图像通常是任何给定网页上最大的资源。虽然许多开发人员会花时间优化网页其他方面的性能,但减小图像大小对性能的影响可能比所有其他方面的总和还要大。

本文将介绍几个非常强大的图片优化工具。

WebUtils

WebUtils这个在线网站可以实现压缩图像(可以手动调整图片质量和大小)并将其转换为 WebPJPGPNGAIFJXL。而且这个网站也没有对文件大小或文件数量进行限制。因为这个压缩和转换过程都在客户端上实现,因此耗时会久一点。

图片优化工具介绍_第1张图片

Compressor

Compressor.io 最大能支持10MBJPEGPNGSVGGIFWebP文件进行有损或无损的压缩优化。如果要自定义压缩或使用更大的文件,就需要购买服务了。这个工具的压缩似乎是在服务器端,因此我们可以更快的获取结果。

图片优化工具介绍_第2张图片

Imagecompresser

Imagecompresser.com 最多可支持同时上传多达 10 个文件,并支持 PNGJPEGWebPJPGGIF 格式。每个图像的文件大小似乎没有任何限制,因此这可能适用于 10 个或更少的大文件。

图片优化工具介绍_第3张图片

AnyWebP

AnyWebP专门用于转换WebP格式的图像,我们也可以输出为JPEGPNGICO。同时还支持按文件大小或质量进行自定义压缩优化,还可以选择将几乎任何文件格式(TIFFPSDBMP等)转换为WebP。此工具还提供适用于 MacWindows 的离线应用程序,能够批量转换。最重要的是在任何情况下,这个工具都不会将任何文件上传到服务器。

图片优化工具介绍_第4张图片

Compressimage

Compressimage.io 支持完全离线的图像优化功能,而且对文件大小或文件数量也没有任何限制。唯一的限制是只能压缩 JPEGPNG这两种格式了。同时也支持自定义选项,允许我们自己调整压缩级别、图像大小以及是否要转换为 WebP。还可以向文件名添加自定义后缀。

图片优化工具介绍_第5张图片

Jpeg.rocks

JPEG.rocks是一个客户端(完全在浏览器中处理图像)和开源的、隐私友好的JPEG图像优化器。文件大小或文件数量似乎也没有限制,同时也可以自定义输出文件质量。

图片优化工具介绍_第6张图片

Compressorjs

Compressorjs与前面提到的其他工具完全不同。它包含了大约十几种不同的设置,让你自定义图像质量,大小,MIME类型等等。唯一的限制就是一次只能处理、执行一个文件。虽然不能进行批量优化,但对于要特定图像执行的特定优化非常有效。

图片优化工具介绍_第7张图片

squoosh

Squoosh由Chrome Labs团队设计。这个工具同样仅限于单个图像,但它包括几个选项,用于减小大小、调色板、选择压缩方法、压缩质量级别以及一系列其他高级设置。

图片优化工具介绍_第8张图片

SVGOMG

SVGOMG 专门用于减小 SVG 图形的大小。它是SVGO(一个基于Node.js的工具)的GUISVG 优化器很有用,因为许多生成 SVG 的程序在生成图像的 SVG 代码中都包含冗余和无用的信息。

图片优化工具介绍_第9张图片

Imagecompressor

imagecompressor使用有损压缩来减小 JPEGGIFPNG 图像的大小。最多支持上传 20 张图像,并且我们还可以选择在下载之前自定义每个图像的压缩级别和质量。

图片优化工具介绍_第10张图片

Shrinkme

ShrinkMe 可以批量优化 JPEGPNGWebPSVG 图像,而不会造成明显的质量损失。文件数量或文件大小没有限制,但较大的文件意味着较慢的压缩过程。

图片优化工具介绍_第11张图片

Jpegstrip

Jpegstrip通过去除不必要的数据来优化 JPEG 文件。一次只允许上传一个图像,因此这仅对少数 JPEG 格式的图像有用。

图片优化工具介绍_第12张图片

ShrinkMedia

ShrinkMedia 支持优化分辨率高达 5000x5000PNGJPEGWebP 图像,并且还可以作为适用于 iOSAndroid 的移动应用程序使用。但是此工具一次只能优化一个图像。

图片优化工具介绍_第13张图片

Optimizeimages

Optimizeimages支持处理SVGPNGJPEGWebPGIFAVIF格式的文件,同时还提供了将文件转换为WebPAVIF的选项。最多支持优化多达 30 张图像并选择压缩质量选项(推荐、中或超)。

图片优化工具介绍_第14张图片

Avpress

Avpress这个工具与之前的都略有不同,因为它专门用于优化视频文件和 GIF 动画。它允许一次处理单个视频或 GIF,并包括多个自定义和输出设置。

图片优化工具介绍_第15张图片

Avif

Avif可以将几乎任何图像格式转换为 AVIF(这是一种下一代文件格式,据称具有比 WebPJPEGPNGGIF 更好的压缩)。这个工具似乎对文件数量或文件大小没有任何限制,但请注意,并非所有现代浏览器都支持 AVIF 格式。

图片优化工具介绍_第16张图片

Tinypng

Tinypng是一个较旧的工具,可以优化WebPPNGJPEG文件。最多一次可以上传 20 个,每个大小最多为 5MB。

图片优化工具介绍_第17张图片

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

到目前为止,前面提到的都是手动批量处理优化图像的工具。但在大型项目的上下文中,我们需要考虑使用一些三方库来处理工作流。以下列举了一些库:

  • SVGO 是流行的 SVG 优化工具,是前面提到的 SVGOMG 背后的核心;
  • libSquoosh 是 Squoosh API,可以构建即时优化图像的 JavaScript 程序;
  • imagemin 是一个较旧的未维护的 JavaScript 项目,可以通过编程方式优化图像。

你可能感兴趣的:(前端,javascript)