术→技巧, 研发

网站开发之图片格式对比与选择

钱魏Way · · 1,696 次浏览

图片格式是指计算机存储图片的格式,常见的存储的格式有BMP、JPEG、GIF、PNG、SVG等。我们常用到的网页图片格式一般分为2种:一种是位图,另一种是矢量图。下面我们分别细分这两种格式的特点与区别。

位图

位图(bitmap,简称:BMP), 亦称为点阵像,是由称作为像素的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时,可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素,从而使线条和形状显得参差不齐,从稍远的位置查看它的颜色与形状又显得是连续的。Photoshop是最常使用的位图处理软件。

位图图像属性

索引颜色/颜色表

位图常用的一种压缩方法。从位图图片中选择最有代表性的若干种颜色(通常不超过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位图的区别)。此外将原始位图放大与缩小都会使图像效果失真,这是因为它们减小了图像中有效像素的数量或密度的缘故,所以在制作过程中应尽量避免图片被编辑的次数。

图像分辨率

图像分辨率是指一个图像文件中包含的细节和信息的大小,以及输入、输出、或显示设备能够产生的精细程度。编辑处理位图时要着重考虑分辨率这一要素,位图输出图像的质量决定于处理过程开始时设置的分辨率高低。通常情况下,图像的分辨率越高,所包含的像素就越多,图像就越清晰,印刷或显示的质量也就越好。同时,它也会增加文件占用的存储空间。也就是说编辑处理位图时,分辨率既会影响最后输出的质量也会影响文件的大小。与此相反矢量图中就不必过多考虑分辨率这一因素了。

常见位图图像格式

BMP格式

BMP格式是一种与硬件设备无关的图像文件格式,使用非常广。它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BMP文件所占用的空间很大。BMP文件的图像深度可用任何颜色深度(从黑白到 24 位颜色)存储单个光栅图像。BMP文件存储数据时,图像的扫描方式是按从左到右、从下到上的顺序。由于BMP文件格式是Windows环境中交换与图有关的数据的一种标准,因此在Windows环境中运行的图形图像软件都支持BMP图像格式。从总体上看,它不支持文件压缩,文件体积较大所以不适用于 Web 页面图片。可以说Windows 位图文件格式的缺点已经超过了它的优点。为了保证WEB图片(尤其为照片)的质量,请使用 PNG 、JPEG等其它文件格式,BMP则更适用于 Windows 中的壁纸图片。

  • 优点:BMP 支持 1 位到 24 位颜色深度,并且BMP 格式与现有 Windows 程序广泛兼容
  • 缺点:BMP 不支持压缩,这会造成生成的文件非常大

JPEG格式

JPEG格式是最常见的一种图像格式,文件后辍名为“.JPEG”或“.jpg”,JPEG可以说是人们最熟悉的图档格式了,相信在数字相机普及的现在,几乎每台数字相机、照相手机都可以(甚至只能)输出 JPEG 格式的图档。JPEG是一种很典型的使用破坏性压缩(lossy compression)的图档格式,也就是说使用者每次进行JPEG的存档动作后,图档的一些内容细节都会遭到永久性的破坏,尤其是使用过高的压缩比例,将使最终解压缩后恢复的图像质量明显降低,如果追求高品质图像,不宜采用过高压缩比例。

JPEG格式目前非常的流行,应用也非常广泛,在网络和光盘读物上,都能找到它的身影。各类浏览器均支持JPEG这种图像格式,因为JPEG格式的文件尺寸较小,下载速度快。JPEG2000作为JPEG的升级版,其压缩率比JPEG高约30%左右,同时支持有损和无损压缩。JPEG2000格式有一个极其重要的特征在于它能实现渐进传输(baseline-jpeg vs preogressive-jpeg),即先传输图像的轮廓,然后逐步传输数据,不断提高图像质量,让图像由朦胧到清晰显示。此外,JPEG2000还支持所谓的”感兴趣区域” 特性,可以任意指定影像上感兴趣区域的压缩质量,还可以选择指定的部分先解压缩。JPEG2000和JPEG相比优势明显,且向下兼容,因此可取代传统的JPEG格式。

优点:

  • 由于JPEG格式压缩的主要是高频信息,对色彩的信息保留较好,可以把文件压缩到最小,适合应用于WEB图片,可减少图像的传输时间
  • 可以支持24bit真彩色,普遍应用于需要连续色调的图像如色彩丰富的图片、照片等
  • 可利用可变的压缩比以控制文件大小
  • 支持交错(对于渐近式 JPEG 文件)
  • JPEG 广泛支持 WEB 标准,浏览器兼容支持较好

