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图像

（编辑：湖南网）

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