如何通过优化主页大小，将网站大小减少 62%

本文链接：https://blog.csdn.net/qianduan6666666/article/details/89432121

本文介绍了如何通过使用 imagemind、MozJPEG 和 pngquant 压缩和优化 JPEG 和 PNG 图像，以及如何利用 WebP 格式进一步减少文件大小。通过这些方法，作者成功将网站图像大小减少了 79% 至 90%，并讨论了 WebP 的浏览器兼容性和使用技巧。

摘要由CSDN通过智能技术生成

什么是图像压缩？

压缩图像是指在保持可接受的视觉质量水平的同时减小图像文件的大小。我使用imagemin来压缩我网站上的图像。

要使用 imagemin，请确保已安装了 Node.js，然后打开终端窗口，cd 到项目的文件夹，并运行以下命令：



npm install imagemin

然后创建一个名为 imagemin.js 的新文件，并粘贴以下内容：



const imagemin = require('imagemin');const PNGImages = 'assets/images/*.png';const JPEGImages = 'assets/images/*.jpg';const output = 'build/images';

你可以根据具体的项目结构随意修改 PNGImages、JPEGImages 和 output 的值。

要进行图像压缩，你需要根据要压缩的图像类型安装一些插件。

使用 MozJPEG 压缩 JPEG

为了压缩 JPEG 图像，我使用了 Mozilla 的MozJPEG，它可以通过imagemin-mozjpeg作为 imagemin 的插件使用。你可以通过运行以下命令来安装它：

npm install imagemin-mozjpeg

然后将以下内容添加到 imagemin.js 文件中：

const imageminMozjpeg = require('imagemin-mozjpeg');const optimiseJPEGImages = () =>  imagemin([JPEGImages], output, {    plugins: [      imageminMozjpeg({        quality: 70,      }),    ]  });optimiseJPEGImages()  .catch(error => console.log(error));

你可以在终端中输入 node imagemin.js 来运行这个脚本。这样就会处理所有的 JPEG 图像，并将优化过的图像放在 build/images 文件夹中。

我发现将质量设置为 70 可以得到足够好的图像，但是你的要求可能会不一样，所以请根据你的需要设置具体的值。

MozJPEG 默认会生成渐进式 JPEG，在加载图像时，从低分辨率逐渐加载到高分辨率&#x