谷歌Lighthouse优化建议：适当调整图片大小，可节省移动数据网络流量并缩短加载用户

谷歌Lighthouse 报告的“机会”部分列出了页面中大小不合适的所有图像，以及可能节省的千字节 (KiB)。调整这些图像的大小以节省数据并缩短页面加载时间。

一、Lighthouse 如何计算超大图像？

对于页面上的每个图像，Lighthouse 将渲染图像的大小与实际图像的大小进行比较。渲染大小还考虑了设备像素比。如果呈现的大小至少比实际大小小 4KiB，则图像无法通过审核。

二、正确调整图像大小的策略

（1）理想情况下，您的页面不应提供大于用户屏幕上呈现的版本的图像。任何大于此值的内容都会导致浪费字节并减慢页面加载时间。

（2）提供适当大小的图像的主要策略称为“响应式图像”。使用响应式图像，您可以生成每个图像的多个版本，然后使用媒体查询、视口尺寸等指定要在 HTML 或 CSS 中使用的版本。

（3）图像 CDN是提供适当大小图像的另一个主要策略。您可以将图像 CDN 想象成用于转换图像的 Web 服务 API。

（4）另一种策略是使用基于矢量的图像格式，例如 SVG。使用有限的代码，SVG 图像可以缩放到任意大小。

（5）像gulp-responsive或responsive-images-generator这样的工具可以帮助自动化将图像转换为多种格式的过程。还有图像 CDN 可让您生成多个版本，无论是在您上传图像时，还是从您的页面请求它。