分享人：平四（淘宝交易线交互设计师）

1. PNG or JPG, that is the question! PNG还是JPG，这是个问题！

2. 为什么要讨论这个话题 设计师的困惑： 为什么设计的页面输出之后效果会和原稿不一样？ 什么样的设计更适合WEB页面？ 前端工程师的困惑： 切图时我是应该保存JPG还是PNG? 为什么我保存的PNG文件很大？ Photoshop里面那些参数代表什么含义？ 怎样在保证图片质量的情况下尽可能压缩文件的大小？

3. 希望给大家的帮助 解答大家在工作中遇到的种种问题 提高我们的设计品质 提升页面性能

4. 涉及的内容 基本概念 矢量图和位图 有损压缩与无损压缩 基础知识 什么是JPG 什么是PNG（PNG8与PNG24） 知识进阶 如何选择图片的格式（应用场景） 实际应用 PS中各种参数的含义 如何在设计过程中考虑图片大小和质量 设计师与前端开发工程师的配合 浏览器兼容问题

5. 不涉及的内容 图片压缩算法和编码格式的深入讨论 GIF的特性和应用场景 图片格式选择和参数设置的严格规定

6. 基本概念 矢量图和位图

7. 矢量图 矢量图也叫向量图 矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。例如一幅花的矢量图形实际上是由线段形成外框轮廓，由外框的颜色以及外框所封闭的颜色决定花显示出的颜色。由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。 矢量图形最大的优点是无论放大、缩小或旋转等不会失真；最大的缺点是难以表现色彩层次丰富的逼真图像效果。

8. 矢量图

9. 位图 位图图像(bitmap), 亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。

10. 位图

11. 位图 我们在WEB页面中常用的JPG、PNG和GIF都属于位图

12. 基本概念 有损压缩和无损压缩

13. 有损压缩 有损压缩可以减少图像在内存和磁盘中占用的空间，在屏幕上观看图像时，不会发现它对图像的外观产生太大的不利影响。因为人的眼睛对光线比较敏感，光线对景物的作用比颜色的作用更为重要，这就是有损压缩技术的基本依据。 有损压缩的特点是保持颜色的逐渐变化，删除图像中颜色的突然变化。生物学中的大量实验证明，人类大脑会利用与附近最接近的颜色来填补所丢失的颜色。例如，对于蓝色天空背景上的一朵白云，有损压缩的方法就是删除图像中景物边缘的某些颜色部分。当在·屏幕上看这幅图时，大脑会利用在景物上看到的颜色填补所丢失的颜色部分。利用有损压缩技术，某些数据被有意地删除了，而被取消的数据也不再恢复。 无可否认，利用有损压缩技术可以大大地压缩文件的数据，但是会影响图像质量。如果使用了有损压缩的图像仅在屏幕上显示，可能对图像质量影响不太大，至少对于人类眼睛的识别程度来说区别不大。可是，如果要把一幅经过有损压缩技术处理的图像用高分辨率打印机打印出来，那么图像质量就会有明显的受损痕迹。

14. 采用有损压缩的JPG格式图片

15. 无损压缩 无损压缩的基本原理是相同的颜色信息只需保存一次。压缩图像的软件首先会确定图像中哪些区域是相同的，哪些是不同的。包括了重复数据的图像(如蓝天)就可以被压缩，只有蓝天的起始点和终结点需要被记录下来。但是蓝色可能还会有不同的深浅，天空有时也可能被树木、山峰或其他的对象掩盖，这些就需要另外记录。 从本质上看，无损压缩的方法可以删除一些重复数据，大大减少要在磁盘上保存的图像尺寸。但是，无损压缩的方法并不能减少图像的内存占用量，这是因为，当从磁盘上读取图像时，软件又会把丢失的像素用适当的颜色信息填充进来。如果要减少图像占用内存的容量，就必须使用有损压缩方法。 无损压缩方法的优点是能够比较好地保存图像的质量，但是相对来说这种方法的压缩率比较低。但是，如果需要把图像用高分辨率的打印机打印出来，最好还是使用无损压缩几乎所有的图像文件都采用各自简化的格式名作为文件扩展名。从扩展名就可知道这幅图像是按什么格式存储的，应该用什么样的软件去读／写等等。

