图片格式与设计那点事儿（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
投稿猜你喜欢
使用Python实现自动化邮件发送，可以让你摆脱繁琐的重复性业务，可以节省非常多的时间。操作前配置（以较为复杂的QQ邮箱举例，其他邮箱操作类- 原文：http://research.microsoft.com/~helenw/papers/subspace.pdfwindow.nam
- 本文实例为大家分享了python tkinter实现简单计算器的具体代码，供大家参考，具体内容如下效果图直接上代码import tkinte
- 本文实例讲述了php实现比较全的数据库操作类。分享给大家供大家参考。具体如下：<?php class database {
- itchat是python开源第三方库，用于搭建微信机器人，几十行代码就能帮你实现自动的处理所有信息。比如，添加好友，搭建自动回复机器人，还
- delattr 函数用于删除属性。delattr(x, 'foobar') 相等于 del x.foobar。语法setat
- 本文旨在制作一个将普通照片转换成动漫图片的小工具，其中使用opencv的非标准库实现对图片完成转换。UI界面的制作使用的还是pyqt5，因为
- 前言最近因为业务需求，就写了这个脚本，脚本完成的任务是从FTP上下载一个目录，大家都知道从FTP上下载一个文件可用用get命令，下载多个文件
- 步骤：一、新建文本文档xxx.txt,修改文件类型为.udl二、打开该文件，在《提供数据》中找到对应的服务。三、在连接中选择需要的数据库，并
- 前沿以前go工程都是在我mac上打包成镜像然后再推到我的docker hub上去，每次更新都要经过打包->推送到dockert仓库-&
- mysql 下载安装配置 5.7.20 / 5.7.21，供大家参考，具体内容如下1、下载mysql，下载地址选择操作系统和版本，我是64位
- 目录前言什么是 websocketwebsocket 通信原理和机制websocket 的特点构建实时日志跟踪的小例子前言websocket
- 继上一篇计算checksum校验和，本章通过socket套接字，struct字节打包成二进制，select返回套接字的文件描述符的结合，实现
- 问题描述有时在遇到一个文本需要统计文本内词汇的次数 的时候 ，可以用一个简单的python程序来实现。解决方案首先需要的是一个文本文件(.t
- 最近做了一次口碑网注册流程改造，简单说一下激活邮件的设计上的一些小心得：1、尽量不要用图片，尤其是别把激活链接做成一个点击按钮。2、尽量少的
- pygame介绍Python Pygame 是一款专门为开发和设计 2D 电子游戏而生的软件包，它支 Windows、Linux、Mac O
- 我要实现的就是下图的这种样式，可参考下面这两个网站的留言板，他们的实现原理都是一样的畅言留言板样式：网易跟帖样式：原理需要在评论表添加两个主
- 最近有一个需求要把dataframe转换为多维矩阵，然后可以使用values来实现，下面记录一下代码，方便以后使用。import panda
- 家里没网络，实在无聊，玩游戏都没味道，只好玩CSS。这个东西实在没什么技术含量在里面，纯属打发时间。简单说明：一张图片放在底层，
- 1，flask中内置的过滤器模板中常用方法：{#过滤器调用方式{{变量|过滤器名称}} #} <!-- safe过滤器，可
