让页面图片逐渐清晰直至加载完毕

Posted 2020-09-06 二婷啵

图片由模糊逐渐转为清晰的效果是通过photoshop保存png图片时，在对话框中选中Interlaced（交错的）按钮，那么在使用浏览器欣赏该图片时就会以由模糊逐渐转为清晰的效果方式渐渐显示出来。这种效果在一些网站上是比较常看到的，之前我以为是通过JS或者css来完成的。

下面扫盲一下各种文件格式吧。

PNG格式是由Netscape公司开发出来的格式，可以用于网络图像，但它不同于GIF格式图像只能保存256色，PNG格式可以保存24位的真彩色图像，并且支持透明背景和消除锯齿边缘的功能，可以在不失真的情况下压缩保存图像。

但由于PNG格式不完全支持所有浏览器，所以在网页使用要比GIF和JPEG格式使用少的多。但相信随着网络的发展和因特网传输的改善，PNG格式将是未来网页中使用的一种标准图像格式。
PNG 格式文件在RGB个灰度模式下支持Alpha通道，但是索引颜色个位图模式下不支持Alpha通道。在保存PNG格式的图像时，会弹出对话框，如果在对话框中选中Interlaced（交错的）按钮，那么在使用浏览器欣赏该图片时就会以由模糊逐渐转为清晰的效果方式渐渐显示出来。

交错是一种通过 Internet 发送图片数据的方法。当某个图片交错时，会发生以下情况：在下载了该图片的 1/64 后，您可以看到图片外观形状的总体图像

就是指浏览器下载它的时候隔行下载,这样下载一张图只用一半的时间就可以看到它的样子,只不过只是隔行的图,然后它再下载另一般,这样可以减少你等待看它的时间.
在存GIF和JPG时也有这个优化.(fireworks中)

bmp：windows系统下的标准位图格式，使用广泛。其结构非常简单，未经过任何压缩，所以图像文件会比较大。但它可以被大多数软件“无条件接受”，可称为通用格式。例如windows墙纸就是用了这样的格式！

jpeg：是应用最广泛的图片格式之一，它采用一种比较特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除（这点和mp3音乐格式去掉了人类听觉范围外的声音是相通的），从而达到较大的压缩比（可达到2:1甚至40:1），所以“小巧玲珑”，在网络上运用广泛！

gif：分为静态gif和动画gif两种，支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是gif格式。其实gif是将多幅图像保存为一个图像文件，从而形成动画,所以归根到底gif仍然是图片文件格式。

以上三种是最常见的格式，以下5种虽然运用没有那么广泛但也有其优点！

cdr：世界著名的图形设计软件——coreldraw的专用格式，属于矢量图像，最大的优点“体积”不大，便于再处理。

dxf：三维模型设计软件的巨头——autocad的专用格式，文件小，所绘制的图形尺寸、角度等数据十分准确，是建筑设计的首选。该格式和软件一样已经渐渐成为了三维模型设计业内的标准了。

psd：图像处理软件中的绝对霸主photoshop的图像专用格式，图像文件一般较大。
pcx：zsoft公司在开发图像处理软件paintbrush时开发的一种格式，存储格式从1位到24位。它是经过压缩的格式，占用磁盘空间较少，并具有压缩及全彩色的优点。

先来说一下交错：

交错:Interlace

就是指浏览器下载它的时候隔行下载,这样下载一张图只用一半的时间就可以看到它的样子,只不过只是隔行的图,然后它再下载另一般,这样可以减少你等待看它的时间.
在存GIF和JPG时也有这个优化.(fireworks中) ______http://zhidao.baidu.com/question/5269019.html

网经:

交错技术

有很多用户上网的速度很慢，有时候显示一张图片时，等很久都不能显示图，如果，没用交错技术的话。那么用户要等图全下载完了才能看见。有交错技术那么图可以一部分一部分的显示出来。让用户可以提前知道内容。

图像隔行扫描:电视是隔行扫描，而电脑屏幕是逐行扫描，De-Interlace（隔行扫描）就是用来模拟电视屏幕的显示方式的。包括隔行GIF和逐级JPG方式。

1,交错图:如果图像是一幅交错图，则它在页面上逐步出现的时候，会以类似百叶窗的效果显示。

注意：一般默认情况下，图是以50%为单位显示。

PNG图像和GIF图像都支持这种交错格式。

隔行GIF是指图像文件是按照隔行的方式来显示的，比如先出奇数行，再出偶数行，造成图像是逐渐变清楚的。将图像文件保存成隔行GIF格式的方法是，在 Photoshop中进行保存时，选择“Interlaced”（不要选择“Normal”），在Paint Shop Pro中进行保存时，点击“Option…”按钮，选择“Interlaced”（不要选择“Non Interlaced”）。

2,渐进图:如果图像是一幅渐进图，则它在页面上逐步出现的时候，会首先显示较模糊的整幅图像，然后逐渐变得清晰。这样，浏览者可以在下载过程中尽早了解图像的大致轮廓。

JPG/JPEG图像支持这种渐进格式。

逐级JPG文件可以让图像先以比较模糊的形式显示，随着图像文件数据不断从网上传过来，图像会逐渐变清晰。这样做的好处是图像可以尽快地显示出来，虽然图像不很完美，但是却让浏览者看到了希望，并且图像在不断地变好。将图像文件保存成逐级JPG格式的方法是，在Photoshop中进行保存时，选择“Progressive”，在Paint Shop Pro中进行保存时，点击“Option…”按钮，选择“Progressive encoding”。

www.libpng.org/pub/png/pngintro.html