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

《网页中图片格式问题的总结》由会员分享，可在线阅读，更多相关《网页中图片格式问题的总结（22页珍藏版）》请在金锄头文库上搜索。

1、图片格式与设计那点事儿图片格式与设计那点事儿 第一次写技术博客，有不尽如人意的地方，还请见谅和指正。为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他 的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达 你的创意和想法。除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为 什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合 Web 页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进 行参数设置才能达到品质和性能的最优化。有时候我们可能会因为一张格式不正确的图片而导

2、致设计品质的下降以及页面性能的降低。 了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。本文主要包括以下几方面内容：1.1、基本概念矢量图与位图有损压缩与无损压缩 2.2、实际应用什么时候应该使用 PNG什么时候应该使用 JPG总结 3.3、思考与实践什么样的设计更适合 Web 页面？我们还可以做些什么？ 4.4、附录-Photoshop 中各种参数的含义及设置技巧1、基本概念、基本概念要了解图片格式的特性，首先得从一些基本概念开始。这部分内容读起来可能会比较枯燥， 但如果你耐着性子读完它，相信会获益匪浅。矢量图与位图矢量图与位图矢量图矢量图-完美的几何图形完美的几何图形矢量

3、图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的 方式来显示图形的。就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半径来 描述，当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑 在显示的时候则通过这些数据去绘制出我们定义的图像。矢量图的优点在于文件相对较小，并且放大缩小不会失真。缺点则是这些完美的几何图形 很难表现自然度高的写实图像。需要强调说明的是我们在 web 页面上所使用的图像都是位图，即便有些称为矢量图形（如 矢量 icon 等）也是指通过矢量工具进行绘制然后再转成位图格式在 web 上使用的（区别 于像素绘制的图形）。位图位图

4、-神奇的拼图神奇的拼图位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来 存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点， 当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的 图像。所以当我们放大一幅像素图时，能看到这些拼片一样的像素点（如下图）。位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图 像会失真。尽管我们在我们在 web 页面中所使用的页面中所使用的 JPG、PNG、GIF 格式的图像都是位图格式的图像都是位图，即他们都是通 过记录像素点的数据来保存和显示图像，但这些

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

6、JPG 是我们最常见的采用有损压缩对图像信息进行处理的图片格式。JPG 在存储图像时会 把图像分解成 8*8 像素的栅格（如上图），然后对每个栅格的数据进行压缩处理，当我们 放大一幅图像的时候，就会发现这些 8*8 像素栅格中很多细节信息被去除，而通过一些特 殊算法用附近的颜色进行填充（为了让大家看得更清楚我将图像的压缩比率调到很低）。 这也是为什么我们用 JPG 存储图像有时会产生块状模糊的原因。无损压缩无损压缩-最精确的拼图最精确的拼图相对有损压缩而言无损压缩则会真实的记录图像上每个像素点的数据信息，但为了压缩图 像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的

7、颜 色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色 的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上 的白云和渐变等数据）。PNG 是我们最常见的一种采用无损压缩的图片格式。无损压缩在存储图像前会先判断图像 上哪些地方是相同的哪些地方是不同的，为此需要对图像上所有出现的颜色进行索引（如 上图），我们把称这些颜色称为索引色。索引色就好比绘制这幅图像的“调色版”，PNG 在 显示图像的时候则会用“调色版”上的这些颜色去填充相应的位置。这里大家可能会疑惑既然 PNG 采用的是无损压缩为什么我们保存的 PNG 格式图片还会有 失真呢？这是因

8、为无损压缩只是说它的压缩方式会尽可能真实的还原图像，但从它的压缩 原理我们可以知道它是通过索引图像上相同区域的颜色进行压缩和还原的，这就意味着只 有在图像上出现的颜色数量小于我们可以保存的颜色数量时，我们才能真实的记录和还原 图像，否则就会丢失一些图像信息（PNG8 最多只能索引 256 种颜色，所以对于颜色较多 的图像不能真实还原；PNG24 则可以保存 1600 多万种颜色，基本能够真实还原我们人类 肉眼所可以分别的所有颜色；PNG 格式最多可以保存 48 位颜色通道）。而对于有损压缩 来说，不管图像上的颜色多少，都会损失图像信息。JPG 和和 PNG关于 JPG 和 PNG 的基本信息介

9、绍这里就不赘述了，有兴趣详细了解的同学可以去这里： 什么是 JPG、什么是 PNG。另外这里我们也不对 GIF 进行讨论，是因为 PNG 就是为取代 GIF 而生的，而且 PNG 的压缩算法也要优于 GIF，所以只要不是需要动画效果的地方强烈 建议都采用 PNG 格式图片。这里我们不妨把 JPG 和 PNG 的一些特性进行一个简单对比： 格式压缩模式交错支持透明支持动画支持JPG有损压缩支持不支持不支持PNG无损压缩支持支持不支持JPG 的特性的特性1.1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小

10、。2.2、有损压缩会使图像数据质量下降，并且在编辑和重新保存 JPG 格式图像时，这 种下降损失会累积。 3.3、JPG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的 较简单的图片。较简单的图片。PNG 的特性的特性1.1、能在保证最不失真的情况下尽可能压缩图像文件的大小。 2.2、PNG 用来存储灰度图像时，灰度图像的深度可多到 16 位，存储彩色图像时， 彩色图像的深度可多到 48 位，并且还可存储多到 16 位的 通道数据。 3.3、对于需要高保真的较复杂的图像，对于需要高保真的较复杂的图像，PNG 虽然

