Apple.com 如何实现渐进式 jpeg 加载?
How does Apple.com achieve their progressive jpeg loading?
如果你看看像这样的网站
http://www.apple.com/watch/overview/
您会看到他们的 .jpg 加载方式非常规,从像素化版本开始,然后慢慢增加分辨率,而不是从上到下加载。
在 inspector 中,图像对我来说没有什么特别之处。这是对文件本身进行索引以便浏览器按此特定顺序接收数据的某种方式吗?
这听起来像 Progressive Jpeg 格式,根据维基百科:
There is also an interlaced "Progressive JPEG" format, in which data is compressed in multiple passes of progressively higher detail. This is ideal for large images that will be displayed while downloading over a slow connection, allowing a reasonable preview after receiving only a portion of the data. However, support for progressive JPEGs is not universal. When progressive JPEGs are received by programs that do not support them (such as versions of Internet Explorer before Windows 7)[13] the software displays the image only after it has been completely downloaded.
这与 Javascript、HTML 或 CSS 无关,而更多是所用文件类型的产物。
我在其他网站上也看到过这种效果。这取决于您将其保存为的图像类型。根据Wikipedia:
隔行扫描(也称为交织)是一种对位图图像进行编码的方法,这样一来,部分接收到它的人会看到整个图像的降级副本。当通过慢速通信进行通信时 link,这通常比看到图像的一部分的完全清晰的副本更可取,因为它可以帮助观看者更快地决定是中止还是继续传输。
这对于 PNG 和 GIF 类型的图像称为隔行扫描,对于 JPEG 图像称为逐行扫描格式。
Photoshop 的 Save for Web...
部分有一个选项:
注意 Progressive
复选框。
渐进式 JPEG 和隔行扫描是两种不同的优化图像的技术。 GIF 和 PNG 我们交错(虽然不同)。隔行扫描只是按照设定的模式记录像素编码。
渐进式 JPEG 将编码数据分成多个片段。
下载图像流的应用程序可以在接收到数据时分阶段显示数据,也可以等到全部下载完毕。
如果选择分阶段显示,隔行和逐行的过程是不同的。对于隔行扫描,解码器需要将其拥有的像素扩展为尚未接收到的像素。
对于渐进式 JPEG,每次扫描都会添加压缩数据。对于每次显示迭代,解码器必须执行逆 DCT 和从 YCbCr 到 RGB 的转换。与隔行扫描不同,每次显示迭代都必须重复一些解码。
如果你看看像这样的网站
http://www.apple.com/watch/overview/
您会看到他们的 .jpg 加载方式非常规,从像素化版本开始,然后慢慢增加分辨率,而不是从上到下加载。
在 inspector 中,图像对我来说没有什么特别之处。这是对文件本身进行索引以便浏览器按此特定顺序接收数据的某种方式吗?
这听起来像 Progressive Jpeg 格式,根据维基百科:
There is also an interlaced "Progressive JPEG" format, in which data is compressed in multiple passes of progressively higher detail. This is ideal for large images that will be displayed while downloading over a slow connection, allowing a reasonable preview after receiving only a portion of the data. However, support for progressive JPEGs is not universal. When progressive JPEGs are received by programs that do not support them (such as versions of Internet Explorer before Windows 7)[13] the software displays the image only after it has been completely downloaded.
这与 Javascript、HTML 或 CSS 无关,而更多是所用文件类型的产物。
我在其他网站上也看到过这种效果。这取决于您将其保存为的图像类型。根据Wikipedia:
隔行扫描(也称为交织)是一种对位图图像进行编码的方法,这样一来,部分接收到它的人会看到整个图像的降级副本。当通过慢速通信进行通信时 link,这通常比看到图像的一部分的完全清晰的副本更可取,因为它可以帮助观看者更快地决定是中止还是继续传输。
这对于 PNG 和 GIF 类型的图像称为隔行扫描,对于 JPEG 图像称为逐行扫描格式。
Photoshop 的 Save for Web...
部分有一个选项:
注意 Progressive
复选框。
渐进式 JPEG 和隔行扫描是两种不同的优化图像的技术。 GIF 和 PNG 我们交错(虽然不同)。隔行扫描只是按照设定的模式记录像素编码。
渐进式 JPEG 将编码数据分成多个片段。
下载图像流的应用程序可以在接收到数据时分阶段显示数据,也可以等到全部下载完毕。
如果选择分阶段显示,隔行和逐行的过程是不同的。对于隔行扫描,解码器需要将其拥有的像素扩展为尚未接收到的像素。
对于渐进式 JPEG,每次扫描都会添加压缩数据。对于每次显示迭代,解码器必须执行逆 DCT 和从 YCbCr 到 RGB 的转换。与隔行扫描不同,每次显示迭代都必须重复一些解码。