设为首页收藏本站

亚洲数据论坛

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

查看: 3133|回复: 0

【资源】 WEB网页设计中常用图片格式有哪些?

[复制链接]

576

主题

764

帖子

15

精华

Rank: 7Rank: 7Rank: 7

积分
3859
1859 枚
0 枚
2 枚
发表于 2015-12-16 10:53:30 | 显示全部楼层 |阅读模式
本帖最后由 勇敢的心 于 2015-12-17 08:28 编辑

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

一、位图图像

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

示例1:《位图放大前后对比图》

位图图像属性

索引颜色/颜色表

位图常用的一种压缩方法。从位图图片中选择最有代表性的若干种颜色(通常不超过256种)编制成颜色表,然后将图片中原有颜色用颜色表的索引来表示。这样原图片可以被大幅度有损压缩[1]。适合于压缩网页图形等颜色数较少的图形,不适合压缩照片等色彩丰富的图形。

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种颜色,而是28即256种颜色,8位图指的是用8个bits来表示颜色;
  • 16位色,216,从人眼的感觉来说,16位色基本可以满足视觉需要了;
  • 24位色,又称为“真彩色”。224,大概有1600万之多,这个数字几乎是人类视觉可分辨颜色的极限;
  • 32位色,并非232发色数,其实也是224种颜色,不过它增加了28阶颜色的灰度,也就是8位透明度,因此规定它为32位色。

在制作网站页面图片的时候,设计者一般选择24位图像。32位图像虽然质量更好,但同时也带来更大的图像体积(事实上,一般肉眼也很难分辨24位图和32位图的区别)。如果一个页面中图片体积过大的话,会使得浏览器加载页面速度明显变慢。此外将原始位图放大与缩小都会使图像效果失真,这是因为它们减小了图像中有效像素的数量或密度的缘故,所以在制作过程中应尽量避免图片被编辑的次数。

图像分辨率

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

常见位图图像格式

BMP格式

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

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

JPEG格式

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

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

优点:

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

缺点:

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

GIF格式

图形交换格式(简称:GIF,英语全称:Graphics Interchange Format),是CompuServe公司在 1987年开发的图像文件格式。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非常新,所以并不是所有的程序都可以用它来存储图像文件,但Photoshop,Gimp可以处理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 输出图档时,可以有效的支持不同的透明度效果。

示例2:《JPEG与PNG两种图像格式的对比效果》

优点:

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

缺点:

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

WebP格式

WebP格式[5],谷歌2010年开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。 但WebP是一种有损压缩[6],相较编码JPEG文件,编码同样质量的WebP文件需要占用更多的计算资源[7],意味着用户不需要牺牲图片质量就能够获得小体积的图片。然而,目前只有 Chrome、Opera 浏览器和 Android 4.0 默认浏览器本地原生支持 WebP 图片格式,所以要想成为标准 Google 还有很长的路要走。

Google 开发团队说相比于 PNG 图片,即便是最高的压缩,WebP 也比它小 28%,下面的示例3:《WebP格式与PNG格式的对比》中,WebP 图片比 PNG 图片小 45%,就是说从网页中加载图片时,WebP 比 PNG 快 45%。对于 Google 开发团队来说,想把它打造成新的 Web 标准的路很艰难,但是它的优势也很明显:更小的图片体积 = 更快的加载速度。

从上对比的示例中不难看出:

  • PNG 转 WebP 的压缩率要高于 PNG 原图压缩率,同样支持有损与无损压缩;
  • 转换后的 WebP 体积大幅减少,图片质量也得到保障;支持 Alpha 透明和 24-bit 颜色数,不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题;
  • WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

如果你想尝试 WebP 图片格式,可以在 Windows 下安装一个WebP图片解码器,或者使用 GIMP 等图片编辑软件,也可以安装 Photoshop插件。同样也可以在 Google 里搜索 WebP 格式图片,只需在关键词后边加个 filetype:webp 就可以。

除上述几种常用的位图图片格式外,尚有TGA、EXIF、FPX等多种图像格式,由于Web设计中很少用到,所以在此不再细述。

矢量图

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

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

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

常用矢量图格式

BW格式

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

AI格式

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

示例4:《莲花背景瑜伽女子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 优势

与位图图像JPEG、GIF等格式相比,使用 SVG 的优势还在于:

  • SVG 图像可通过文本编辑器来创建和修改,可被搜索、索引、脚本化或压缩;
  • SVG 是可伸缩的,可在图像质量不下降的情况下被放大,可在任何的分辨率下被高质量地打印。

位图与矢量图的区别

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

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

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

作为网页设计师也应该对图片格式的特性有一定了解,这样才能更好的表达你的创意和想法,从而让我们设计的WEB页面更快、更好。


是失败让我乐观;
是快乐让我冷静.
因为我有一颗和你一样勇敢的心!
支持支持 高兴高兴 淡定淡定 惊呆了惊呆了 给力给力 回帖回帖 生气生气 感谢感谢 路过路过
自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|手机版|Archiver|站点地图|亚洲数据论坛   

GMT+8, 2017-11-18 20:19

©2009-Infinity  Data Forum Asia

快速回复 返回顶部 返回列表