11、能无损压缩，但图片文件较大，不虽然能无损压缩，但图片文件较大，不 适合应用在适合应用在 Web 页面上。页面上。PNG8 与与 PNG24提到 PNG 格式就不得不提到 PNG8 和 PNG24，这种叫法并非官方定义，不过由于普遍使 用已经被大家广泛接受了。通过前面的介绍我们知道 PNG 采用无损压缩是通过索引色去 存储和还原图像的，PNG8 和 PNG24 后面的数字则是代表这种 PNG 格式最多可以索引和 存储的颜色值。”8代表 2 的 8 次方也就是 256 色，而 24 则代表 2 的 24 次方大概有 1600 多万色。不仅如此，PNG8 还支持 1 位的布尔透明通道，所谓布尔透明指

12、的是要么完全透明要么完 全不透明。而 PNG24 则支持 8 位（256 阶）的 alpha通道透明，也就是说可以存储从完 全透明到完全不透明一共 256 个层级的透明度（即所谓的半透明）。 格式 最高支持色彩通道 索引色编辑支持 透明支持PNG8256 色支持支持布尔透明PNG24约 1600 万色不支持支持 8 位（256 阶）alpha 透明可能通过以上特性的对比大家还不能很直观的理解在实际应用中到底因该选择什么格式的 图片文件，我们不妨结合上面的基本概念通过几个例子去给大家说明。2、实际应用、实际应用什么时候应该使用什么时候应该使用 PNG示例示例 1下图是淘宝网最常见的一个图片即“立

13、刻购买”按钮，这里我尝试用 JPG 和 PNG8 格式分别 进行保存，可以看到保存的结果有两个值得注意的地方：1.1、JPG 保存的文件大小是 PNG 保存的文件大小的 2 倍 2.2、JPG 不仅文件更大并且还出现了噪点（如图中红色方框标注的）那么是什么原因造成这样的差异呢？首先我们可以看出“立刻购买”这个按钮是在 photoshop 中用矢量工具绘制出来的，其渐变 填充是非常规则的线性渐变，文字颜色和描边等都是采用纯色，所以这个图像所包含的色 彩信息非常有限。根据前面我们介绍的无损压缩的特性，当用 PNG 存储这个图像时，只 需要保存很少的色彩信息就可以真实还原这个图像。而对于 JPG 格

14、式来说大小主要决定于 图像的颜色层次，所以在这种颜色较少但对比强烈的情况下，反而不能很好的压缩文件大 小。另外根据有损压缩的压缩算法 JPG 会在图像中通过渐变或其他方式填充一些被删除的数据 信息来对图像进行压缩，图中红色和白色的地方由于色差较大，JPG 在压缩过程中就会填 充一些额外杂色进去，反而影响的图像的质量。这也是为什么 JPG 不利于存储大块颜色相 近区域以及亮度差异十分明显的图像的原因。示例示例 2我们再来看另外一个应用场景，下图是在淘宝彩票页面使用的一个 Banner 图像。同样用 PNG8 和 JPG 进行了保存，可以发现当用 PNG8 保存时不仅保证了图像的质量且图像文 件的

15、大小仅有 8.3K，而当用 JPG 100%保存时文件大小则增加到 44.2K，如果不经放大可 能还看不出具体的差异，但实际和前面一样也会出现不必要的噪点。如果我们要达到 PNG8 的压缩率采用 JPG 45%进行保存，则图像会出现较严重的失真。由此我们可以得出结论，具备以下条件的图像更适合用 PNG8 格式进行存储：1.1、图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。 2.2、具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文 字）。根据经验具备上述条件的图像一般是使用根据经验具备上述条件的图像一般是使用 photoshop 或其他软件中的矢量工具进行绘制或其

16、他软件中的矢量工具进行绘制 然后再保存成位图的图像。然后再保存成位图的图像。什么时候应该使用什么时候应该使用 JPG示例示例 1从 JPG 的特性介绍我们知道 JPG 更适合用来存储摄影或写实图像，所以我们不妨先拿一 张摄影作品做尝试。下图是一副巴士车的照片，我们尝试用 JPG 60%（左上）、PNG8 256 色 无仿色（右上） 、PNG8 256 色 扩散仿色（左下）、PNG32（右下）分别进行了存储。可以看出当用 JPG 存储图像时不仅能够达到最大的压缩率，也能尽量保证原图的还原效果。而采用 PNG8 进行保存时图像文件大小更大，失真也较严重。只有在 PNG24 的格式下才能保证 品质，然而文件大小却比 JPG 要大很多。产生这种结果的原因也与 JPG 和 PNG 各自的压缩算法有关。对于摄影或者写实作品，由于受环境光线的影响，图像上的色彩层次十分丰富。比如巴士 车上的红色区域由于反光、阴影以及透视效果会形成明暗、深浅各异的区域，如果用 PNG 去保存，则需要不同明暗度的红色去存储这个区域。对于整张图片来说，PNG8 的 256 色 无法完全索引图像上出现