图片格式与设计那点事儿（4）
作者：平四 来源：taobaoUED 发布时间：2011-01-06 12:17:00
2、实际应用
什么时候应该使用PNG
示例1
下图是淘宝网最常见的一个图片即“立刻购买”按钮，这里我尝试用JPG和PNG8格式分别进行保存，可以看到保存的结果有两个值得注意的地方：
1、JPG保存的文件大小是PNG保存的文件大小的2倍
2、JPG不仅文件更大并且还出现了噪点（如图中红色方框标注的）
那么是什么原因造成这样的差异呢？
首先我们可以看出“立刻购买”这个按钮是在photoshop中用矢量工具绘制出来的，其渐变填充是非常规则的线性渐变，文字颜色和描边等都是采用纯色，所以这个图像所包含的色彩信息非常有限。根据前面我们介绍的无损压缩的特性，当用PNG存储这个图像时，只需要保存很少的色彩信息就可以真实还原这个图像。而对于JPG格式来说大小主要决定于图像的颜色层次，所以在这种颜色较少但对比强烈的情况下，反而不能很好的压缩文件大小。
另外根据有损压缩的压缩算法JPG会在图像中通过渐变或其他方式填充一些被删除的数据信息来对图像进行压缩，图中红色和白色的地方由于色差较大，JPG在压缩过程中就会填充一些额外杂色进去，反而影响的图像的质量。这也是为什么JPG不利于存储大块颜色相近区域以及亮度差异十分明显的图像的原因。
示例2
我们再来看另外一个应用场景，下图是在淘宝彩票页面使用的一个Banner图像。同样用PNG8和JPG进行了保存，可以发现当用PNG8保存时不仅保证了图像的质量且图像文件的大小仅有8.3K，而当用JPG 100％保存时文件大小则增加到44.2K，如果不经放大可能还看不出具体的差异，但实际和前面一样也会出现不必要的噪点。如果我们要达到PNG8的压缩率采用JPG 45％进行保存，则图像会出现较严重的失真。
由此我们可以得出结论，具备以下条件的图像更适合用PNG8格式进行存储：
1、图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。
2、具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。
根据经验具备上述条件的图像一般是使用photoshop或其他软件中的矢量工具进行绘制然后再保存成位图的图像。
0
投稿猜你喜欢
- 这主要是因为杀毒软件将一些asp关键词当作木马特征，记录保存着，所以遇到有这个关键词，就会禁止运行或删除。解决的方法是将这些关键词给拆开。把
- 上一篇：微软建议的ASP性能优化28条守则(8)技巧 28：阅读资源链接下面是一些与性能有关的出色的资源链接。如果您想了解有关信息，请阅读
- HTTP头中一般断点下载时才用到Range和Content-Range实体头，Range用户请求头中，指定第一个字节的位置和最后一个字节的位
Firefox 2.0 在对 XML 的支持方面有几个重要的改进。目前它的用户部署如日中天。了解 Firefox 2.0 XML 特性的改进- Notepad++是一款不错的编辑器，很轻巧，我很喜欢它。再换个主题，加个代码高亮，看上去就更专业了。如果你是Mac用户，应该听说或使用过T
- 下面都是我收集的一些比较常用的正则表达式，因为平常可能在表单验证的时候，用到的比较多。特发出来，让各位朋友共同使用。呵呵。匹配中文字符的正则
- '*************************************************'函数名：getMaxO
- 一个js代码，图片实时变形一幅图片,长度\宽度之大小与比例都不停地变化,如同哈哈镜的效果,很能引人注目,用在网页上,可以给人意外的惊喜!&l
- 在当前的Web设计中，jQuery被越来越多地应用在Web开发中，之所以jQuery收到如此程度的欢迎，除了其本身具备的优秀易读易操作的代码
- 今天看了篇关于Web Form Design的成功案例，虽然讲的事情很简单，但总结了一些方法，翻译过来做个原始积累吧，以后写东西举例子时也好
- 索引是以表列为基础的数据库对象。索引中保存着表中排序的索引列，并且纪录了索引列在数据库表中的物理存储位置，实现了表中数据的逻辑排序。通过索引
- 在一些情况下，MySQL可以直接使用索引来满足一个 ORDER BY 或 GROUP BY 子句而无需做额外的排序。尽管 ORDER BY
- 今天运行程序时，在Oracle中输入SQL语句：select * from USERS as u ，程序报错输入select * from
- 下面的这个函数实现的功能是列出某文件夹下的所有文件，以文件名字母排序，先数字后字母再到中文。<％
- 首先，FSO是FileSystemObject的简称。当然也就是我们的俗称FSO组件了，该组件可以用来处理驱动器、文件夹以及文件。它可以检测
- 可能出现的原因有：◆源数据库或目标数据库为 SQL Server 6.5 版。连接到 Access 项目的当前 SQL 服务器和要将数据库转
- 这篇论坛文章主要介绍了Oracle数据库到SQL Server数据库主键的迁移过程，具体内容请参考下文。由于项目需要要将以前Oracle的数
- Oracle客户端NLS_LANG设置 OracleWindowsMicrosoftUnixBash 1. NLS_LANG 参数组成 NL
- 如何用METADATA替换ADOVBS.INC？ 在ASP中，使用组件时，如ADO，得先包含
- 1. 服务器优化优化原则：内存里的数据要比磁盘上的数据访问起来快;站数据尽可能长时间地留在内存里能减少磁盘读写活动的工作量;让索引信息留在内
