网页中图片格式问题地总结

HYPERLINK "file:///C:\\Users\\Administrator\\Desktop\\图片格式与设计那点事儿%20-%20TaobaoUED_files\\图片格式与设计那点事儿%20-%20TaobaoUED.htm" \o "图片格式与设计那点事儿" 图片格式与设计那点事儿

第一次写技术博客，有不尽如人意的地方，还请见谅和指正。

为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。

除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。

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

本文主要包括以下几方面内容：

HYPERLINK "/blog/2010/12/10/jpg_png/" \l "1" 1、基本概念

HYPERLINK "/blog/2010/12/10/jpg_png/" \l "1-1" 矢量图与位图

HYPERLINK "/blog/2010/12/10/jpg_png/" \l "1-2" 有损压缩与无损压缩

HYPERLINK "/blog/2010/12/10/jpg_png/" \l "2" 2、实际应用

HYPERLINK "/blog/2010/12/10/jpg_png/" \l "2-1" 什么时候应该使用PNG

HYPERLINK "/blog/2010/12/10/jpg_png/" \l "2-2" 什么时候应该使用JPG

HYPERLINK "/blog/2010/12/10/jpg_png/" \l "2-3" 总结

HYPERLINK "/blog/2010/12/10/jpg_png/" \l "3" 3、思考与实践

HYPERLINK "/blog/2010/12/10/jpg_png/" \l "3-1" 什么样的设计更适合Web页面？

HYPERLINK "/blog/2010/12/10/jpg_png/" \l "3-2" 我们还可以做些什么？

HYPERLINK "/blog/2010/12/10/jpg_png/" \l "4" 4、附录-Photoshop中各种参数的含义及设置技巧

1、基本概念

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

矢量图与位图

矢量图-完美的几何图形

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

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

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

位图-神奇的拼图

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

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

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

有损压缩与无损压缩

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

按照我的理解 HYPERLINK "/view/128147.htm" \t "_blank" 有损压缩就是在存储图像的时候