对于电子商务而言，图片可以展示产品、激发顾客兴趣并提高转化率。然而，就网页性能而言，图片可能会拖慢页面加载速度，从而损害用户体验。
根据记录互联网数据的非营利组织 HTTP Archive 的一份报告，2019年3月，在桌面尺寸屏幕上显示的平均网页包含32个图像请求，总大小为899.6千字节；而在移动设备上显示的类似网页则包含28个图像请求，总大小为843.5 KB。
根据 HTTP Archive 的数据，2019 年 3 月，桌面端网页平均中位数的图片请求数为 32 次。类似地，移动端浏览器加载的网页平均中位数的图片请求数为 28 次。
图片对性能的影响
如果没有上下文，桌面端 32 张图片共 899.6 KB 的数据量可能看起来并不多，平均每张图片仅 28 KB。但根据 HTTP Archive 的数据，这些图片占到了网页所有资源请求总传输大小的一半。
这一情况同样适用于移动端。2019 年 3 月初，移动端网页的中位传输大小为 1,669 KB。其中图片请求占用了 843.5 KB，占比为 50.5%。
至于加载时间，根据 HTTP Archive 的数据，2019 年移动端网页的中位数加载时间为 17.1 秒，即“从导航开始到文档及其所有依赖资源全部加载完成所经历的时间”。
根据 HTTP Archive 的数据，使用浏览器的 onLoad 事件进行测量时，移动网页加载其所有资源的中位时间为17.1秒，而类似页面在台式计算机上加载时间约为6.3秒。
顺便说一下，所有资源的这种加载时间可能并不是你用于衡量网站性能的最佳指标。
许多企业关注首次内容绘制（First Contentful Paint）的时间。首次内容绘制是指“从导航开始到页面主要内容出现在屏幕上所经过的秒数”。2019 年 3 月，移动端网页的中位数为 5.8 秒，而桌面端网页约为 3 秒。
然而，由于我们关注的是传输的总千字节数，我们需要的是所有内容加载完毕所需的时间。如果以移动端 17.1 秒的加载时间为基础，除以移动端总负载 1,669 KB，我们可以估算出每秒大约传输 98 KB 数据。为了计算方便，我们将其近似为每秒 100 KB。
这个非常粗略的估算可能意味着，典型的移动端网页在加载图片上花费了 8 秒。
图片的重要性
对于你的一些最重要资源而言，8秒的加载时间并不算长。产品图片对在线商店至关重要，如果没有它们，销售将会困难得多。
营销人员和顾客都希望网页拥有清晰、大尺寸且有帮助性的摄影图片和图形。即使这意味着移动端网站需要消耗 843.5 KB 的数据和 8 秒的加载时间，也无可厚非。
但是，如果你既能拥有引人入胜、提升转化率的图片，又能拥有一个 更快的网页，那会怎样呢？
图片性能
优化图片性能需要在公司网站上使用的摄影图片和图形方面做出明智的选择。目标是在保持良好图像质量和出色呈现效果的同时，减少传输的图片相关数据总量（以千字节计）。
例如，HTTP Archive 报告称，如果采用按需加载屏幕外图片的策略，移动端网页传输的图片数据中位数可以从 843.5 KB 降至 426.7 KB。
因此，仅一项图片性能优化技术——懒加载（lazy loading），就可能为某些移动端网站节省多达 4 秒的页面加载时间。而且，懒加载并不会改变特定图片的质量或文件大小。
让我们再看一个例子。一家在线零售商发布了一本行业领先的电子书，甚至在亚马逊上也很受欢迎。公司对此电子书感到非常自豪，因此在整个网站的每一页页脚中都嵌入了封面图片。
在大多数屏幕上，封面图片的显示宽度为240像素。但原始图像（即网站每个页面传输时使用的图像）尺寸为宽1,330像素、高1,409像素，其文件大小高达1,180 KB——仅这一张图片就占用了这么多空间。
当这张相同的图片被调整大小以匹配其实际显示比例时，总大小仅为17 KB。对于网站访问者来说，图片质量没有任何可察觉的变化。
虽然有许多其他图像性能优化技术可以减少千字节数并提升页面性能，但这些内容可能适合在另一篇文章中讨论；对于本文，我的目标是鼓励你考虑优化网站的图像以提升性能。