许多开发人员花费了很多时刻优化网页性能,比方优化 js、css、减少http 请求等等,但减小图片巨细产生的优化比其他一切范畴加起来影响更大。
WebUtils Bulk Image Compress
WebUtils Bulk Image Compress 答应紧缩图画并将其转化为 WebP、JPG、PNG、AVIF 和 JXL。不约束文件巨细或文件数量,但假如测验进行批量转化,这或许比较缓慢。还能够调整质量和尺度,所以紧缩在客户端完结。
Compressor.io
Compressor.io 能够运用有损或无损紧缩优化 JPEG、PNG、SVG、GIF 和 WebP,每个文件最高可达 10MB。假如要自定义紧缩或运用较大的文件,则必须付费获得高档方案。在这种情况下,紧缩图片在服务器端完结,因而将获得更快的成果。
Imagecompresser.com
Imagecompresser.com 答应一起上传多达 10 个文件,并支撑 PNG、JPEG、WebP、JPG 和 GIF 格局。每个图画的文件巨细没有任何约束,因而这或许适用于 10 个或更少的大文件。
AnyWebP
AnyWebP 专门用于以 WebP 格局转化图画,能够抓换为 JPEG、PNG 或 ICO。能够根据文件巨细或质量进行自定义。也能够将简直任何文件格局 (TIFF、PSD、BMP 等) 转化为 WebP。该东西还为 Mac 和 Windows 供给离线本机应用程序,可批量转化。无论如何,没有一个文件被上传到服务器。
Compressimage.io
Compressimage.io 答应彻底离线的图画优化,不约束文件巨细或文件数量。仅有的约束是只能紧缩 JPEG 和 PNG。自定义选项答应调整紧缩等级、图画巨细以及是否要转化为 WebP。
JPEG.rocks
JPEG.rocks, 顾名思义,它是一个隐私友好的 JPEG 图画优化器,彻底客户端和开源。文件巨细或文件数量没有约束,能够自定义输出文件质量。
Compressor.js
Compressor.js 与此列表中的其他东西彻底不同。它包含十几种不同的设置,可自定义图画质量、巨细、mime 类型等。仅有的大约束是必须一次做一个文件。因而,这关于批量调整巨细不是一个好的挑选,但关于要在特定映像上履行的特定优化是有用的。运用浏览器的本机canvas.toBlob
API 做紧缩作业。
Squoosh
Squoosh is 由 Chrome 实验室团队规划。web 应用程序仅限于单个图画,但它包含几个选项,用于减小尺度、调色板、挑选紧缩办法、紧缩质量等级以及一系列其他高档设置。支撑此东西的引擎也可作为 API 或 CLI 用于批量处理。
SVGOMG
SVGOMG is 专门用于减小 SVG 图形的巨细。它是 SVGO 的 GUI,是基于 Node.js 的东西。SVG 优化器非常有用,由于许多生成 SVG 的程序在生成图画的 SVG 代码中包含多余和无用的信息。
Optimizilla
Optimizilla 运用有损紧缩来减小 JPEG、GIF 和 PNG 图画的巨细。最多能够上传 20 张图画,并且能够挑选在下载之前自定义每个图画的紧缩等级和质量。
Shrink Me
Shrink Me 可批量优化 JPEG、PNG、WebP 或 SVG 图画,而不会形成明显的质量丢失。文件数量或文件巨细没有约束,可是较大的文件将意味着较慢的紧缩进程。
JPEG Stripper
JPEG Stripper 经过剥离不必要的数据来优化 JPEG 文件。可用于在不影响图画质量的情况下从 jpeg 中删除一切元数据。一次只答应上传一张图片,因而这仅对几张 JPEG 格局的图片有用。
Shrink Media
Shrink Media 可优化高达 5000×5000 分辨率的 PNG、JPEG 和 WebP 图画,它也可作为 iOS 或 Android 的移动应用程序运用。运用交互式滑块更改质量等级和相片尺度。也能够将 URL 粘贴到图画,但此东西仅答应一次优化一个图画。
OptimizeImages
OptimizeImages 可减小 SVG、PNG、JPEG、WebP、GIF 和 AVIF 的巨细,一起还能够挑选转化为 WebP 或 AVIF。 能够扫描你的网站以检查需求优化的图画。优化多达 30 张图画,并挑选紧缩质量选项 (引荐、中等或超清)。
ImagesTool.com
ImagesTool.com 包含许多不同的图画处理东西。您能够调整巨细、转化、紧缩图画等。支撑 JPEG、WebP、SVG、GIF 和 APNG。客户端悉数完结,您能够在无损和自定义紧缩之间进行挑选。您能够优化的文件数量没有约束,也能够按文件夹上传或粘贴到图画中,不需求上传。
AVPress
AVPress 有点不同,由于它专门用于优化视频文件和 GIF 动画。它答应一次处理单个视频或 GIF,并包含可应用于所选文件的多个自定义和输出设置。彻底在客户端完结。
AVIF Converter
AVIF Converter 答应任何图画格局转化为 AVIF,AVIF是一种下一代文件格局,宣称比 WebP、JPEG、PNG 和 GIF 具有更好的紧缩。此应用程序对文件数量或文件巨细没有任何约束,但请注意,并非一切现代浏览器都支撑 AVIF 格局。
TinyPNG
TinyPNG 运用智能有损数据紧缩技术优化 WebP、PNG 或 JPEG 文件的东西。一次最多能够上传 20 个,每个巨细最多能够上传 5mb。
图片紧缩 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…