Web性能优化： 图片优化让网站大小减少62%

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

const imageminPngquant = require('imagemin-pngquant');  
const optimisePNGImages = () =>  
  imagemin([PNGImages], output, {  
    plugins: [  
      imageminPngquant({ quality: '65-80' })  
    ],  
  });  
optimiseJPEGImages()  
  .then(() => optimisePNGImages())  
  .catch(error => console.log(error)); 

我发现将 quality 设置为 65-80 可以在文件大小和图像质量之间较好的折衷方案。

有了这些设置，我可以得到一个屏幕截图，我的网站从 913kb 到 187kb，没有任何明显的视觉损失，惊人的79% 的降幅!

这是两个文件。看一看，自己判断一下:

•  原图(913kb)
•  优化后的图像(187kb)

WebP

WebP 的优点

WebP 像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片——它集多种图片文件格式的优点于一身。

WebP 的官方介绍对这一点有着更权威的阐述：

与 PNG 相比，WebP 无损图像的尺寸缩小了 26％。在等效的 SSIM 质量指数下，，WebP 有损图像比同类 JPEG 图像小25-34％。 无损 WebP 支持透明度（也称为 alpha 通道），仅需 22％ 的额外字节。对于有损 RGB 压缩可接受的情况，有损 WebP 也支持透明度，与 PNG 相比，通常提供 3 倍的文件大小。

将 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% 的客户提供更快的 web 页面及更好的体验。

安装它，运行以下命令：

npm install imagemin-webp 

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

const imageminWebp = require('imagemin-webp');  
const convertPNGToWebp = () =>  
  imagemin([PNGImages], output, {  
    use: [  
      imageminWebp({  
        quality: 85,  
      }),  
    ]  
  });  
const convertJPGToWebp = () =>  
  imagemin([JPGImages], output, {  
    use: [  
      imageminWebp({  
        quality: 75,  
      }),  
    ]  
  });  
optimiseJPEGImages()  
  .then(() => optimisePNGImages())  
  .then(() => convertPNGToWebp())  
  .then(() => convertJPGToWebp())  
  .catch(error => console.log(error)); 

我发现，将 quality 设置为 85 会生成质量与 PNG 相当但小得多的 WebP 图像。对于 jpeg，我发现将 quality 设置为 75 可以在视觉和文件大小之间取得很好的平衡。

提供 HTML格式的WebP图像

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!