常见图片格式介绍

status
category
date
summary
slug
icon
tags
password
图片格式在开发和设计中经常用到，但自己没有深入了解过它们的区别，刚好碰到图片压缩的需求，就借此机会学习一下。

一些概念

介绍图片格式之前，先来介绍一些经常提及的图片概念。
  • 位图（Bitmap）：又叫格栅图或者点阵图，是利用像素阵列来表示的图像。位图的每个像素都被分配了特定的位置和颜色值，颜色值可以由RGB组合或者灰度值表示。
  • 位深度：每个像素用来表示颜色信息的位数，位深度越大，颜色越逼真，占用空间也就越大。例如，位深度为1的位图的像素只能为黑色或者白色，位深度为8的图像像素有2（即256）个可能的颜色值。
      • 8
  • 颜色通道：RGB图像的像素由红绿蓝三个颜色通道组成，8位/通道的图像中，每个通道有256个可能值，因此每个像素有24位可能的值，通常将24位RGB位图成为真色彩位图。
  • Alpha通道：在原有的图片编码基础上，添加像素的透明度信息，因为通常把RGB三种颜色信息分别成为三种颜色的通道，所以透明度信息也成为Alpha通道。
  • 矢量图（Vector）：用点、直线或者多边形等基于数学方程的几何图形表示的图像。
位图的放大实际上是每个像素的放大，单个像素的放大会使线条和形状参差不齐，导致我们看到的图片“模糊不清晰”。而矢量图通过路径和颜色来记录图片信息，放大之后并不会失真。
在图形比较简单的情况下，矢量图的文件会更小。但如果追求更细致的图像，矢量图需要更多的“路径”来描述图像，大小会膨胀很多，并且对渲染能力的要求也增高很多，所以追求画质的图像一般采用位图。另外，位图处理已经标准化，并且硬编码到显卡内，GPU的存在就是为了处理位图。但矢量图还在标准化的过程中，因此矢量图的处理只能依靠CPU。

GIF

图像互换格式（Graphics Interchange Format，GIF）是一种无损压缩的位图图形格式，采取8位色重现图像。从缩写可以知道正确的读法应该是像gift一样，只是去掉t。GIF的体积小且成像相对清晰，但256色的限制大大局限了GIF的应用范围，所以GIF比较适合用于图表、按钮等只需要少量颜色的图片。
另外，我们通常认为GIF就是动图，实际上GIF和JPEG、PNG一样，只是一种图片格式。并且GIF是在第一版本发布两年后，才支持了透明度和多帧动画。

JPEG

联合图像专家小组（Joint Photographic Experts Group，JPEG）是一种针对图像的有损压缩标准方法，是目前存储和传输照片最普遍的格式。JPEG的特殊压缩算法导致它并不适合用于线条、文字、图标的图形，上述类别的图形一般使用GIF和PNG来存储，但它们都有各自的缺点：GIF只有8位像素，并不适合存储彩色照片；PNG可以无损存储，但文件太大不利于传输。

PNG

便携式网络图形（Portable Network Graphics，PNG）是一种无损压缩的位图图形格式，最初的设计目的是为了取代受专利保护的GIF，同时增加一些GIF不具备的特性。PNG格式的图片有以下特性：
  • 最高支持24位真彩色图像和8位灰度图像
  • 支持Alpha通道的透明特性
  • 支持图像亮度的Gamma信息
  • 支持存储附加文本信息，如图片名称、作者、时间、注释等等
  • 支持渐进式读写，可以先显示预览效果再展示全貌
  • 最新的PNG格式支持一个文件存储多个图像
此外常用的还有 bmp、webp等格式。

图片压缩

虽然图片压缩分为有损压缩和无损压缩两种，但是要明白一点，压缩空间的代价一定是信息丢失，只不过当丢失的信息不那么重要时，我们可以姑且认为进行了无损压缩。例如当我们只需要做图片展示的时候，删除图片附属的文本信息可以认为是无损的压缩，例如作者、制作软件等等。当然，我们一般谈论的压缩主要指的是对图像信息的处理。
JPEG和其他两者不同，采用的是有损压缩方式，压缩时最关键的地方在于缩减取样，即对水平或垂直的相邻像素取其中之一进行采样，然后重新排列压缩。因此，JPEG更适合用于色彩和图形相对复杂的图像，例如照片，压缩的时候就不容易造成边缘模糊。
GIF和PNG都是无损压缩，原理是建立颜色索引，利用索引来表示重复出现的颜色，所以颜色越单一，颜色值越少，压缩率就越大。因此，它们比较适合颜色单一、图形简单的图片，例如icon等等。
本来只是想简单总结一下各图片格式的特点，结果发现一时半会根本写不完。仔细探讨图片格式的话，主要涉及相关的数据结构和压缩算法。于是在此立下一个flag，以后再针对这些图片进行深入的学习。
参考资料：
PNG图片压缩原理–屌丝的眼泪（是正经文章）
Loading...

© 刘口子 2018-2025