07月28, 2017

不同图片格式之间的差异

前端开发过程中使用图片时常常困惑于如何选取相应的图片格式,合理的选用和优化图片有利于提升网页加载速度及网页视觉效果。本文主要介绍目前主流和新兴的几种图片格式的特点及性能分析。 一般来说,图片具有如下几个特点:

  • 压缩比,指原图象数字大小与通过编码器压缩后的图象数字大小的压缩比,主要指有损压缩和无损压缩,无损压缩主要靠删除一些重复数据,减少图片的颜色信息,图片体积较小,图片质量会有下降。
  • 透明性,对透明度的支持性
  • 动画支持
  • 矢量性,可还原可再编辑的特性,矢量图无限放大不模糊,而位图则不是,位图是由矢量图导出来的,可以说矢量图就是位图的源码,源码是可以编辑的。

图片格式介绍

下面就开发过程中常用的图片格式一一介绍。

1.JPG(JPEG)

它只支持有损压缩,其压缩算法可以精确控制压缩比,具有高压缩比、低图片质量、小文件体积的特点,并不支持透明,不支持动画,非矢量。但是当我们编辑和重新保存jpg图片的时候,图片质量会下降,并可以累积。
用途:色彩还原度较好,支持适当压缩后保持比较好的色彩度,适用于允许轻微失真的像素色彩丰富的图片,不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片,比如LOGO和小图标(ICONS)。

2.GIF

是为使图片能够应用在在线应用程序上所特别开发的图片格式。是一种无损,8位图片格式。"8位"指的是图片所能表现的颜色深度,一个8位图像最多只能支持256种不同颜色,若颜色种类多于256,则会出现失真的现象。具有不支持全透明、支持半透明、支持动画、非矢量的特性。
用途:Gif不适合应用于各种色彩过于丰富的照片存储场合,但适合于以下场景:网页背景、小图标、色彩度低的小切片、动画图片。

3.PNG

初始作为GIF的免费替代而开发,支持无损压缩,支持完整的透明通道,不支持动画,非矢量.分为PNG8,PNG24,PNG32三种。PNG8图片支持透明背景且像素颜色不能超过256种,除了压缩算法,其与GIF及其相似。24位PNG,支持160万种不同的像素颜色且支持Alpha透明效果,所以无论透明度设置为多少,PNG图片均能够与背景很好的融合在一起。注,IE6不支持PNG的透明性,不过IE6现在已经逐渐淡出我们的视线,已经可以不考虑IE6的问题了。
用途:适用于需要清晰显示,颜色丰富的图片,或者全透明(保存png24)图片,该格式是多数用于小型格式的图片,不然文件会很大。

4.SVG

SVG是使用XML定义的矢量图形,生成的图片在各种分辨率下均可自由放缩,可以通过JavaScript等接口自由变换图片特效,可以完成其中部分元素的自由旋转、移动、变换颜色等。 用途:如果图片由标准的几何图形组成,或需要使用程序动态控制其显示特效,可以考虑SVG格式。

总结

  • 在通常情况下JPG与JPEG是一样的,多数情况下使用的jpg后缀),在图片颜色丰富的地方使用该格式保存,如拍摄的相片,ps合成的图片,可以选择一个合适的压缩比,图片看起来没变化,但文件小很多。
  • 如果需要清晰的显示颜色丰富的图片,或者需要全透明的图片(PNG24),PNG比较好。
  • 如果想要动画,GIF是唯一的选择。
图片格式 压缩方式 透明度 动画支持 兼容性 使用场景
JPEG 有损压缩 不支持 不支持 所有 颜色较为复杂
GIF 无损压缩 支持 支持 所有 颜色简单,动画
PNG 无损压缩 支持 不支持 所有 需要透明
SVG 无损压缩 支持 不支持 所有 简单图形 良好缩放及控制

本文链接:https://luodao.me/post/bu-tong-tu-pian-ge-shi-zhi-jian-de-chai-yi.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。