高分辨率网站图像格式

我们都听过这句话,“一图胜千言”,但是您要如何确保实现这种“胜千言”的价值?有没有办法让您的图像更具价值?通过特定浏览器为特定网络条件下的特定设备选择图像的最佳格式可以帮助您最大限度地提高图像的影响力。

让我们来看看当今网站中最常见图像格式(GIF、JPEG、PNG)的功能、特点和兼容性。我们还将为最近推出的特定于浏览器的格式(WebP、JPEG 2000 和 JPEG XR)提供相同的信息。最后,我们将了解 BPG(更好的可移植图形) - 一种旨在替代 JPEG 的新图像格式。

GIF

图形交换格式 (GIF) 是一种位图图像格式,由于其广泛的支持和可移植性使得其在 Web 上广泛使用。

该格式支持每个图像每像素高达 8 位,允许单个图像引用多达 256 种不同颜色。它还支持动画(允许每个框架多达 256 色的单独调色板)和 1 位透明度。

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera


是    


JPEG

联合图像专家组 (JPEG) 是一种有损图形文件。JPEG 图像具有多种文件扩展名,包括 .jpg、.jpe、.jif、.jfif 和 .jfi。JPG 文件有 2 种子格式,JPG/Exif(数码相机和摄影器材)和 JPG/JFIF (Web)。

JPEG 支持多达 1680 万种不同的颜色。JPEG 不支持动画或透明度。

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera


是    


PNG

可移植网络图形 (PNG) 文件是无损格式,这意味着压缩不会影响图像的质量。PNG 被创建为图形交换格式 (GIF) 的改进开源替代品,并且是互联网上最常用的无损图像压缩格式。

PNG-8 支持 256 色和 1 位透明度,PNG-24 支持 24 位和 1680 万种颜色。PNG 通过 Alpha 通道支持可扩展的透明度(从不透明到完全透明)。

通过动画可移植网络图形 (APNG) 扩展支持动画。它允许与动画 GIF 文件类似的动画 PNG 文件,同时支持 24 位图像和不适用于 GIF 的 8 位透明度。它还保留与非动画 PNG 文件的向后兼容性。此时,APNG 还不太流行,所以没有得到大多数主流浏览器的支持。

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
基本

是    

>=7
动画

是    


WebP

WebP 是由 Google 开发的现代图像格式,采用有损和无损压缩。这种开放格式在 2010 年广泛使用,为 Web 图形提供了新的有损压缩标准。与 JPEG 一样,它可以以较小的数据包大小生成真彩色图形,同时保持类似的图像质量。

WebP 支持 24 位和 1680 万种颜色。它还通过 Alpha 通道支持动画、ICC 配置文件、XMP 元数据和透明度。

除了简单/基本的文件格式,WebP 还支持扩展和动画格式。扩展容器提供嵌入高级元数据,包括颜色配置文件、动画控件、EXIF 和 XMP。动画图像格式包括多个帧,以及 ANIM(全局动画参数)和 ANIMF(单帧信息)块。

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
基本 >=9
>=29
否  


>=11.5
动画 >=32

否   


>=20
扩展 >=23
>=29
否   


>=12.1

JPEG 2000

JPEG 2000 (JP2) 是有损和无损的图像压缩标准和编码系统。它由联合图像专家组委员会于 2000 年创建,旨在取代 JPEG 标准。虽然 JP2 可以支持任何颜色位深,但大多数实施使用 24 位颜色。

JP2(基于小波变换)不与 JPEG(基于离散余弦)向后兼容。JP 支持透明度,但不支持动画。

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera



>=5

JPEG XR

JPEG XR(扩展范围)是连续色调摄影图像的有损和无损压缩标准和文件格式,它基于 Microsoft 最初开发和获得专利的名为 HD Photo 的技术。JPEG XR 支持多达 32 位的色彩深度以及 Alpha 通道的透明度。JPEG XR 不支持动画。

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera

否    
>=10

BPG

BPG(更好的可移植图形)是一种新的图像格式,其目的是在出现质量或文件大小问题时替换 JPEG 图像格式。它具有很高的压缩比 – 文件比类似质量的 JPEG 小很多。BPG 支持无损和有损压缩,以及透明度(通过 Alpha 通道)、动画和嵌入式元数据(颜色配置文件、XMP 和 EXIF 元数据)。BPG 支持每个颜色通道 14 位(JPEG 为每通道 8 位)。

目前没有本地浏览器支持 BPG – 显示 BPG 图像需要 56KB(在文件压缩之后)JavaScript 库。

总结

下表总结并提供了与以上讨论的每种图像格式的功能和特点相关的其他详细信息。

GIF
JPEG PNG:基本 PNG:动画
JPEG 2000
JPEG XR
WebP:基本 WebP:扩展 WebP:动画
索引颜色





否  
全色


是  
是  
二进制透明度


是  
否  
全透明度
否 
否 
是  



否  
色度二次采样


否   否  是 
4:2:0 4:2:0 4:2:0  
逐行加载


是  



否  
动画

否  



是  
有损压缩


是  



是  
无损压缩


是  


是  
字节节省


差  

很好
很好 很好
很好
很好  

详细了解使用 Akamai Image Manager 管理最流行的在线图像格式。