JPG,GIF,PNG格式图片优化

5:48:00 PM 0 Comments

JPG (有损压缩): 图片以 24 位颜色存储单个光栅图像。JPG 是与平台无关的格式,支持最高级别的压缩,不过,这种压缩是有损耗的。

优点:
△ 摄影作品或写实作品支持高级压缩。
△ 利用可变的压缩比可以控制文件大小。
△ 支持交错(对于渐近式 JPEG 文件)。
△ JPEG 广泛支持 Internet 标准。
缺点:
△ 有损耗压缩会使原始图片数据质量下降。
△ 当您编辑和重新保存 JPEG 文件时,JPEG 会混合原始图片数据的质量下降。这种下降是累积性的。
△ JPEG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
△ 同样质量的图片,保存为JPG一般都比GIF和PNG格式的文件都要大。

总结:
1. 对于写实的摄影图像或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果;
2. 有些矢量工具会展的图像由于采用较多的滤镜特效也会形成丰富的色彩层次,这个时候就需要采用JPG进行存储;
3. 页面的内容元素,如广告Banner,商品图片等推荐保存为JPG格式。
(不要存100%品质的JPG格式图片。因为100%并不一定是最高的品质,而是一个优化算法的极限值,所以会增加不必要的文件大小。建议存储95%品质的图片就可以最大限度的降低失真。
谨慎使用50%品质以下的压缩率。使用50%以下品质存储时会采用额外的压缩算法而导致图片失真更严重,尤其是对于有高对比度的图片。)

GIF (无损压缩): 图片以 8 位颜色或 256 色存储单个光栅图像数据或多个光栅图像数据。GIF 图片支持透明度、压缩、交错和多图像图片(动画 GIF)。
优点:
△ GIF 广泛支持 Internet 标准。
△ 支持无损耗压缩和透明度。
△ 动画 GIF 很流行,易于使用许多 GIF 动画程序创建。
缺点:
△ GIF 只支持 256 色调色板,因此,详细的图片和写实摄影图像会丢失颜色信息,而看起来却是经过调色的。
△ 在大多数情况下,无损耗压缩效果不如 JPEG 格式或 PNG 格式。
△ GIF 支持有限的透明度,没有半透明效果或褪色效果(例如,alpha 通道透明度提供的效果)。

总结:
这里不对GIF进行讨论,是因为PNG就是为取代GIF而生的,而且PNG的压缩算法也要优于GIF,所以只要不是需要动画效果的地方强烈建议都采用PNG格式图片。

PNG (无损压缩): 图片以任何颜色深度存储单个光栅图像。PNG 是与平台无关的格式。
PNG又分为PNG 8,PNG 24和PNG 32,PNG8和PNG24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值。"8″代表2的8次方也就是256色,而24则代表2的24次方大概有1600多万色。PNG 8和PNG 24的区别是,前者只支持完全透明和完全不透明,而后者还支持半透明即alpha透明。

优点:
△ PNG 支持高级别无损耗压缩。
△ PNG 支持 alpha 通道透明度。
△ PNG 支持伽玛校正。
△ PNG 支持交错。
△ PNG 受最新的 Web 浏览器支持。
缺点:
△ 较旧的浏览器和程序可能不支持 PNG 文件。
△ 作为 Internet 文件格式,与 JPEG 的有损耗压缩相比,PNG 提供的压缩量较少。
△ 作为 Internet 文件格式,PNG 对多图像文件或动画文件不提供任何支持。GIF 格式支持多图像文件和动画文件。

总结:
适合用PNG存储的图片
1. 图像上颜色较少,并且主要以纯色或者平滑的渐变色进行填充;
2. 具备较大亮度差异以及强烈对比的简单图像;
3. 用于页面结构的基本视觉元素,如容器的背景,按钮,导航的背景等;

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.