关于png的交错Interlace

本文详细介绍了图像交错和渐进技术的概念及其在网页显示中的应用,包括交错图和渐进图的特点、如何在Photoshop和PaintShopPro中实现这两种格式,以及它们在提升用户体验方面的优势。

转载自:http://blog.youkuaiyun.com/greenerycn/article/details/1458231

先来说一下交错:

交错: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”。


PNG图像文件的文件结构由一系列数据块(chunks)组成,这些数据块以特定顺序排列,并且每个数据块都有明确的功能。PNG文件的第一个数据块是文件头数据块,其数据块类型码为 `IHDR`,并且在整个PNG数据流中只能出现一次。该数据块包含有关图像的基本信息,对于解析和显示图像至关重要。 文件头数据块由13字节组成,其结构如下: - **前4字节**:表示图像的宽度(width),以像素为单位。 - **接下来的4字节**:表示图像的高度(height),同样以像素为单位。 - **第9字节**:图像的位深度(bit depth),指每个像素在存储时使用的位数,常见的值包括1、2、4、8和16。 - **第10字节**:颜色类型(color type),用于描述图像数据的颜色组成,例如灰度图、真彩色图、带有透明通道的图像等。 - **第11字节**:压缩方法(compression method),当前PNG标准中仅定义了一种压缩方法,即DEFLATE压缩算法- **第12字节**:滤波方法(filter method),用于预处理图像数据以提高压缩效率,PNG中通常使用0表示自适应滤波。 - **第13字节**:交错方法(interlace method),用于控制图像的显示方式,例如逐行显示或交错显示,常见的值为0(无交错)或1(Adam7交错)。 PNG文件的总体结构包括以下几个主要部分: 1. **文件签名**:PNG文件的开头是8字节的固定签名,用于标识该文件为PNG格式。其十六进制值为 `89 50 4E 47 0D 0A 1A 0A`,可以用来验证文件格式的正确性[^4]。 2. **IHDR数据块**:作为第一个数据块,存储图像的基本信息,如上述结构所述[^1]。 3. **其他数据块**:包括关键数据块和辅助数据块,用于存储图像的实际数据(如IDAT数据块)、图像元数据(如tEXt、zTXt、iTXt等文本块)等[^5]。 4. **IEND数据块**:作为最后一个数据块,标志着PNG文件或数据流的结束[^3]。 通过这些结构化的数据块,PNG文件能够支持多种图像特性,如透明度、无损压缩以及多样的颜色深度。 ```python # 示例:读取PNG文件的IHDR数据块 import struct def read_ihdr_chunk(file_path): with open(file_path, 'rb') as f: # 读取PNG文件签名 signature = f.read(8) if signature != b'\x89PNG\r\n\x1a\n': raise ValueError("Invalid PNG file signature") # 读取第一个数据块 while True: chunk_length_data = f.read(4) if not chunk_length_data: break # 文件结束 chunk_length = struct.unpack('>I', chunk_length_data)[0] chunk_type = f.read(4) chunk_data = f.read(chunk_length) chunk_crc = f.read(4) # CRC校验码 if chunk_type == b'IHDR': # 解析IHDR数据块 width, height, bit_depth, color_type, compression_method, filter_method, interlace_method = struct.unpack('>IIBBBBB', chunk_data) print(f"Width: {width}, Height: {height}") print(f"Bit Depth: {bit_depth}, Color Type: {color_type}") print(f"Compression Method: {compression_method}, Filter Method: {filter_method}") print(f"Interlace Method: {interlace_method}") break # 调用函数读取IHDR数据块 read_ihdr_chunk('example.png') ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值