看看渐进式图像的状态和用户感知

Desknumber

我们都希望在网络上快速加载图像。选择正确的图像格式、优化质量和使用响应式图像是重要的任务，但除此之外我们还能做什么呢？“渐进式图像”是当今的热门话题。我们经常会看到一些文章，解释如何避免显示将加载图像的空白空间的技术。Medium和Facebook是应用此模式的网站和移动应用程序的示例。

我最近写了有关使用 SVG 作为占位符的不同方法，今年的PerfPlanet 性能日历包括两篇文章，进一步描述了 SQIP（一种基于模糊 SVG 的技术）：使用  进行渐进式图像加载和 。

当我第一次记录Medium 的图像加载技术时，我最感兴趣的 电子邮件营销列表 是对其技术进行逆向工程。我曾见过在飞行中连接速度较慢时浏览 Medium 的效果。我认为尽早渲染小图像、延迟加载并过渡到最终版本是一个好主意。

我们假设这些技术可以提高用户的感知性能。快速渲染胜过慢速渲染。尽早将某些内容放在用户屏幕上，即使它不是最终内容。



我想找到一些科学研究来支持这些加载图像的技术是（或不是）有益的。事实证明这是一个挑战。我找不到任何研究证明在图像加载之前显示模糊缩略图之类的内容可以改善用户的感知。然后我想到了渐进式 JPEG。

从用户感知的角度来看，Blur-up、SQIP等渐进式技术类似于渐进式 JPEG。浏览器首先渲染低质量图像，并在加载时将其替换为最终图像。

有趣的是，绝大多数 JPEG 图像都使用基线模式。根据一些 消息来源，渐进式 JPEG 最多占所有 JPEG 的 7%。如果我们似乎同意这些技术可以提高用户的感知性能，那么为什么渐进式 JPEG 没有比基线 JPEG 得到更广泛的使用呢。