web网页常用的图片格式.docx

网页常用的图片格式1、基本概念矢量图-完美的几何图形矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半径来描述，当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式而电脑在显示的时候则通过这些数据去绘制出我们定义的图像矢量图的优点在于文件相对较小，并且放大缩小不会失真缺点则是这些完美的几何图形很难表现自然度高的写实图像需要强调说明的是我们在 web 页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量 icon 等）也是指通过矢量工具进行绘制然后再转成位图格式在 web 上使用的（区别于像素绘制的图形） 位图-神奇的拼图位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像所以当我们放大一幅像素图时，能看到这些拼片一样的像素点（如下图） 位图的优点是利于显示色彩层次丰富的写实图像缺点则是文件大小较大，放大和缩小图像会失真。

位图示意尽管我们在 web 页面中所使用的 JPG、PNG 、GIF 格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是涉及到有损压缩和无损压缩的区别有损压缩-你看到的不一定是真实的JPG 是我们最常见的采用有损压缩对图像信息进行处理的图片格式JPG 在存储图像时会把图像分解成 8*8 像素的栅格，然后对每个栅格的数据进行压缩处理，当我们放大一幅图像的时候，就会发现这些 8*8 像素栅格中很多细节信息被去除，而通过一些特殊算法用附近的颜色进行填充（为了让大家看得更清楚我将图像的压缩比率调到很低） 这也是为什么我们用 JPG 存储图像有时会产生块状模糊的原因 无损压缩-最精确的拼图相对有损压缩而言无损压缩则会真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录， （例如一片蓝色的天空之需要记录起点和终点的位置就可以了） ，而把不同的数据另外保存（例如天空上的白云和渐变等数据） 。

是我们最常见的一种采用无损压缩的图片格式无损压缩在存储图像前会先判断图像上哪些地方是相同的哪些地方是不同的，为此需要对图像上所有出现的颜色进行索引（如上图） ，我们把称这些颜色称为索引色索引色就好比绘制这幅图像的“调色版” ，PNG 在显示图像的时候则会用“调色版”上的这些颜色去填充相应的位置这里大家可能会疑惑既然 PNG 采用的是无损压缩为什么我们保存的 PNG 格式图片还会有失真呢？这是因为无损压缩只是说它的压缩方式会尽可能真实的还原图像，但从它的压缩原理我们可以知道它是通过索引图像上相同区域的颜色进行压缩和还原的，这就意味着只有在图像上出现的颜色数量小于我们可以保存的颜色数量时，我们才能真实的记录和还原图像，否则就会丢失一些图像信息（PNG8 最多只能索引 256 种颜色，所以对于颜色较多的图像不能真实还原；PNG24 则可以保存 1600 多万种颜色，基本能够真实还原我们人类肉眼所可以分别的所有颜色；PNG 格式最多可以保存 48 位颜色通道） 而对于有损压缩来说，不管图像上的颜色多少，都会损失图像信息JPG 和 PNG格式 压缩模式 交错支持 透明支持 动画支持JPG 有损压缩 支持 不支持 不支持PNG 无损压缩 支持 支持 不支持JPG 的特性1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。

2、有损压缩会使图像数据质量下降，并且在编辑和重新保存 JPG 格式图像时，这种下降损失会累积3、 JPG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片PNG 的特性1、能在保证最不失真的情况下尽可能压缩图像文件的大小2、 PNG 用来存储灰度图像时，灰度图像的深度可多到 16 位，存储彩色图像时，彩色图像的深度可多到 48 位，并且还可存储多到 16 位的 α 通道数据3、对于需要高保真的较复杂的图像，PNG 虽然能无损压缩，但图片文件较大，不适合应用在 Web 页面上2、实际应用什么时候应该使用 PNG1、图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充2、具备较大亮度差异以及强烈对比的简单图像（如“立刻购买 ”按钮中的背景和文字） 什么时候应该使用 JPG对于写实的摄影图像或是颜色层次非常丰富的图像采用 JPG 的图片格式保存一般能达到最佳的压缩效果根据经验我们在页面中使用的商品图片、采用人像或者实物素材制作的广告 Banner 等图像更适合采用 JPG 的图片格式保存由此可见在存储图像时采用 JPG 还是 PNG 主要依据图像上的色彩层次和颜色数量进行选择。

一般层次丰富颜色较多的图像采用 JPG 存储，而颜色简单对比强烈的则需要采用 PNG但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含 PNG 进行存储而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用 JPG 进行存储了另外还有一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用 PNG 格式进行存储，这样才能更好的保证设计品质而其他一些内容元素，如广告 Banner、商品图片等对质量要求不是特别苛刻的，则可以用 JPG 去进行存储从而降低文件大小3、思考与实践什么样的设计更适合 web 页面？慎用较“重”的视觉设计元素Web2.0 时代网页设计的一大趋势就是越来越“轻” 除了对那些高光和圆角效果的审美疲劳之外，设计师们也开始意识到好的设计应该是内容与形式的完美结合，而非形式的堆砌所以设计师在应用那些较“重”的视觉效果时，一定要想清楚这样做的目的和意义，以及是否与产品的特点和受众的气质相契合轻量“设计一个比较典型的例子就是国内某知名网站，几乎没有采用任何需要图片的视觉元素，而是通过简单的 CSS 样式去实现，这样不仅能够突出内容，更能提升页面的访问速度。

所以我十分强烈的建议视觉设计师也掌握一定的 html 和 css 知识（尤其是 CSS3 实现了很多过去需要图片才能实现的效果，例如圆角和渐变） ，这样在做设计的时候能够全面的去考虑产品效果通过较小的视觉牺牲换取较大的性能提升有时候为了提升页面的加载速度达到更好的用户体验，不得不对设计进行优化这个时候利用我们对图片格式知识掌握就可以更有目的性的去进行优化例如下图是淘宝“双十一”大促活动的一个页头设计，由于页面访问量非常大并且要使用较多的商品图片，不得不对页头设计进行优化以提升性能这个时候我们就可以去掉一些不太重要的高光、渐变和阴影效果，从而大大降低文件大小我们还可以做些什么？Sprite 图片二次优化由于目前国内很多互联网公司没有页面重构师这一职位，所以页面切图和静态代码实现基本都是前端工程师去完成为提高页面性能目前普遍采用的实现方式是将与页面结构相关的需要用到图片的视觉元素集中在一个 PNG 图片上，然后通过 CSS 样式将其应用到页面中，我们称这个图片为 Sprite 图片由于这个图片上经常要集中较多的视觉元素，在用 PNG 格式存储时难免会产生失真而影响图片质量这个时候就需要视觉设计师帮助前端开发工程师对 Sprite 图片进行优化，这样做的好处是不仅能提升图片质量，还能达到减小文件大小的效果，可谓一举两得。

在前端工程师完成页面的静态代码之后，视觉设计师可以将定位好的 Sprite 图片进行像素级的优化，去掉不必要的杂色，并且用已存在的索引色对缺失的地方进行补充，这样不仅能压缩文件大小，还能提升设计品质。