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

时间:2021-11-12 来源:未知网络 作者:996建站网

摘要: 压缩各种格式的图片。

  • 原文:Web 性能优化: 图片优化让网站大小减少 62%
  • 作者:前端小智

Fundebug经授权转载,版权归原作者所有。

这是 Web 性能优化的第二篇,上一篇在下面看点击查看:

  • Web 性能优化: 使用 Webpack 分离数据的正确方法

图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话,图片大小有时高达几十兆。

因此,虽然网络图像需要清晰明快,但它们尺寸可以缩小压缩的,使用加载时间保持在可接受的水平。

在我的网站上,我注意到我的主页的页面大小 超过了 1.1MB,图片占了约88%,我还注意到我提供的图像比它们需要的大(在分辨率方面),显然,还有很多改进的空间。

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

我开始阅读 Addy Osmani 的优秀 Essential Image Optimization电子书,并开始在我的网站上按照他们的建议做了一些图片的优化。,然后再对响应式图像进行了一些研究并应用了它。

这使得页面大小减少到 445kb,约 62% !

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

什么是图像压缩?

压缩图像就是在图片保持在可接受的清晰度范围内同时减少文件大小,我使用 imagemin 来压缩站点上的图像。

要使用 imagemin,确保你已经安装了 Node.js,然后打开一个终端窗口,cd 进入项目,并运行以下命令:

npm install imagemin

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

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序