图像是网络上提供的最基本的内容类型之一。他们说，一张图片胜过千言万语。但是，如果您不小心，图像大小有时会达到数十兆字节。因此，虽然Web图像需要清晰明了，但可以缩小和压缩它们的大小，以将加载时间保持在可接受的水平。在我的网站上，我注意到我的主页的页面大小超过1.1MB，图像占据了大约88%，我还注意到我提供的图像比他们需要的要大（在分辨率方面），显然，还有很大的改进空间。我开始阅读AddyOsmani出色的EssentialImageOptimization电子书，并开始按照他们的建议优化我网站上的一些图像，然后对响应式图像进行了一些研究并应用了它。这将页面大小减少到445kb，大约减少了62%！什么是图像压缩？压缩图像就是减小文件大小，同时将图像保持在可接受的清晰度范围内。我使用imagemin来压缩我网站上的图像。要使用imagemin，请确保已安装Node.js，然后打开终端窗口，cd进入项目，并运行以下命令：npminstallimagemin然后创建一个名为imagemin.js的新文件，内容如下：constimagemin=require('imagemin');constPNGImages='assets/images/*.png';constJPEGImages='assets/images/*.jpg';constoutput='build/images';您可以根据您的需要值更改PNGImages、JPEGImages和输出以匹配您的项目结构。另外，要进行图片压缩，需要根据需要压缩的图片类型安装相应的插件。JPEG/JPG的优点JPGJPG最大的特点是有损压缩。这种高效的压缩算法使其成为一种非常轻量级的图像格式。另一方面，虽然被称为“有损”压缩，但JPG的压缩方式仍然是一种高质量的压缩方式：当我们将图片体积压缩到原始体积的50%以下时，JPG仍然可以保持60%。％质量。另外，JPG格式以24位存储单张图片，最多可以呈现1600万种颜色，足以满足大部分场景下的色彩需求，这决定了压缩前后的质量损失不易被察觉。我们人眼看到的Perceived——前提是你用对了业务场景。JPG使用场景JPG适合呈现色彩丰富的图片。在我们日常开发中，JPG图片经常以大背景图、轮播图或banner图的形式出现。JPG有损压缩的缺陷在上图的轮播图上确实很难展露锋芒，但是当它处理矢量图、Logo等线条感强、色彩对比强烈的图像时，人为压缩造成的图像模糊会相当明显。另外JPEG图片不支持透明处理，透明图片需要调用PNG渲染。此处使用MozJPEG压缩jpeg使用Mozilla的MozJPEG工具，该工具可通过imagemin-mozjpeg作为Imagemin插件使用。您可以通过运行安装它：npminstallimagemin-mozjpeg然后将以下内容添加到您的imagemin.js：constimageminMozjpeg=require('imagemin-mozjpeg');constoptimiseJPEGImages=()=>imagemin([JPEGImages],output,{plugins:[imageminMozjpeg({quality:70,}),]});optimiseJPEGImages().catch(error=>console.log(error));可以通过在终端中运行nodeimagemin.js来运行该脚本。这将处理所有JPEG图像并将优化版本放入build/images文件夹中。我发现在大多数情况下将质量设置为70会产生足够清晰的图像，但您的项目需求可能不同，您可以自己设置适当的值。默认情况下，MozJPEG会生成渐进式jpeg，这会导致图像从低分辨率逐渐加载到高分辨率，直到图像完全加载。由于它们的编码方式，它们也比原始jpeg略小。您可以使用SindreSorhus的命令行工具检查JPEG图像是否渐进。AddyOsmani很好地总结了使用渐进式jpeg的优缺点。对我来说，我觉得利大于弊，所以我坚持使用默认设置。如果您更喜欢使用原始jpeg，可以在选项对象中将progressive设置为false。另外，请确保imagemin-mozjpeg的版本发生变化，请重新查看相应的文档。PNG（PNG-8和PNG-24）PNG的优点和缺点PNG（便携式网络图形格式）是一种具有无损压缩的高保真图像格式。8和24，这里是二进制数的位数。根据我们前置知识中提到的对应关系，8位PNG最多支持256种颜色，而24位PNG可以显示大约1600万种颜色。PNG图片比JPG有更强的色彩表现力，线条处理更细腻，对透明度有很好的支持。弥补了我们上面提到的JPG的局限性，唯一的缺点就是 太大了。PNG应用场景前面我们提到，对于色彩层次丰富的复杂图片，如果使用PNG来处理，成本会比较高。我们通常将它们交给JPG进行存储。考虑到PNG在处理线条和颜色对比方面的优势，我们主要用它来呈现小Logo，颜色简单，对比强烈的图片或背景等。使用pngquant优化PNG图像pngquant是我优化PNG图像的首选工具，你可以通过imagemin-pngquant使用它：npminstallimagemin-pngquant然后将以下内容添加到你的imagemin.js文件中：constoptimisePNGImages=()=>imagemin([PNGImages],output,{plugins:[imageminPngquant({quality:'65-80'})],});optimiseJPEGImages().then(()=>optimisePNGImages())。赶上（错误=>控制台。日志（错误））；我发现将质量设置为65-80是文件大小和图像质量之间的一个很好的折衷。通过这些设置，我能够获得从913kb到187kb的网站屏幕截图，而没有任何明显的视觉损失，减少了79%！那是两个文件。看一看自己判断：原图（913kb）优化后的图（187kb）WebPWebP的优点WebP像JPEG一样容易做细节图，像PNG一样支持透明度，能像GIF一样显示动态图-it综合了优点各种图片文件格式。WebP的官方介绍对于这一点有比较权威的说法：与PNG相比，WebP无损图片的尺寸减少了26%。在等效的SSIM质量指数下，WebP有损图像比同类JPEG图像小25-34%。无损WebP支持透明度（也称为alpha通道）并且只需要22%的额外字节。对于可接受有损RGB压缩的情况，有损WebP还支持透明度，并且通常提供的文件大小是PNG的3倍。为支持WebP的浏览器提供WebP图像WebP是谷歌推出的一种相对较新的格式，旨在通过以无损和有损格式对图像进行编码来提供更小的文件大小，使它们成为JPEG和PNG的良好替代品。WebP图像的清晰度通常可与JPEG和PNG相媲美，而且文件大小要小得多。例如，当我将上面的屏幕截图转换为WebP时，我得到了一个88kb的文件，其质量与913kb的原始图像相当，减少了90%！看看这三张图片，你能分辨出区别吗？原始PNG(913kb)优化后的PNG图像(187kb)WebP图像（88kb，可在Chrome或Opera浏览器中查看）就个人而言，我认为视觉效果具有可比性，并且尺寸节省不容忽视。现在我们已经认识到尽可能使用WebP格式的价值，重要的是要注意它不能完全替代JPEG和PNG，因为对WebP的浏览器支持不是通用的。在撰写本文时，Firefox、Safari和Edge都是不支持WebP的浏览器。然而，据caniuse.com称，全球超过70%的用户使用支持WebP的浏览器。这意味着通过使用WebP图像，您可以为大约70%的客户提供更快的网页和更好的体验。要安装它，请运行以下命令：npminstallimagemin-webp然后将以下内容添加到您的imagemin.js文件中：constimageminWebp=require('imagemin-webp');constconvertPNGToWebp=()=>imagemin([PNGImages],output,{use:[imageminWebp({quality:85,}),]});constconvertJPGToWebp=()=>imagemin([JPGImages],output,{use:[imageminWebp({quality:75,}),]});optimiseJPEGImages().then(()=>optimisePNGImages()).then(()=>convertPNGToWebp()).then(()=>convertJPGToWebp()).catch(error=>console.log(error));我发现将质量设置为85会生成质量与PNG相当但更小的WebP图像。对于jpeg，我发现将质量设置为75可以很好地平衡视觉效果和文件大小。在HTML中提供WebP图像一旦您拥有WebP图像，您可以使用以下标记将它们提供给可以使用它们的浏览器，同时将png或jpeg提供给不兼容WebP的浏览器。
