“渐进式” JPEG:为什么许多网站都避免以这种方式呈现JPEG?优点缺点?


39

网页使用JPEG图像时,通常以自上而下的方式呈现它们... ...但也可以使用称为渐进JPEG的模式来呈现它们,该图像以全尺寸开始,但模糊,然后随着连续传递,直到完全加载为止。 渐进式加载要求以这种方式保存图像。

为什么没有更多的网站使用渐进式JPEG?有什么缺点?仅仅是缺少工具支持,还是这些文件在某种程度上不如传统的自上而下呈现的JPEG图像?


2
隔行扫描的gif也发生了什么?

7
他们在1990年左右的电影中是一位伟大的悬念建造者,正在等待图像加载,哦,它的方块感有所减少,好了,我们几乎可以看到杀手的面孔了……BAM [切入戏剧性的动作序列]
Mark Henderson

1
我喜欢Blade Runner中使用的无限增强放大算法。
克里斯·瑞

3
@Chris,与Red Dwarf中的软件相比没什么。
彼得·泰勒

@PeterTaylor太好了:-)
Chris W. Rea

Answers:


14

自创建以来,渐进式JPEG就具有散点图支持。JPEG上的Wikipedia页面上说:

但是,渐进式JPEG并没有得到广泛的支持,[需要引用],甚至不支持渐进式JPEG的某些软件(例如Windows 7之前的Internet Explorer版本)[12]仅在完全下载后才显示图像。

注意:第一个语句是无源的,第二个语句的源不一定表示仅Windows 7支持此语句。

我不记得我什么时候第一次避免使用渐进式JPEG,但是最近的问题是Flash中的图像解析器(可以加载PNG,GIF和JPEG)也不能加载渐进式JPEG Internet档案上的更新链接


但是使用Flash是邪恶的!;-)
Marco Demaio 2015年

15

我通常将图像保存为渐进式图像。

我从未经历过或听说过缺点或渲染问题。即使某些非常老的浏览器可能无法呈现渐进效果,但它们最终仍会呈现图像,因此这不是一个大问题。

渐进JPEG图像的尺寸通常小于没有渐进图像的相同图像

例如,当采用渐进式而不丢失清晰度像素时,一个8K(最高质量)的JPG图像很容易变成6K(最高质量)。

而且,对于像Photoshop这样的图像编辑器,将图像另存为JPG渐进式图像不需要任何操作(这只是使用“另存为”命令时出现的窗口中的复选框),所以我通常这样做。


7
的确,yuiblog.com / blog / 2008/12/05 / imageopt-4发现,大于10K的JPEG进行渐进压缩时,有94%的JPEG压缩效果更好(较小)(但是对于小文件却有所不同,因为小于10K的JPEG压缩率为75%)没有渐进模式会更好)。因此,通常最好将大型JPEG保存为渐进式。
约翰·梅勒

1
我同意John的观点,如果您将质量从最高质量降低到非常高(80%-90%)或更低,您将发现Progressive不再产生较小的尺寸。
joelpittet 2012年

1
您无法确定6K和8K图像的质量是否相同。这是最大设置,减少将是不可见的。我怀疑较小的文件会造成更大的损失。渐进算法不可能将效率提高25%。如果有的话,它的效率应该较低,因为它为相关的压缩数据增加了一层隔离。
Zdenek

6

Artlung涵盖了一些支持注意事项,但事实是,多数情况下这并不重要。问题中最重要的一点是“直到满载为止”。渐进式格式并不是使图像模糊的美学效果,而是可以起作用的:

如果图像足够大(按文件大小),需要一段时间才能下载,那么您会看到进度。
即使所有JPEG都保存为逐行格式,但以当前的通用连接速度,您将要遇到的绝大多数图像都还不够大,以致您无法在任何程度上看到这种效果。当每个人都在使用慢速电话调制解调器时,这是一个好主意,但越来越引起人们对实际应用有限的好奇心,超出了确实需要超大图像(例如挑剔的摄影师)之类的站点。

隔行扫描GIF也是一样,因为有人在注释中添加了它们。

