图片格式详解

一、图片分类

• 矢量图：由数学向量来记录的图像。eg：SVG、CDR、AI、WMF、EPS、ICO、TGA、DXF、…
• 位图：由一系列像素点组成的图像是位图，位图也称为点阵图。eg：PNG、JPEG、GIF、BMP、webP、PSD、TIFF、PCX、FPX、PCD
  • 无损压缩：利用了人类对图像或声波中的某些频率成分不敏感的特性，允许压缩过程中损失一定的信息，可减少存储空间。eg：mp3 、divX 、Xvid 、jpeg、 rm 、rmvb、 wma 、wmv
  • 有损压缩：无损压缩格式则是利用数据的统计冗余进行压缩，可完全恢复原始数据而不引起任何失真，不可减少存储空间。eg：APE、FLAC、TAK、WavPack、TTA
    无损压缩、有损压缩原理详解

二、常见图片格式

参考此链接

1、JPG/JPEG

• 优点为兼容性高、传输速度快、内存小。
• 每一次输出都会损失像素质量，尽量少频繁进行输出。
• 在PS软件中以JPEG格式储存时，提供13级压缩级别，以0—12级表示。其中0级压缩比最高，图像品质最差。即使采用细节几乎无损的10 级质量保存时，压缩比也可达 5：1。
  • eg：以BMP格式保存时得到4．28MB图像文件，在采用JPG格式保存时，其文件仅为178KB。

2、PNG

• 支持高级别无损耗压缩、alpha 通道透明度
• PNG结合了JPG和GIF的优点，对于图片本身质量的减损非常低，PS、Indesign中建议保存PNG，可反复修改，不用担心损失像素。

3、GIF

• 静态的GIF格式图片和JPG格式的图片无异，而动态的GIF图片则是由多幅图片保存为一个图片，形成动画效果而制成的。

4、PSD/EPS

• PSD格式是Adobe的PS软件的专属图像格式
• EPS格式是Adobe的Illustrator矢量制图软件的专属格式，除了能保存图片所有制作路径之外，EPS格式的图片还能保存文本文件信息。

5、SVG

• 基于XML的语义化标签结构
• 采用文本来描述对象
• 支持动画、透明、缩放

6、WEBP

• Google新推出的影像技术，它可让网页图档有效进行压缩
• 无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使png经过压缩，webp可以减少28%的大小
• 提供了有损压缩与无损压缩的图片文件格式

三、应用

引用自此链接

1、前端选择

• 一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈的则需要采用PNG
• 有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了
• 基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计品质
• 照片用 JPG。
• 动画用 GIF。
• Logo、Icon 等小图用 PNG-8。
  

2、前端图像处理工具

• tinypng.com：压缩比高，失真小
• 腾讯智图：可以直接看到压缩后的图片大小
• pngcrush：可以批量压缩图片