演示JPEG基线和渐进加载的图像序列。

渐进式jpeg对感知性能产生有意义的影响

JPEG图像文件格式是web上最常见的图像格式之一,可以使用两种解码配置文件之一进行编码:基线(顺序细节)和渐进(附加细节)。后一种变体在网络上比前一种变体提供了许多优势;特别是对于带宽较低或延迟较长的网站访问者。

比较基准JPEG从上到下加载完整细节。这要求您在看到之前下载了整个图像。渐进式jpeg也可以从上到下下载,但在多个过程中解码,在每个过程中添加更多细节。在低分辨率下,您可以看到图像的全部内容,加载时会添加详细信息。

下面的两个图像序列试图演示两个配置文件之间加载序列(从左到右)的差异。

基线解码

逐行译码

您可以在行动中与Pooya Karimian出色的网络浏览器中看到这基线与渐进JPEG加载模拟器.

随着渐进式JPEG,你有机会看到的图像是什么提早了很多,可以等待它完全加载,或者更可能只是与你一天运动上没有感觉就像你在遗漏了。无论图像是一个有趣的米姆,文章插图,或如果事实证明你在等只包含一个广告的加载空白区域。

渐进式JPEG会对网站访问者的性能体验产生有意义的影响。远不是每个人都能访问或负担得起高速低延迟的互联网连接。请记住,现在世界上使用慢速互联网连接的人比以往任何时候都多。

逐行图像创建低端设备和用户对缓慢的,高延迟或不稳定连接的感知更快,反应更迅速的用户体验。解码渐进式JPEG加在CPU上的一些附加的应变,增加在存储器中的消耗,并因此在设备的电池寿命微不足道的减少与基线相比的图像。

谷歌的研究表明,“平均来说,对渐进式JPEG图像进行解码相当于对基线进行三次解码。”但是,您可以通过减少在文件中编码的解码过程的数量来减少这种影响,从而创建“半渐进式”JPEG。我稍后会在文章中讨论这些问题。

有很多过时的信息说,Safari和Internet Explorer不支持渐进式jpeg。然而,自从iOS 8和safari8(甚至更早)以及Internet Explorer 9和更高版本以来,渐进式图像已经得到了支持。为了澄清,“不支持”意味着图像在完全加载之前不会被渲染(因此,对图像为空而不是加载从上到下的基线)。

其他过时的信息表明渐进图像比基线图像大。这将因图像而异。然而,根据我对一组3500个图像的经验,大小差异可以忽略不计,渐进图像往往是~50字节较小的比基线图像。

您仍然可以应用图像压缩最佳实践,如使用Guetzli JPEG编码器,和losslessy重新排列与隔行扫描的逐行数据结构所得到的图像之后。

下面的命令示例使用JPEG传输(部分libjpeg工具;也被称为libjpeg程序)要无损地重新排列图像以进行渐进加载,请执行以下操作:

JPEG传输渐进式输出新_图像.jpeg\ 原始.jpeg

如果您想更进一步,可以调整jpeg的编码方式,以减少渐进式图像对处理器和内存需求的负面影响。这是一个更高级的话题,但是Cloudinary的文章“渐进式JPEG和绿色火星人”解释如何调整编码作业,以便以半渐进式JPEG结尾。这些方法可以减少解码过程,但您仍然可以获得渐进解码的好处。

请注意JPEG传输使用灰度JPEG文件时,可以生成空的0字节图像。切勿覆盖原始图像文件,并始终验证操作是否成功。

导出JPEG时,您最喜欢的照片编辑器很可能包含基线或渐进式选项。但是,您需要使用专用工具,如JPEG传输无损地转换图像。

进步的图片可以为你的网站的感知性能创造奇迹。我让自己在地狱中度过了两天:使用64kbit/s(单通道边缘)连接。很明显哪些网站实现了渐进式图像,哪些使用了基线图像。那些有基线图像的将是那些会挫败你和缓慢加载!

那么,渐进式/交错式PNG呢?不幸的是,与非隔行PNG相比,隔行PNG的文件大小可以大30-40%。