这里有一个潜在的受众因素,例如,如果您考虑的是那些净基础设施不发达的国家,它们的速度可能会大大降低,但我不能这样说。我可以看到他们为可能针对移动浏览一些应用,但后来我们回送为特征参差不齐的支持。


1
我认为移动设备实际上是这里的重要考虑因素 -我猜是新的智能手机支持它。它将使3G或更慢的速度下的浏览体验变得更好—如果您看到的图像加载不相关,则可以在浪费更多时间或金钱之前就离开
Baumr

移动浏览器可能具有默认情况下仅显示渐进JPEG的第一或第二遍的设置。这样可以节省数据并提供更快的浏览体验。
2014年

堡盟:不,CPU成本太高;我的手机实际上甚至没有部分绘制规则的图像,而是等待满载才显示。
Zdenek

sunk818:虽然理论上可行,但这将是跨层黑客。您将不得不在堆栈的TCP部分中解析JPEG并尽早中断传输……太糟糕了。而且它也会破坏流水线。而且大多数JPEG库都会拒绝使用此类文件,因此您也必须使用自制软件!就是不行。
Zdenek

3

Google在images.google.com中使用类似渐进式的图像加载方式,首先,他们会伸出拇指来预览尺寸,然后将原始图像加载到上方。我认为这是一个好习惯。就像渐进式JPEG


我也是 我的解决方案甚至更好,因为当我逐步将其隐藏在低质量版本中时,Google会隐藏完整的图像。
Zdenek

2

渐进式渲染(gif / jpeg)适用于互联网的美好旧时光,当时服务器运行缓慢,最终英里数据传输是通过POTS进行的。没人再浪费时间了。

我的许多网站访问者都在宽带上,除了在非常大的图像上产生最小的褪色效果外,它毫无用处(尽管在8MB电缆上几乎看不到)。如果您的听众仍在使用拨号电话,则可能要担心。

正如下面的评论所指出的,由于链路速度或延迟问题,旧的是新的,新的最终英里传输速度仍然是移动电话网络和卫星接入的问题。因此,请注意您的受众并重新实现它,以在需要时提供更好的用户体验。


3
您忽略了移动3G连接-这些连接可能很慢;这将取决于访问者是否会访问您的网站,但是市场和使用率实际上确实在增长
Baumr

1
渐进式JPEG也适用于带宽有限且延迟高的岛国。
太阳

但是仍然不应避免进行渐进式渲染。
Bhavesh Gangani 2014年

是的,如果您使用的是2G或3G,那么如今这些天就更少了。刚刚有来自Barundi的用户从2G移动连接中以115秒完成的有线桌面在全球范围内加载了3-8秒的页面。在移动设备上,它仍然可能是一个缓慢的世界。
ClearCrescendo

Chrome浏览器连接的60%是2G - Chrome浏览器开发高峰论坛2016年
托马斯·麦凯布

1

对于像Wikipedia这样的网站而言,它们实际上是在实时地呈现自己的缩略图,还有一个额外的注意事项:所有用于创建渐进JPEG的算法都需要更多的内存和CPU周期。当原始文件足够大时,这会产生问题。


0

许多库根本不提供它,或者默认情况下不提供它。但这不是原因。我经营一个提供图像的网站,但讨厌渐进式JPEG。为什么?因为它们中使用的算法比我自己的算法差!我使用的技术与Google相同,另外我实际上在小图标上覆盖了一个中等的缩略图。这样,无论原始连接有多大,用户都能在任何连接上立即获得几乎完整的质量。渐进文件变得非常块状,破坏了这种效果。

缩略图叠加是实现此目的的方法。


0

渐进JPEG可在Chrome,Firefox和IE 9+中使用。我认为这涵盖了当今大多数使用Web的浏览器。

在许多情况下,渐进式JPEG可提供更好的用户体验。我喜欢在访问速度较慢的网站(岛屿国家,斜线效果,高峰流量等)时看到进步的感觉。我不需要立即看到完整的质量。对图像的初步构想通常是足够好的。看到从顶部到底部加载缓慢的图像使我很烦恼。这让我想起了下载ASCII艺术作品的300波特调制解调器时代。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.