缺点:

  • 有损耗压缩会使原始图片数据质量下降
  • 当您每编辑和重新保存 JPEG 文件时,JPEG 会混合原始图片数据的质量下降。这种下降是累积性的、永久性的
  • JPEG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片;不适合用来储存线条图、图标或文字等等有清晰边缘的图片,而这正是下文中PNG格式的强势所在

GIF格式

GIF文件的数据,是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右,它不属于任何应用程序所以几乎所有相关软件都支持它,公共领域有大量的软件在使用GIF图像文件。

GIF图像文件的数据是经过压缩的,而且是采用了可变长度等压缩算法。所以GIF的图像深度从lbit到8bit,也即GIF最多支持256种色彩的图像。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画。

GIF解码较快,因为采用隔行存放的GIF图像,在边解码边显示的时候可分成四遍扫描。第一遍扫描虽然只显示了整个图像的八分之一,第二遍的扫描后也只显示了1/4,但这已经把整幅图像的概貌显示出来了。在显示GIF图像时,隔行存放的图像会给您感觉到它的显示速度似乎要比其他图像快一些,这是隔行存放的优点;另外,GIF不支持Alpha透明通道。

GIF 在许多特性与表现上都与 JPEG 有着相对的特性。GIF 使用无损压缩格式(Lossless Compression),但却限制了色彩表现能力、能够有效地节省档案尺寸。GIF 只拥有 8 位(256色)的颜色深度信息,当你的图片中出现的色彩在 256 色以内时,使用 GIF 可以得到相当好的输出质量、同时兼顾了档案大小。因此 GIF 非常适合用来表现图标、UI接口、线条插画、文字等部分的输出。另外 GIF 同时还支持透明背景(不支持Alpha透明通道)、以及动画图档格式,并且几乎不用担心支持性的问题:几乎 100%的浏览器都支持它。

由于 GIF 与 JPEG有着如此不同的特性,因此我们可以很轻易的选择何时该用哪一种格式来输出我们需要的图档:当图片拥有丰富的色彩时,并且没有明显锐利反差的边缘线条时,选择 JPEG 可以得到最好的输出结果,像是照片就是最好的例子;当图片是拥有明确边缘的线条图、没有使用太多色彩、甚至可能需要透明背景时,GIF 是很完美的选择,档案小、画质又精美。

PNG格式

便携式网络图形(简称PNG,英语全称:Portable Network Graphics),PNG能够提供长度比GIF小30%的无损压缩图像文件。它同时提供 24位和32位真彩色图像支持以及其他诸多技术性支持。由于PNG优秀的特点,PNG格式图片可以称为“网页设计专用格式”。PNG 最初的开发目的是为了作为 GIF 的替代方案的,作为做新开发的影像传输文件格式,PNG 同样使用了无损压缩格式,事实上 PNG 的开发就是因为 GIF 所使用的无损压缩格式专利问题而诞生的。PNG 分为 PNG-8 以及 PNG-24 两种格式,PNG-8 的特性很接近 GIF ,支持 256 色以及透明背景的特性。而 PNG-24 则支持了多达 160 万个色彩。虽然 PNG 不支持动画,但是 PNG-24 支持了Alpha 透明效果,这可以说是 PNG-24 最令人眼睛一亮的地方了。也就是说使用 PNG 输出图档时,可以有效的支持不同的透明度效果。

优点:

  • 支持高级别无损耗压缩
  • 支持 alpha 通道透明度
  • 支持伽玛校正、支持交错

缺点:

  • 较旧的浏览器IE6- 和程序可能不支持 PNG 文件
  • 与 JPEG 的有损耗压缩相比,PNG 提供的压缩量较少
  • 与 GIF 格式相比,对多图像文件或动画文件不提供任何支持

WebP格式

WebP格式,谷歌2010年开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。WebP是一种有损压缩,相较编码JPEG文件,编码同样质量的WebP文件需要占用更多的计算资源,意味着用户不需要牺牲图片质量就能够获得小体积的图片。从网页中加载图片时,WebP 比 PNG 快 45%。PNG 转 WebP 的压缩率要高于 PNG 原图压缩率,同样支持有损与无损压缩;转换后的 WebP 体积大幅减少,图片质量也得到保障;支持 Alpha 透明和 24-bit 颜色数,不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题;WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

