如何使图像加载更快

　　图片会影响网站的加载时间。网站越快，用户体验越好，从而带来转化和利润。业务经理和所有者希望其站点的图像即使在移动设备上也能快速加载。但是他们怎么做呢?在“ 案例的优化图像性能，”上周我的文章，我解释一个网站的成功轻量级图像的重要。

　　在本文中，我将提供优化图像的建议。目标是在不降低性能的情况下创建引人入胜的用户体验。

　　消除不必要的图像

　　根据HTTP Archive的报告，在2019年，典型的网页在加载时可能会请求28至32张图像。这些图像可能是必要的。

　　例如，人们期望大量图像出现在电子商务网站的产品类别页面上。这些图片通常很关键。

　　延迟加载图像

　　当典型的网页加载时，它会请求页面标记中列出的每个图像，即使其中许多图像不在屏幕上，也仅在用户向下滑动页面并向下滚动时才会显示。

　　图像的延迟加载是仅在需要时才加载图像的过程。首次加载网页时，它仅请求在屏幕上立即可见的那些图像。当用户向下移动时，将加载后续图像。

　　HTTP档案库报告说，当延迟加载屏幕外图像时，移动网页传输的图像数据的中位数千字节可能从843.5 KB降至426.7 KB。在某些情况下，这可能会使初始页面加载时间减少25%。

　　延迟加载图像的变体最初会注入图像的低分辨率版本，然后在用户看到图像后，再以高质量版本进行更新。这种方法还可以显着减少页面加载所需的时间。

　　延迟加载通常需要JavaScript。企业可以让其开发人员编写适合公司需求的延迟加载脚本，也可以使用几种可用脚本中的任何一种。

　　压缩影像

　　栅格格式(例如.jpg，.png，.webp和.gif)构成了典型网页上的许多图像。在某些情况下，可以压缩这些图像以使它们更快地加载，而没有明显的质量差异。

　　加载适当的尺寸

　　为用户的屏幕提供适当尺寸的图像。浪费的像素会增加不必要的重量。

　　开发人员Ilya Grigorik 在其有关图像优化的出色文章中指出，未压缩的光栅图像由像素组成，并且在初始加载时每个像素占4个字节。

　　因此，一个100 x 100像素的未压缩光栅图像为40,000字节(10,000 x 4)。要将字节转换为千字节，请除以1,024。因此，40,000字节的大小约为39 KB。

　　想象一下，您有一个图像将以360 x 200像素显示在屏幕上。在此大小下，未压缩的光栅图像将为72,000像素。这些像素中的每个像素需要4个字节，总共288,000个字节或大约281 KB未压缩。

　　尺寸为396 x 220像素的超大图像会重很多。具体地说，396 x 220图像将占据87120像素。那就是15,120个额外像素(87,120 – 72,000)。这些浪费的像素仍然需要4个字节，总计60,480字节或59 KB。

　　本示例适用于未压缩的光栅图像。并且有许多方法可以压缩图像的大小(以字节为单位)而不影响其像素分辨率。无论如何，请尽可能提供适当尺寸的图像。