《网页设计制作要正确的使用图片格式》由会员分享，可在线阅读，更多相关《网页设计制作要正确的使用图片格式（6页珍藏版）》请在金锄头文库上搜索。
1、网页设计制作要正确的使用图片格式为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合 Web 页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。了解图片格式的特性就是为解答这些困惑从而
2、让我们设计的产品更好、更快。本文主要包括以下几方面内容：1、基本概念 矢量图与位图 有损压缩与无损压缩 2、实际应用 什么时候应该使用 PNG 什么时候应该使用 JPG 总结 3、思考与实践 什么样的设计更适合 Web 页面？ 我们还可以做些什么？ 4、附录-Photoshop 中各种参数的含义及设置技巧 1、基本概念要了解图片格式的特性，首先得从一些基本概念开始。这部分内容读起来可能会比较枯燥，但如果你耐着性子读完它，相信会获益匪浅。矢量图与位图矢量图-完美的几何图形矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。就好比我们在几何学里面描述一个
3、圆可以通过它的圆心位置和半径来描述，当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。矢量图的优点在于文件相对较小，并且放大缩小不会失真。缺点则是这些完美的几何图形很难表现自然度高的写实图像。需要强调说明的是我们在 web 页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量 icon 等）也是指通过矢量工具进行绘制然后再转成位图格式在 web 上使用的（区别于像素绘制的图形）。位图-神奇的拼图位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不
4、过每个拼块都是一个纯色的像素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以当我们放大一幅像素图时，能看到这些拼片一样的像素点（如下图）。位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。尽管我们在 web 页面中所使用的 JPG、PNG、GIF 格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是涉及到有损压缩和无损压缩的区别。有损压缩与无损压缩有损压缩-你看到的不一定是真实的按照我的理解有损压缩就是在存储图像的时候并不完全真实的记录图像
5、上每个像素点的数据信息，它会根据人眼观察现实世界的特性（人眼对光线的敏感度比对颜色的敏感度要高，生物实验证明当颜色缺失时人脑会利用与附近最接近的颜色来自动填补缺失的颜色）对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。JPG 是我们最常见的采用有损压缩对图像信息进行处理的图片格式。 JPG 在存储图像时会把图像分解成 8*8 像素的栅格（如上图），然后对每个栅格的数据进行压缩处理，当我们放大一幅图像的时候，就会发现这些 8*8 像素栅格中很多细节信息被去除，而通过一些特殊算法用附近的
6、颜色进行填充（为了让大家看得更清楚我将图像的压缩比率调到很低）。这也是为什么我们用 JPG 存储图像有时会产生块状模糊的原因。无损压缩-最精确的拼图相对有损压缩而言无损压缩则会真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。PNG 是我们最常见的一种采用无损压缩的图片格式。 无损压缩在存储图像前会先判断图像上哪些地方是相同的哪些地方是不同的
7、，为此需要对图像上所有出现的颜色进行索引（如上图），我们把称这些颜色称为索引色。索引色就好比绘制这幅图像的“调色版”，PNG 在显示图像的时候则会用“调色版”上的这些颜色去填充相应的位置。这里大家可能会疑惑既然 PNG 采用的是无损压缩为什么我们保存的 PNG 格式图片还会有失真呢？这是因为无损压缩只是说它的压缩方式会尽可能真实的还原图像，但从它的压缩原理我们可以知道它是通过索引图像上相同区域的颜色进行压缩和还原的，这就意味着只有在图像上出现的颜色数量小于我们可以保存的颜色数量时，我们才能真实的记录和还原图像，否则就会丢失一些图像信息（PNG8 最多只能索引 256 种颜色，所以对于颜色较多的
8、图像不能真实还原；PNG24 则可以保存 1600 多万种颜色，基本能够真实还原我们人类肉眼所可以分别的所有颜色；PNG 格式最多可以保存 48 位颜色通道）。而对于有损压缩来说，不管图像上的颜色多少，都会损失图像信息。JPG 和 PNG关于 JPG 和 PNG 的基本信息介绍这里就不赘述了，有兴趣详细了解的同学可以去这里：什么是 JPG、什么是 PNG。另外这里我们也不对 GIF 进行讨论，是因为 PNG 就是为取代 GIF 而生的，而且 PNG 的压缩算法也要优于 GIF，所以只要不是需要动画效果的地方强烈建议都采用 PNG 格式图片。这里我们不妨把 JPG 和 PNG 的一些特性进行一个
9、简单对比：格式 压缩模式 交错支持 透明支持 动画支持 JPG 有损压缩 支持 不支持 不支持 PNG 无损压缩 支持 支持 不支持 JPG 的特性1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。 2、有损压缩会使图像数据质量下降，并且在编辑和重新保存 JPG 格式图像时，这种下降损失会累积。 3、 JPG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。 PNG 的特性1、能在保证最不失真的情况下尽可能压缩图像文件的大小。 2、 PNG 用来存储灰度图像时，灰度图像的深度可多到 16 位，存储彩色图像时，彩色图像的深度可多到 48 位，
10、并且还可存储多到 16 位的 通道数据。 3、对于需要高保真的较复杂的图像，PNG 虽然能无损压缩，但图片文件较大，不适合应用在 Web 页面上。 PNG8 与 PNG24提到 PNG 格式就不得不提到 PNG8 和 PNG24，这种叫法并非官方定义，不过由于普遍使用已经被大家广泛接受了。通过前面的介绍我们知道 PNG 采用无损压缩是通过索引色去存储和还原图像的，PNG8 和 PNG24 后面的数字则是代表这种 PNG 格式最多可以索引和存储的颜色值。”8代表 2 的 8 次方也就是 256 色，而 24 则代表 2 的 24 次方大概有 1600 多万色。不仅如此，PNG8 还支持 1 位的
11、布尔透明通道，所谓布尔透明指的是要么完全透明要么完全不透明。而 PNG24 则支持 8 位（256 阶）的 alpha 通道透明，也就是说可以存储从完全透明到完全不透明一共 256 个层级的透明度（即所谓的半透明）。格式 最高支持色彩通道 索引色编辑支持 透明支持 PNG8 256 色 支持 支持布尔透明 PNG24 约 1600 万色 不支持 支持 8 位（256 阶）alpha 透明 可能通过以上特性的对比大家还不能很直观的理解在实际应用中到底因该选择什么格式的图片文件，我们不妨结合上面的基本概念通过几个例子去给大家说明。2、实际应用什么时候应该使用 PNG具备以下条件的图像更适合用 PN
12、G8 格式进行存储：1、图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。 2、具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。 根据经验具备上述条件的图像一般是使用 photoshop 或其他软件中的矢量工具进行绘制然后再保存成位图的图像。什么时候应该使用 JPG对于写实的摄影图像或是颜色层次非常丰富的图像采用 JPG 的图片格式保存一般能达到最佳的压缩效果。根据经验我们在页面中使用的商品图片、采用人像或者实物素材制作的广告 Banner 等图像更适合采用 JPG 的图片格式保存。总结由此可见在存储图像时采用 JPG 还是 PNG 主要依据图像上的色彩层次和
13、颜色数量进行选择。一般层次丰富颜色较多的图像采用 JPG 存储，而颜色简单对比强烈的则需要采用 PNG。但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用 PNG 进行存储。而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG 进行存储了。另外还有一个原则就是用于页面结构的基本视觉元素， 如容器的背景、按钮、导航的背景等应该尽量用 PNG 格式进行存储，这样才能更好的保证设计品质。 而其他一些内容元素，如广告 Banner、商品图片等对质量要求不是特别苛刻的，则可以用 JPG 去进行存储从而降低文件大小。
