郑州网页设计培训
郑州网页美工培训
郑州UI设计培训
郑州淘宝美工培训
网页设计中图片格式问题的注意事项
发布时间:2016-02-15 17:46:51

    有时候我们可能会因为一张格式不正确的图片而导致网页设计品质的下降以及页面性能的降低。了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。


  要了解图片格式的特性,首先得从一些基本概念开始。这部分内容读起来可能会比较枯燥,但如果你耐着性子读完它,相信会获益匪浅。


  1、矢量图是通过组成图形的一些基本元素,如点、线、面,边框,填充色等信息通过计算的方式来显示图形的。就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半径来描述,当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。


  矢量图的优点在于文件相对较小,并且放大缩小不会失真。缺点则是这些完美的几何图形很难表现自然度高的写实图像。


  需要强调说明的是我们在web页面上所使用的图像都是位图,即便有些称为矢量图形(如矢量icon等)也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的(区别于像素绘制的图形)。


  2、位图又叫像素图或栅格图,它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图,只不过每个拼块都是一个纯色的像素点,当我们把这些不同颜色的像素点按照一定规律排列在一起的时候,就形成了我们所看到的图像。所以当我们放大一幅像素图时,能看到这些拼片一样的像素点。


  位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大,放大和缩小图像会失真。


  尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图,即他们都是通过记录像素点的数据来保存和显示图像,但这些不同格式的图像在记录这些数据时的方式却不一样,这就是涉及到有损压缩和无损压缩的区别。


  3、有损压缩与无损压缩


  有损压缩-你看到的不一定是真实的


  按照我的理解有损压缩就是在存储图像的时候并不完全真实的记录图像上每个像素点的数据信息,它会根据人眼观察现实世界的特性(人眼对光线的敏感度比对颜色的敏感度要高,生物实验证明当颜色缺失时人脑会利用与附近最接近的颜色来自动填补缺失的颜色)对图像数据进行处理,去掉那些图像上会被人眼忽略的细节,然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量,又不会影响图像的还原效果。


  JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。JPG在存储图像时会把图像分解成8*8像素的栅格,然后对每个栅格的数据进行压缩处理,当我们放大一幅图像的时候,就会发现这些8*8像素栅格中很多细节信息被去除,而通过一些特殊算法用附近的颜色进行填充(为了让大家看得更清楚我将图像的压缩比率调到很低)。这也是为什么我们用JPG存储图像有时会产生块状模糊的原因。


  4、无损压缩-最精确的拼图


  相对有损压缩而言无损压缩则会真实的记录图像上每个像素点的数据信息,但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的,哪些是不同的,然后把这些相同的数据信息进行压缩记录,(例如一片蓝色的天空之需要记录起点和终点的位置就可以了),而把不同的数据另外保存(例如天空上的白云和渐变等数据)。


  PNG是我们最常见的一种采用无损压缩的图片格式。无损压缩在存储图像前会先判断图像上哪些地方是相同的哪些地方是不同的,为此需要对图像上所有出现的颜色进行索引(我们把称这些颜色称为索引色。索引色就好比绘制这幅图像的“调色版”,PNG在显示图像的时候则会用“调色版”上的这些颜色去填充相应的位置。


  这里大家可能会疑惑既然PNG采用的是无损压缩为什么我们保存的PNG格式图片还会有失真呢?这是因为无损压缩只是说它的压缩方式会尽可能真实的还原图像,但从它的压缩原理我们可以知道它是通过索引图像上相同区域的颜色进行压缩和还原的,这就意味着只有在图像上出现的颜色数量小于我们可以保存的颜色数量时,我们才能真实的记录和还原图像,否则就会丢失一些图像信息(PNG8最多只能索引256种颜色,所以对于颜色较多的图像不能真实还原;PNG24则可以保存1600多万种颜色,基本能够真实还原我们人类肉眼所可以分别的所有颜色;PNG格式最多可以保存48位颜色通道)。而对于有损压缩来说,不管图像上的颜色多少,都会损失图像信息。


  5、JPG和PNG


  关于JPG和PNG的基本信息介绍这里就不赘述了,有兴趣详细了解的同学可以去这里:


  什么是JPG、什么是PNG。另外这里我们也不对GIF进行讨论,是因为PNG就是为取代GIF而生的,而且PNG的压缩算法也要优于GIF,所以只要不是需要动画效果的地方强烈建议都采用PNG格式图片。


  JPG的特性


  (1)支持摄影图像或写实图像的高级压缩,并且可利用压缩比例控制图像文件大小。


  (2)有损压缩会使图像数据质量下降,并且在编辑和重新保存JPG格式图像时,这种下降损失会累积。


  (3)JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。


  PNG的特性


  (1)能在保证最不失真的情况下尽可能压缩图像文件的大小。


  (2)PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。


  (3)对于需要高保真的较复杂的图像,PNG虽然能无损压缩,但图片文件较大,不适合应用在Web页面上。


联系地址

郑州金水区东风路文化路向西200米路北汇宝大厦5楼501

联系电话

0371-63218905 13613841515(徐老师)

CopyRight 2005--2013 © xueweb.cn 版权所有:郑州清新教育电脑设计培训学校 Tel:0371-63218905 13613841515 客服QQ:800060586