图片会影响网站的加载速度。网站越快，用户体验越好，从而带来转化和利润。
业务经理和企业主希望他们的网站图片即使在移动设备上也能快速加载。但如何实现呢？在“优化图像性能的必要性”一文中，我在上周解释了轻量级图片对网站成功的重要性。
在这篇文章中，我将提供优化图片的建议。目标是在不拖累性能的情况下创造吸引人的用户体验。
消除不必要的图片
根据 the HTTP Archive的一份报告，2019年一个典型的网页在加载时可能会请求28到32张图片。这些图片可能是必要的。
例如，人们会期望电子商务网站的产品分类页面上出现大量图片。这些图片通常是至关重要的。
为Medium上的用户体验期刊UX Planet撰稿的Ainsley Fagerström描述了网站上应该使用的图片类型。 paraphrasing并补充她的列表，我们可以说必要的图片包括：
- 解释或阐明内容；
- 唤起情感以传达某些信息；
- 与其余内容相关的观点；
- 帮助您提升销量。
可能被移除的图片类型包括：
- 包含文字的截图；
- 装饰性图片；
- 无法传达有效信息的库存图片。
另有数据显示，网页上的图片数量越少，销量越高。
Daniel An 和 Pat Meenan 在一篇 2016 年的 Think with Google 文章中写道：“在典型的零售页面中，如网站图标、徽标和产品图片等图形元素，很容易占页面总大小的三分之二（即数百千字节）。”其结果是：整个会话期间页面加载速度逐渐变慢。事实上……转化用户的会话比未转化的会话少了 38% 的图片。
2016 年的一份报告指出，相对复杂且加载缓慢的页面（通常包含大量图片）的转化率低于图片较少的快速页面。
图片懒加载
当典型网页加载时，它会请求页面标记中列出的所有图片，即使其中许多图片位于屏幕之外，只有在用户滑动或向下滚动页面时才会显示。
图片懒加载是指仅在需要时才加载图片的过程。当网页首次加载时，它仅请求屏幕上立即可见的图片。后续图片会在用户向下滚动时加载。
HTTP Archive 报告称，当对屏幕外的图片启用懒加载时，移动网页传输的图片数据中位数可从 843.5 KB 降至 426.7 KB。在某些情况下，这可能会将初始页面加载时间减少 25%。
图片懒加载的一种变体是首先注入图片的低分辨率版本，然后在用户可以看到图片后将其更新为高质量版本。这种方法也显著缩短了页面加载时间。
懒加载通常需要 JavaScript。企业可以让开发人员编写针对公司需求定制的懒加载脚本，或使用多种可用的脚本之一。
在一篇关于减少网站初始加载时间秒数的文章中，撰稿人 Hamlet Batista 推荐了 Andrea Verlicchi 的 LazyLoad 脚本。Katie Hempenius（Google 软件工程师）推荐使用 Alexander Farkas 的 Lazysizes 脚本。这两种解决方案都是众多用于懒加载的脚本中的例子。
压缩图片
Raster formats — such as .jpg, .png, .webp, and .gif — make up many of the images on a typical web page. In some cases, these images can be compressed to make them load more quickly without a noticeable difference in quality.
压缩后的图片看起来几乎与体积大得多的未压缩图片相同。左边的图片为 169.5 KB。右边的图片小得多，仅为 39.5 KB，但质量相似。照片：Robert Bye。
人们可以使用诸如 Adobe Photoshop、ImageOptim 或 Squoosh 等工具进行手动优化。或者，可以通过多种解决方案自动进行优化，包括内容分发网络、应用程序编程接口以及脚本或软件包。
来自图像优化 CDN Imgix 的这个示例显示，一张原始大小为 3.5 MB 的照片被压缩至 26.36 KB。
在一篇关于图像优化的文章中，Google Developers 网站推荐了几种解决方案。
图像优化 CDN：
- Imgix；
- Cloudinary；
- Akamai Image Manager；
- ImageEngine。
图像优化 API：
- Kraken.io；
- Imagify；
- ShortPixel；
- Fastly Image Optimizer；
- TinyPNG。
图像优化脚本、包和命令行工具：
- Imagemin CLI；
- Imagemin npm 包；
- Guetzli；
- MozJPEG；
- Pngquant；
- Zopfli；
- Gifsicle；
- SVGO。
加载合适尺寸的图片
为用户屏幕提供合适尺寸的图片。浪费的像素会增加不必要的体积。
在他的关于图像优化的优秀文章中，开发者 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 的图片包含 87,120 个像素。这比之前的 72,000 像素多了 15,120 个像素（87,120 – 72,000）。这些多余的像素每个仍需 4 字节，总计 60,480 字节，即约 59 KB。
以上示例针对的是未压缩的光栅图像。实际上有许多方法可以在不影响像素分辨率的情况下压缩图像的字节大小。但无论如何，应尽可能提供合适尺寸的图片。