对于 Google 开发团队来说,想把它打造成新的 Web 标准的路很艰难,但是它的优势也很明显:更小的图片体积 = 更快的加载速度。目前移动端Android4.0以上、PC端chorme 10+(14 ~ 16 有渲染bug)、opera 11+ 、safri均支持webp格式图片。 WEBP与JPG相比较,编码速度慢10倍,解码速度慢1.5倍,而绝大部分的网络应用中,图片都是静态文件,所以对于用户使用只需要关心解码速度即可。但实际上,webp虽然会增加额外的解码时间,但是由于减少了文件体积,缩短了加载的时间,实际上文件的渲染速度反而变快了。

webp上目前可行的应用场景:

  • 客户端软件,内嵌了基于Chromium的webview,这类浏览器中应用的网页是可以完全使用webp格式,提升加载渲染速度,不考虑兼容。
  • 用node-webkit开发的程序,用webp可以减少文件包的体积。
  • 移动应用 或 网页游戏 ,界面需要大量图片,可以嵌入webp的解码包,能够节省用户流量,提升访问速度

优势:

  • 对于png图片,webp比png小了45%,缺点是你压缩的时候需要的时间更久了

劣势:

  • 兼容性不太好, 只有opera,和chrome支持

APNG格式

简单来讲apng格式图片使用多个单张png连接起来的动画图片格式,支持全透明通道动画。相比于gif动画,没有毛刺,质量更高,但目前支持的浏览器并不完全。目前可用性相对较低,适用于对动画质量要求很高的情况。

BPG格式

BPG (Better Portable Graphics) 是一个新的图片格式。用来代替jpeg和webp的方案。

优势:

  • 高压缩比。在画质相同的情况下比jpeg小的多
  • 使用一个很小的js解码器就可以被浏览器支持
  • 基于高清视频压缩标准 (HEVC) 一个子集开发
  • 支持和jpeg相同的色值,并且在有损压缩的通知支持透明,
  • 单通道支持8到14位色值区域
  • 支持有损压缩
  • 可以添加更多的元数据编码
  • 支持动画
  • 相近画质前提下比webp更小

性能:

  • 根据mozilla的研究,bpg使用的HEVC编码比原生的HEVC性能更好,因为BPG的头部比HEVC的头部更小
  • 支持4:2:2和4:2:0的色值设置
  • BPG可以用于硬件上支持HEVC编解码器

这种图片格式目前还没有被浏览器支持,需要js解码,但其优势非常明显。

另外还有mozjpg、sharpP的图片格式,由于目前仍在起步阶段,这里暂不介绍了,有兴趣的可以去跟进了解下。

矢量图

矢量图,也称为面向对象的图像或绘图图像,是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示图像。矢量图形最大的优点是无论放大、缩小或旋转等不会失真;最大的缺点是难以表现色彩层次丰富的逼真图像效果。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体,它具有颜色、形状、轮廓、大小和屏幕位置等属性。这意味着它们可以按最高分辨率显示到输出设备上。

矢量图是根据几何特性来绘制图形,矢量可以是一个点或一条线,矢量图只能靠软件生成,文件占用内在空间较小,因为这种类型的图像文件包含独立的分离图像,可以自由无限制的重新组合。它的特点是放大后图像不会失真,和分辨率无关,适用于图形设计、文字设计和一些标志设计、版式设计等。

矢量图以几何图形居多,图形可以无限放大,不变色、不模糊。常用于图案、标志、VI、文字等设计。常用软件有:CorelDraw、Illustrator、CAD等。

常用矢量图格式

BW格式

它是包含各种像素信息的一种黑白图形文件格式。

AI格式

AI格式是Illustrator中的一种图形文件格式,也即Illustrator软件生成的矢量文件格式, 用Illustrator、CorelDraw、Photoshop 均能打开,编辑修改等等。与PSD格式文件相同,AI也是一种分层文件,每个对象都是独立的,他们具有各自的属性,如大小、形状、轮廓、颜色、位置等。以这种格式保存的文件便于修改,这种格式文件可以在任何尺寸大小下按最高分辨率输出。

CDR格式

它是CorelDraw中的一种图形文件格式,是所有CorelDraw应用程序中均能够使用的一种图形图像文件格式,也可以将CDR格式的文件导出为AI格式使用。

ICO格式