16. 采用无损压缩PNG格式图片

17. 基础知识 什么是JPG

18. JPG 介绍 英文全称：Joint Photographic Experts Group。在电脑中，JPEG（发音为/jay-peg/）是一种针对相片影像而广泛使用的一种失真压缩标准方法。使用这种压缩的档案格式一般也被称为JPEG；虽然在所有平台上.jpg是最普遍的，但是针对这种格式一般的扩展名是 .jpeg、.jfif、.jpg、.JPG、或是.JPE。 这个名称代表Joint Photographic Experts Group（联合图像专家小组）。JPEG本身只有描述如何将一个影像转换为字节的数据串流（streaming），但并没有说明这些位元组如何在任何特定的储存媒体上被封存起来。一个由独立JPEG小组（Independent JPEG Group）所建立的额外标准，称为JFIF（JPEG File Interchange Format，JPEG档案交换格式）详细说明如何从一个JPEG串流，产出一个适合于电脑储存和传输（像是在网际网路上）的档案。在普遍的用法，当有人称呼一个"JPEG档案"，一般而言他是意指一个JFIF档案，或有时候是一个Exif JPEG档案。然而，也有其他以JPEG为基础的档案格式，像是JNG。 JPEG/JFIF是最普遍在全球资讯网（World Wide Web）上被用来储存和传输照片的格式。它并不适合于线条绘图（drawing）和其他文字或图示（iconic）的图形，因为它的压缩方法用在这些图形的型态上，会得到不适当的结果（PNG和GIF格式通常是用来针对这种目的之图形；GIF每一像素只有8位元，并不很适合于用在彩色照片，PNG可以被用来无失真地储存照片，但是档案太大让它不适合在网页上放照片）。

19. JPG 编码模式 顺序式编码（Sequential Encoding） 一次将图像由左到右、由上到下顺序处理。 递增式编码（Progressive Encoding） 当图像传输的时间较长时，可将图像分数次处理，以从模糊到清晰的方式来传送图像（效果类似GIF在网络上的传输）。 无失真编码（Lossless Encoding） 阶梯式编码（Hierarchical Encoding） 图像以数种分辨率来压缩，其目的是为了让具有高分辨率的图像也可以在较低分辨率的设备上显示。

20. JPG 优点： 摄影作品或写实作品支持高级压缩。 利用可变的压缩比可以控制文件大小。 支持交错（对于渐近式 JPEG 文件）。 广泛支持 Internet 标准。 由于体积小，jpg在万维网中被用来储存和传输照片的格式。 缺点： 有损耗压缩会使原始图片数据质量下降。 当您编辑和重新保存 JPEG 文件时，JPEG 会混合原始图片数据的质量下降。这种下降是累积性的。 JPEG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。

21. 基础知识 什么是PNG

22. PNG 介绍 PNG（Portable Network Graphics）是一种新兴的网络图像格式。在1994年底，由于Unysis公司宣布GIF拥有专利的压缩方法，要求开发GIF软件的作者须缴交一定费用，由此促使免费的png图像格式的诞生。PNG一开始便结合GIF及JPG两家之长，打算一举取代这两种格式。1996年10月1日由PNG向国际网络联盟提出并得到推荐认可标准，并且大部分绘图软件和浏览器开始支持PNG图像浏览，从此PNG图像格式生机焕发。 流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG‘s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。 一般应用于JAVA程序中，网页或S60程序中是因为它压缩比高，生成文件容量小。

