深圳网站优化排名

将想法与焦点和您一起共享

深圳网站建设设计 深圳网站优化排名 深圳网站设计制作欣赏

如何选择完美的图像格式

2016-08-26  阅读: 深圳网站建设设计

JPEG,PNG和GIF,哦我的!大多数Web开发者只了解哪些格式错误,通过试验和长期的经验。而几乎没有人懂得这些格式实际工作。

在这篇文章中,我们会在每个格式的压缩算法的高层次看,以了解他们不同的策略,让他们对不同类型的图像或多或少适当。然后,我们去游览一些新一代的图像格式如WebP、JPEG-XR。

JPEG
JPEG压缩图像雕刻成8×8-pixel-blocks,然后做一些对他们有一点疯狂,一大堆数学。它把每个块的像素-列出的R、G、B值,映射到连续空间中的点到一个列表中的系数,用方程描述块的能量波。在技术方面,JPEG压缩算法将图像信息从空间域到频率域。

实际上,这意味着非常好的JPEG压缩连续色调的图像:一个巨大的数量的颜色的图像,和他们之间的平稳过渡。换句话说,JPEG图像是假定你要看起来更像一张照片。

相反,JPEG格式是可怕的在压缩图像与清晰的边缘,或高能,嘈杂的纹理会把戒指在锋利的边缘和模糊的细节。

如何选择完美的图像格式

深圳专业网站设计制作

GIF
在Web发展的早期,如果图像并不JPEG,这是一个GIF。
GIF格式采用LZW压缩算法,这是比JPEG的mathemagic更简单。本质上,LZW算法的扫描你的图像数据,它重复的部分产生非常短的代码;LZW缩短重复。这意味着GIF格式是好的,有大量相同的或重复的数据图像压缩。图像,只有很少的颜色,大片的,尖之间的转换可以有效地存储和无损作为礼物。
即使是一个简单的格式,GIF体育一双花哨的功能:透明和动画。

但是…GIF是可怕的压缩甚至中等数量的颜色的东西;哎呀,格式已经烤的,硬的,256种颜色的限制。转换图像超过这个数字的颜色到GIF结果有损色调分离,这看起来很可怕。

如何选择完美的图像格式

总之,GIF和JPEG有相反和互补优势。他们早期的Web是一个杀手的团队。
但悬而未决的专利问题围绕着LZW算法启发一些非常聪明的人在一个网络的无损图像格式设计采取第二裂纹。

如何选择完美的图像格式

深圳设计公司哪家创意好

首先,PNG算法试图减少数据需要采用像素,它已经知道预言没有格式具有五种不同的预测策略的存储量,但基本上,PNG假定像素下彼此将类似。如果这个假设被证明是正确的,PNG保存数据只存储其预测值和实际值之间的差异;小数量占比大的空间更少。

第二,PNG削减了重复允许图像参考以前,相同的像素序列(而非两次相同的数据存储)使用的算法称为LZ77。如果你眯眼,PNG和GIF LZW LZ77实现相同的目的,但通过裁剪重复有手段的不同足以规避专利律师。每个人都赢!
然后,最后,做完这一切,PNG使用一种称为“赫夫曼编码” 煮剩余价值进一步下跌产生的最常见的值最小的代码(顺便说一句,JPEG格式采用赫夫曼编码作为最后一步为好)。

结合以上三种(无损)技术提供了巨大的好处,在GIF的单一策略。和先进的工具,可以通过改变原始图像数据的有损就贯穿这个挑战提供更大的压缩比,以使其
更加压缩友好。
退一步,所有你需要知道的是这个:PNG会说到照片比JPEG更糟,比GIF几乎总是。所以,用它与清晰的边缘和纯色或是重复的图案大片图像。

 

下一代
在本文的写作过程中,这三个格式JPEG,GIF,PNG图像格式,是唯一与普遍支持。也就是说,他们是唯一的格式,开发人员可以 实际使用。但新的,尖端的格式已经在这里和他们壮观。

 

WEBP
WebP是谷歌的WebM视频格式的一个分支;它的压缩策略的核心是预测,这是说,它以PNG格式应用到下一层次的简单的预测策略。WebP有多达十六种不同的预测策略,为每一个(大小可变的)在图像分块,并可任选的无损或lossily压缩残差预测值和实际值之间。格式的相对复杂性提供了很大的灵活性;它为各种各样的形象好(图形,如果你选择无损的设置,和摄影,如果你去有损),和(通常)比PNG或JPEG压缩比。

 

JPEG-XR
微软的下一代格式选择,JPEG-XR层一堆顶上的JPEG压缩的基本力学的新技术,使无损压缩

更有效的有损压缩
Alpha通道的半透明度
像WebP,JPEG-XR则更为复杂,性能,和更少的支持比它的前辈。现在,格式只支持Internet Explorer和边缘。

 

如何使用格式的明天,今天
有我们使用这些下一代格式,任何方式吗?有!
新的标记允许开发者在多个格式相同的图像提供,并让浏览器决定哪一个负载的束。不幸的是,这种标记可以有点复杂:

如何选择完美的图像格式

幸运的是,还有另一条路了。前端工程师可以改变这种复杂的后端,采用智能服务器,可以给不同的用户,同样的URL不同的资源。

将文章分享到..