全称为 Icon file,它是Windows的图标文件格式,在站点图标制作中相信对它并不陌生,我们经常把它命名为favicon.ico。

SVG格式

可缩放矢量图形(简称SVG,英语全称:Scalable Vector Graphics)。它是基于XML(标准通用标记语言的子集),由万维网联盟进行开发(这也是将它作为重点介绍的原因之一)。因为SVG是被设计用于互联网,所以通过Javascript和DOM访问它就是最重要的应用模式。通过Javascript和DOM可以动态地修改HTML,同样也可以在浏览器中动态地创建、修改和删除图片。一种开放标准的矢量图形语言,可任意放大图形显示,边缘异常清晰,文字在SVG图像中保留可编辑和可搜寻的状态,没有字体的限制,生成的文件很小,下载很快,十分适合用于设计高分辨率的Web图形页面。

svg支持透明,缩放,动画,除了android 2.3的手机,其它场景都支持,是一种比较好的图片代替方案。

优势:

  • 矢量图形,不受像素影响——SVG的这个特性使得它在不同的平台或者媒体下表现良好,无论屏幕分辨率如何
  • SVG对动画的支持较好;其DOM结构可以被其特定语法或者Javascript控制,从而轻松的实现动画
  • Javascript可以完全控制SVG Dom 元素
  • SVG的结构是 XML,其可访问性(盲文、声音朗读等)、可操作性、可编程性、可被CSS样式化完胜Canvas。另外,其支持 ARIA 属性,使其如虎添翼。
  • SVG 图像可通过文本编辑器来创建和修改,可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的,可在图像质量不下降的情况下被放大,可在任何的分辨率下被高质量地打印。

劣势:

  • DOM比正常的图形慢,而且如果其结点多而杂,就更慢了
  • 不适合网页游戏等;当然,我们可以结合 Canvas + SVG来实现

位图与矢量图的区别

  • 位图受分辨率的影响,缩放和旋转容易失真,同时文件容量较大,当图片放大时,位图清晰度会变低,而矢量图不受分辨率影响,清晰度不变
  • 位图组成单位是“像素”,而矢量图组成单位是“数学向量”
  • 位图适用于色彩丰富的图片,只要有足够多的不同色彩的像素,就可以制作出色彩丰富的图象,逼真地表现自然界的景象;而矢量图文件容量较小,在进行放大、缩小或旋转等操作时图象不会失真,却不适用于色彩丰富的图片
  • 位图常用于网页中的照片等,容量较大;矢量图常用于印刷行业、网页logo或矢量插图中。

WEB网页设计中对于图片格式其它一些技巧总结

  • 尽量通过较小的视觉牺牲来换取较大的性能提升;
  • 对于写实的摄影图像或是颜色层次非常丰富的图像采用JPEG的图片格式保存一般能达到最佳的压缩效果;而处理一些logo、banner、需要透明效果、色调单一或简单线条构图的时候,适合使用PNG格式;GIF格式通常只适合表达动画效果;
  • 不要保存为100%品质的JPEG格式图片。因为100%并不一定是最高的品质,而是一个优化算法的极限值,所以会增加不必要的文件大小。建议存储95%品质的图片就可以最大限度的降低失真度;
  • 谨慎使用50%品质以下的压缩率。使用50%以下品质存储时会采用额外的压缩算法而导致图片失真更严重,尤其是对于有高对比度的图片;

前端的图片优化方案

图像通常占据了网页上下载字节的大部分,通常也占据了大量的视觉空间。因此,优化图像通常可以最大限度地减少从网站下载的字节数以及提高网站性能:浏览器需要下载的字节越少,占用客户端的带宽就越少,浏览器下载并在屏幕上渲染有用内容的速度就越快。

图像优化既是一门艺术,也是一门科学:说它是一门艺术,是因为单个图像的压缩并不存在明确的最佳方案,说它是一门科学,则是因为有许多发展成熟的方法和算法都能够显著缩减图像的大小。找到图像的最佳设置需要在许多方面进行认真分析:格式能力、编码数据的内容、质量、像素尺寸等。

使用base64编码代替图片

  • 场景:适用于图片大小小于2KB,页面上引用图片总数不多的情况
  • 原理:将图片转换为base64编码字符串inline到页面或css中
  • 优势:减少http的请求次数,并可以放到后台数据库中,只传输字符串,有较多的构建工具可以直接实现
  • 劣势:这种方法仅限于图片总数较少,而且图片大小小于2KB的情况。否则图片字符串会变得很长很长