23. PNG 特性 流式读/写性能(streamability) 图像文件格式允许连续读出和写入图像数据，这个特性很适合于在通信过程中生成和显示图像。 逐次逼近显示(progressive display) 这种特性可使在通信链路上传输图像文件的同时就在终端上显示图像，把整个轮廓显示出来之后逐步显示图像的细节，也就是先用低分辨率显示图像，然后逐步提高它的分辨率。 透明性(transparency) 这个性能可使图像中某些部分不显示出来，用来创建一些有特色的图像。 辅助信息(ancillary information) 这个特性可用来在图像文件中存储一些文本注释信息。 独立于计算机软硬件环境。 使用无损压缩。 PNG文件格式中要增加下列GIF文件格式所没有的特性： 每个像素为48位的真彩色图像。 每个像素为16位的灰度图像。 可为灰度图和真彩色图添加α通道。 添加图像的γ信息。 使用循环冗余码(cyclic redundancy code，CRC)检测损害的文件。 加快图像显示的逐次逼近显示方式。 标准的读/写工具包。 可在一个文件中存储多幅图像。

24. PNG 优点： 1、PNG是目前保证最不失真的格式，它汲取了GIF和JPG二者的优点，存贮形式丰富，兼有GIF和JPG的色彩模式 2、它的另一个特点能把图像文件压缩到极限以利于网络传输，但又能保留所有与图像品质有关的信息，因为PNG是采用无损压缩方式来减少文件的大小，这一点与牺牲图像品质以换取高压缩率的JPG有所不同 3、它的第三个特点是显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像 4、PNG同样支持透明图像的制作，透明图像在制作网页图像的时候很有用，我们可以把图象背景设为透明，用网页本身的颜色信息来代替设为透明的色彩，这样可让图像和网页背景很和谐地融合在一起。 缺点： 1、 PNG的缺点是不支持动画应用效果，不然则可以完美取代GIF 2、对于需要高保真的较复杂的位图，PNG虽然能无损保存，但图片文件较大，不适合应用在互联网上

25. PNG8与PNG24 PNG8 1、可以存储8位色彩图像并且支持布尔透明的PNG格式图片 PNG24 1、可以存储24位色彩图像的PNG格式图片 2、Photoshop里的PNG24同时还支持8位的alpha透明通道

26. 知识进阶 如何选择图片格式（应用场景）

27. 选择PNG的场景 JPG 8K PNG8 4K

28. 选择PNG的场景 PNG8 256色 扩散8.3K JPG 100% 44.2K JPG 45% 9.5K

29. 选择JPG的场景

30. 选择JPG的场景 JPG 60%66.1K PNG24 325K PNG8 256无仿色85.5K PNG8 256扩散仿色115K

31. 选择JPG的场景

32. 选择JPG的场景 PNG24 231.9K (原图)JPG 36.3K PNG8 256 无仿色57.76K PNG8 256 扩散仿色156.3K

33. 实际应用 Photoshop中各种参数的含义

34. PNG中的参数设置 A B F C D G E A:“减低颜色深度算法”菜单 B:“仿色算法”菜单 C:“透明度”设置 D:“透明度仿色算法”菜单 E:“交错”设置 F:“杂边”设置 G:“Web靠色”

35. 索引色

36. 索引色 可感知 可选择 随样性 受限 自定 黑白 灰度 Mac OS Windows

37. 仿色

38. 仿色 PNG8 8色 无仿色 PNG8 8色 100%扩散仿色 PNG8 8色 图案仿色 PNG8 8色 图案仿色

39. 透明度仿色

40. 透明度仿色 实际透明效果 无透明 无透明度仿色、无杂边 无透明度仿色、前景色杂边 无透明度仿色、背景色杂边 扩散透明度仿色 图像透明度仿色 杂色透明度仿色

41. 交错

42. JPG中的参数设置 A B C D E F A:“品质” B:“连续” C:“优化” D:“嵌入颜色配置文件” E:“模糊” F:“杂边”

43. 实际应用 如何在设计过程中考虑图片的大小和质量

44. 借助视觉较小的牺牲却能换来很大的回报 56K 5.6K

45. 借助视觉较小的牺牲却能换来很大的回报

46. 实际应用 设计师和前端工程师的配合

47. Sprite图片优化 尽量把颜色相近的图片放在一个Sprite图片上 Sprite图片完成后由设计师进行二次优化

48. Sprite图片二次优化 优化前： 15.5K

49. Sprite图片二次优化 优化后： 14.3K

50. 实际应用 浏览器对图片格式的兼容问题 IE6对PNG24半透明图片的兼容性问题 IE6背景色和图片解析的色差问题