使用无损处理图像, 是对像素数据进行压缩, 可以找回原图.
常见的图片格式解析
GIF
关键词: 无损压缩, 索引色, 透明, 动画
GIF(Graphics Interchange Format) 的原义是 "图像互换格式", 是一种基于 LZW 算法连续色调的无损的基于索引色的压缩格式. 其压缩率一般在 50% 左右, 它不属于任何应用程序所以几乎所有相关软件都支持它, 公共领域有大量的软件在使用 GIF 图像文件.
GIF 是一种无损压缩, 所以它只是对像素数据进行压缩, 其实 LZW 算法只是一个压缩数据的算法, 如果你懂哈夫曼算法的话, 可能就比较好理解压缩数据是怎么回事儿了.
GIF 的特性是帧动画.
相比古老的 bmp 格式, 尺寸较小, 而且支持透明 (不支持半透明, 因为不支持 Alpha 透明通道 ) 和动画.
优势
优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小.
可插入多帧, 从而实现动画效果.
可设置透明色以产生对象浮现于背景之上的效果.
缺点
由于采用了 8 位压缩, 最多只能处理 256 种颜色, 故不宜应用于真彩色 (文末的附录有解释) 图片.
适合场景
色彩简单的 logo,icon, 线框图, 文字输出等
JPG/JPEG
关键词: 有损压缩, 直接色, 适合大图, 体积小
JPEG 格式是最常见的一种图像格式, 文件后辍名为 ".JPEG" 或 ".jpg",JPEG 可以说是人们最熟悉的图档格式, 相信在数字相机普及的现在, 几乎每台数字相机, 照相手机都可以 (甚至只能) 输出 JPEG 格式的图档.
JPEG 是一种很典型的使用有损压缩图像格式, 也就是说使用者每次进行 JPEG 的存档动作后, 图档的一些内容细节都会遭到永久性的破坏, 尤其是使用过高的压缩比例, 将使最终解压缩后恢复的图像质量明显降低, 如果追求高品质图像, 不宜采用过高压缩比例.
JPEG 图片格式的设计目标, 是在不影响人类可分辨的图片质量的前提下, 尽可能的压缩文件大小.
Baseline JPEG 和 Progressive JPEG
JPEG 有两种保存方式: Baseline JPEG(标准型),Progressive JPEG(渐进式). 两种格式有相同尺寸以及图像数据, 他们的扩展名也是相同的, 唯一的区别是二者显示的方式不同.
Baseline JPEG
Baseline JPEG 文件存储方式是按从上到下的扫描方式, 把每一行顺序的保存在 JPEG 文件中. 打开这个文件显示它的内容时, 数据将按照存储时的顺序从上到下一行一行的被显示出来, 直到所有的数据都被读完, 就完成了整张图片的显示. 如果文件较大或者网络下载速度较慢, 那么就会看到图片被一行行加载的效果, 这种格式的 JPEG 没有什么优点, 因此, 一般都推荐使用 Progressive JPEG.
[图片上传失败...(image-c20b06-1558193148921)]
Progressive JPEG
和 Baseline 一遍扫描不同, Progressive JPEG 文件包含多次扫描, 这些扫描顺寻的存储在 JPEG 文件中. 打开文件过程中, 会先显示整个图片的模糊轮廓, 随着扫描次数的增加, 图片变得越来越清晰. 这种格式的主要优点是在网络较慢的情况下, 可以看到图片的轮廓知道正在加载的图片大概是什么. 在一些网站打开较大图片时, 你就会注意到这种技术.
[图片上传失败...(image-66ed90-1558193148921)]
渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓, 一定程度上可以提升用户体验(瀑布留的网站建议还是使用标准型的).
更多关于 Baseline JPEG 和 Progressive JPEG 请看这篇文章: 使用渐进式 JPEG 来提升用户体验.
优点
可以支持 24bit 真彩色, 普遍应用于需要连续色调的图像如色彩丰富的图片, 照片等;
可利用可变的压缩比以控制文件大小;
支持交错(对于渐近式 JPEG 文件);
缺点
JPEG 不适合用来存储企业 Logo, 线框类的图. 因为有损压缩会导致图片模糊, 而直接色的选用, 又会导致图片文件较 GIF 更大.
有损耗压缩会使原始图片数据质量下降.
JPEG 图像不支持透明度处理, 透明图片需要召唤 PNG 来呈现.
适合场景
JPG 适用于呈现色彩丰富的图片, 在我们日常开发中, JPG 图片经常作为大的背景图, 轮播图或 Banner 图出现.
GIF vs JPEG
由于 GIF 与 JPEG 有着如此不同的特性, 因此我们可以很轻易的选择何时该用哪一种格式来输出我们需要的图档: 当图片拥有丰富的色彩时, 并且没有明显锐利反差的边缘线条时, 选择 JPEG 可以得到最好的输出结果, 照片就是最好的例子; 当图片是拥有明确边缘的线条图, 没有使用太多色彩, 甚至可能需要透明背景时, GIF 是很好的选择, 档案小, 画质又精美.
PNG
关键词: 无损压缩, 索引色, 支持透明
便携式网络图形(简称 PNG, 英语全称: Portable Network Graphics).PNG 能够提供长度比 GIF 小 30% 的无损压缩图像文件. 它同时提供 24 位和 32 位真彩色图像支持以及其他诸多技术性支持. 由于 PNG 优秀的特点, PNG 格式图片可以称为 "网页设计专用格式".PNG 最初的开发目的是为了作为 GIF 的替代方案的, 作为做新开发的影像传输文件格式, PNG 同样使用了无损压缩格式, 事实上 PNG 的开发就是因为 GIF 所使用的无损压缩格式专利问题而诞生的.
PNG 对于线条图, LOGO, 图标和颜色较少的图像非常适合.
PNG 另一个优点是支持透明背景.
PNG8
PNG-8 是 PNG 的索引色版本. PNG-8 是无损的, 使用索引色的, 点阵图.
PNG 是一种比较新的图片格式, PNG-8 是非常好的 GIF 格式替代者, 在可能的情况下, 应该尽可能的使用 PNG-8 而不是 GIF, 因为在相同的图片效果下, PNG-8 具有更小的文件体积. 除此之外, PNG-8 还支持透明度的调节, 而 GIF 并不支持. 现在, 除非需要动画的支持, 否则我们没有理由使用 GIF 而不是 PNG-8. 当然了, PNG-8 本身也是支持动画的, 只是浏览器支持得不好, 不像 GIF 那样受到广泛的支持.
可以看到 PNG-8 具有更好的透明度支持.
PNG24
PNG-24 是 PNG 的直接色版本. PNG-24 是无损的, 使用直接色的, 点阵图.
无损的, 使用直接色的点阵图, 听起来非常像 BMP, 是的, 从显示效果上来看, PNG-24 跟 BMP 没有不同. PNG-24 的优点在于, 它压缩了图片的数据, 使得同样效果的图片, PNG-24 格式的文件大小要比 BMP 小得多. 当然, PNG24 的图片还是要比 JPEG,GIF,PNG-8 大得多.
虽然 PNG-24 的一个很大的目标, 是替换 JPEG 的使用. 但一般而言, PNG-24 的文件大小是 JPEG 的五倍之多, 而显示效果则通常只能获得一点点提升. 所以, 只有在你不在乎图片的文件体积, 而想要最好的显示效果时, 才应该使用 PNG-24 格式.
另外, PNG-24 跟 PNG-8 一样, 是支持图片透明度的.
PNG 可以储存透明, 完爆 gif 的地方在于失真小, 没锯齿; 劣势是不支持动画, 生成的文件较大;
PNG 采用无损压缩, 在多数情况下都可以保留图片里所有像素. PNG 无损压缩算法, 简单地说, 就是把图片里出现的每一个颜色都记录下来. 通过记录这些颜色相对应的值记录一张图片.
PNG 分为两种, 一种是 Index, 一种是 RGB.Index 记录同一种颜色的值和出现的位置(简单地说, 比如一个 2px*2px 的超级小图, 从左往右从上往下依次的颜色是红, 白, 白, 红, 那么记录的方法就是 "红 - 1,4; 白 - 2,3"); 而 RGB 图则把所有像素的色值依次记录下来(即 "红, 白, 白红"). 对于相同的图片, Index 格式的尺寸总是小于 RGB.
Base64
webP
WebP 是谷歌开发的一种新图片格式, WebP 是同时支持有损和无损压缩的, 使用直接色的, 点阵图.
从名字就可以看出来它是为 Web 而生的, 什么叫为 Web 而生呢? 就是说相同质量的图片, WebP 具有更小的文件体积. 现在网站上充满了大量的图片, 如果能够降低每一个图片的文件大小, 那么将大大减少浏览器和服务器之间的数据传输量, 进而降低访问延迟, 提升访问体验.
在无损压缩的情况下, 相同质量的 WebP 图片, 文件大小要比 PNG 小 26%;
在有损压缩的情况下, 具有相同图片精度的 WebP 图片, 文件大小要比 JPEG 小 25%~34%;
WebP 图片格式支持图片透明度, 一个无损压缩的 WebP 图片, 如果要支持透明度只需要 22% 的格外文件大小.
SVG
关键词: 无损, 矢量图
全称 Scalable Vector Graphics, 是无损的, 矢量图.
SVG 跟上面这些图片格式最大的不同, 是 SVG 是矢量图. 这意味着 SVG 图片由直线和曲线以及绘制它们的方法组成. 当你放大一个 SVG 图片的时候, 你看到的还是线和曲线, 而不会出现像素点. 这意味着 SVG 图片在放大时, 不会失真, 所以它非常适合用来绘制企业 Logo,Icon 等.
SVG 是很多种矢量图中的一种, 它的特点是使用 xml 来描述图片. 借助于前几年 xml 技术的流行, SVG 也流行了很多. 使用 xml 的优点是, 任何时候你都可以把它当做一个文本文件来对待, 也就是说, 你可以非常方便的修改 SVG 图片, 你所需要的只需要一个文本编辑器.
SVG 并非只能绘制简单的 Logo 类的图片, 它可以绘制出精致的图片的.
为什么颜色越多, 文件体积越大?
总结
其中 APNG 和 WebP 格式出现的较晚, 尚未被 Web 标准所采纳, 只有在特定平台或浏览器环境可以预知的情况下加以采用, 虽然均可以在不支持的环境中较好的功能降级, 但本节暂不讨论这两种格式. 图片格式选择过程如下:
图片格式 | 压缩方式 | 透明度 | 动画 | 浏览器兼容 | 适应场景 |
---|---|---|---|---|---|
JPEG | 有损压缩 | 不支持 | 不支持 | 所有 | 复杂颜色及形状、尤其是照片 |
GIF | 无损压缩 | 支持 | 支持 | 所有 | 简单颜色,动画 |
PNG | 无损压缩 | 支持 | 不支持 | 所有 | 需要透明时 |
APNG | 无损压缩 | 支持 | 支持 | Firefox Safari iOS Safari | 需要半透明效果的动画 |
WebP | 有损压缩 | 支持 | 支持 | Chrome Opera Android Chrome Android Browser | 复杂颜色及形状 浏览器平台可预知 |
SVG | 无损压缩 | 支持 | 支持 | 所有(IE8 以上) | 简单图形,需要良好的放缩体验 需要动态控制图片特效 |
image
附加内容
位图图像属性
索引颜色 / 颜色表
位图常用的一种压缩方法. 从位图图片中选择最有代表性的若干种颜色 (通常不超过 256 种) 编制成颜色表, 然后将图片中原有颜色用颜色表的索引来表示. 这样原图片可以被大幅度有损压缩. 适合于压缩网页图形等颜色数较少的图形, 不适合压缩照片等色彩丰富的图形.
Alpha 通道
在原有的图片编码方法基础上, 增加像素的透明度信息. 图形处理中, 通常把 RGB 三种颜色信息称为红通道, 绿通道和蓝通道, 相应的把透明度称为 Alpha 通道. 多数使用颜色表的位图格式都支持 Alpha 通道.
色彩深度
色彩深度又叫色彩位数, 即位图中要用多少个二进制位来表示每个点的颜色, 是分辨率的一个重要指标. 常用有 1 位 (单色),2 位(4 色, CGA),4 位(16 色, VGA),8 位(256 色),16 位(增强色),24 位(真彩色) 和 32 位等. 色深 16 位以上的位图还可以根据其中分别表示 RGB 三原色或 CMYK 四原色 (有的还包括 Alpha 通道) 的位数进一步分类, 如 16 位位图图片还可分为 R5G6B5,R5G5B5X1(有 1 位不携带信息),R5G5B5A1,R4G4B4A4 等等.
8 位色, 所谓 8 位色并不是图像只有 8 种颜色, 而是 2^8, 即 256 种颜色, 8 位图指的是用 8 个 bits 来表示颜色;
16 位色, 2^16, 从人眼的感觉来说, 16 位色基本可以满足视觉需要了;
24 位色, 又称为 "真彩色". 大概有 1600 万之多, 这个数字几乎是人类视觉可分辨颜色的极限;
32 位色, 并非 2^32, 其实也是 2^24 种颜色, 不过它增加了 2^8 阶颜色的灰度, 也就是 8 位透明度, 因此规定它为 32 位色.
在制作网站页面图片的时候, 设计者一般选择 24 位图像. 32 位图像虽然质量更好, 但同时也带来更大的图像体积(事实上, 一般肉眼也很难分辨 24 位图和 32 位图的区别). 此外将原始位图放大与缩小都会使图像效果失真, 这是因为它们减小了图像中有效像素的数量或密度的缘故, 所以在制作过程中应尽量避免图片被编辑的次数.
真彩色与伪彩色, 直接色
描述一幅图像需要使用图像的属性. 图像的属性包含分辨率, 像素深度, 真 / 伪彩色, 图像的表示法和种类等. 本节介绍前面三个特性.
搞清真彩色, 伪彩色与直接色的含义, 对于编写图像显示程序, 理解图像文件的存储格式有直接的指导意义, 也不会对出现诸如这样的现象感到困惑: 本来是用真彩色表示的图像, 但在 VGA 显示器上显示的图像颜色却不是原来图像的颜色.
我这里就不以图形学的方式介绍各种花里胡哨的概念, 我就用最简单的, 作为一个程序员的角度来理解就行了.
真彩色
真彩色图像是一种用三个或更多字节描述像素的计算机图像存储方式.
一般来说, 前三个通道都会各用一个字节表示, 如红绿蓝 (RGB) 或者蓝绿红 (BGR). 如果存在第四个字节, 则表示该图像采用了阿尔法通道. 然而, 实际系统往往用多于 8 位(即 1 字节) 表达一个通道, 如一个 48 位的扫描仪等. 这样的系统都统称为真彩色系统.
对于真彩色的话就是像素值里面每个 RGB 存储的什么值, 就会直接展示该值所对应的颜色. 比如该像素值是 10 10 10, 那么三个 RGB 的基色强度分别就是 10 10 10, 那么这种就称做真彩色. 可能你第一直觉, 颜色就应该这么表示.
伪彩色
对于伪彩色图像其实可以理解为索引图像, 他的每个像素值存储的不是直接的基色强度, 而是存储的索引. 就跟 JS 里面的引用变量一样, 变量只是个地址, 变量所指向的值才是真正的值.
对于伪彩色图像会有一个颜色表, 是一个[3,255] 的数组, 分别对应 0~255 个灰度值的 RGB 值, 对照原理如下:
[图片上传失败...(image-ce3c91-1558193148921)]
可以看到上图, 像素值存储的只是索引号 128, 根据索引找到的 RGB 值才是真正的基色强度.
直接色
直接色又称假彩色. 它和伪彩色的区别就是, 前者的每个基色强度都要通过索引找到真正的基色强度.
小结
直接色系统产生颜色与真彩色系统相比, 相同之处是都采用 R,G,B 分量决定基色强度, 不同之处是前者的基色强度直接用 R,G,B 决定, 而后者的基色强度由 R,G,B 经变换后决定. 因而这两种系统产生的颜色就有差别. 试验结果表明, 使用直接色在显示器上显示的彩色图像看起来真实, 很自然.
直接色系统与伪彩色系统相比, 相同之处是都采用查找表, 不同之处是前者对 R,G,B 分量分别进行变换, 后者是把整个像素当作查找表的索引值进行彩色变换.
参考链接
赵鑫
真彩色与伪彩色, 直接色的区别
10 个免费的图像压缩优化工具和脚本
网页中图片格式的选择
来源: http://www.jianshu.com/p/80d7d556d734