合并图片sprite(雪碧图)

  • 场景:任何用到页面图片的场景
  • 原理:将多个页面上用到的背景图片合并成一个大的图片在页面中引用
  • 优势:可以有效的较少请求个数,而且,而不影响开发体验,使用构建插件可以做到对开发者透明。适用于页面图片多且丰富的场景。
  • 劣势:生成的图片体积较大,减少请求个数同时也增加了图片大小,不合理拆分将不利于并行加载

使用css、svg、canvas或iconfont代替图片

css代替图片

  • 场景:适用于移动端或较高级的浏览器,而且绘制的图案较为简单。
  • 原理:css方式可以用来绘制相对简单的团来代替图片,一般使用before或者after伪元素来丰富图案的复杂度。
  • 优势:具有实现简单,图片体积小的特点,可以实现简单的动态效果
  • 劣势:也受限于css的兼容性特点,绘制复杂图案困难

svg的描述和适用场景上文已说明。

canvas代替图片

  • 场景:需要高性能的图片或动画
  • 原理:适用html5的canvas元素绘制创建图片
  • 优势:整个就是画2D图形时,页面渲染性能比较高,页面渲染性能受图形复杂度影响小,性能只受图形的分辨率的影响,画出来的图形可以直接保存为 .png 或者 .jpg的图形,适合于画光栅图像或者不规则图形
  • 劣势:没有dom操作,必须依赖定时器,文字渲染性能差,不能添加描述(title属性什么的),兼容性限制

iconfont是一种web字体来代替图片的解决方案

  • 场景:代替页面上色彩单一的图片
  • 优势:兼容性好,应用广,目前使用也很广泛
  • 劣势:但是由于字体的颜色设置单一,只能用于代替颜色单一的图片,对于色彩复杂的图片,iconfont处理起来比较困难

响应式图片

  • 场景:不同终端对同一个图片需求不一样,可以根据终端加载不同的图片来节省没必要的流量
  • 原理:通过picture元素,picturefill或平台判断来为不同终端平台输出不同的图片
  • 优势:减少没必要的图片加载,灵活控制,慢速用户加载小图片不至于加载失败,移动端没必要加载大尺寸图片等,可以通过不同方式兼容所有浏览器
  • 劣势:无法避免图片的加载过程,图片本身没优化

图片压缩

  • 场景:在不得不加载图片的前提下,要进一步提升优化效果,只能通过有损或无损压缩来减少图片的大小。
  • 原理:对图片进行无损、有损压缩,转为压缩后图片来实现
  • 优势:减少图片加载流量,效果比较明显
  • 劣势:服务器和浏览器压力增大,而且服务器需要额外的服务支持

更好的图片格式

  • 场景:之前说到webp、bpg、sharpP等新图片格式具有更好的压缩比,可以使用这类新型的图片来代替原始图片
  • 原理:对图片格式转换,在画质可以接受的情况下达到更好的压缩比效果
  • 优势:减少图片加载流量,效果比较明显
  • 劣势:服务器和浏览器压力增大,而且服务器需要额外的服务支持,格式转换要考虑浏览器的兼容性

图片压缩转换工具

压缩图片方式比较多,例如下面的部分工具平台:

  • 智图,支持原图png转为jpeg和webp(目前不支持bpg),并提供各种压缩比压缩,目前在腾讯内部广泛使用。
  • iSparta提供PNG等图片格式的图片压缩,PNG等格式向APNG、WebP格式的转换,APNG动图向动态WebP格式的转换。
  • 又拍云 WebP自适应
  • 七牛云图片瘦身服务(imageslim),在尽可能不影响画质的情况下,将JPEG、PNG格式的图片实时压缩,大幅缩小文件体积
  • Picdiet,支持的图片格式:jpeg,独特且强悍的JavaScript算法,能极速压缩80%的图片大小,而不损害其质量。
  • ImageCompressor
  • PNG压缩
  • 图好快
  • TinyJPG
  • kraken.io

小结

上面提供了web图片的一些格式特点和图片优化的可行方案,具体的场景需要考虑选择不同的方式来进行优化。当然常见的优化思路为:页面静态资源图片使用css,canvas,svg,iconfont,sprite,base64来优化,后台返回的数据资源图片则通过响应式、图片压缩来优化,同时尽可能考虑使用新的更高压缩比的图片来做图片转化。例如webp、bpg。

参考链接:

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注