图片格式与设计
常用的图像类型与格式
位图
位图图像(bitmap), 亦称为点阵图像，是由称作像素点组 成的。这些点可以进行不同的排列和染色以构成图样。当 放大位图时，图像会出现边缘锯齿或者出现马赛克现象。 适用于比较细致层次色彩比较丰富的图像，比如照片和图 画等。
矢量图与位图的区别
位图图像与矢量图形的比较
比较内容 特征
用途
放大缩小的效果 制作3D影像 文件大小
常用的图像类型与格式
有什么不同？
会动的图片
常 用 的 图 像 类 型 及 制格 作式
者
: 胡 佳 丽
矢量图
一、矢量图和位图
矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条 线，矢量图只能靠软件生成，文件占用内存空间较小。它的特 点是放大后图像不会失真，适用于图形、文字设计和一些标志、 版式设计等。
二、计算机中常见的图像格式
GIF格式
压缩比高，存储容量小，同时支持2D动画。支 持背景透明。色彩表现能力差。
PNG格式
结合了JPEG和GIF的优点，支持无损压缩不过 不支持动画。
SWF格式
flas软件的专用格式，基于矢量技术制作， 无论放大或缩小，其清晰度均不受影响。
课程小结
图像的类型：矢量图、位图 主要内容
常见图像的格式:.jpeg、.gif、.bmp、.png、.swf
注意：在处理图片素材时，通常将图片保存为jpg、png、或gif格式，但如果 需要图片背景透明效果，则必须选择png或gif格式。
CLASS OVER
谢谢观赏！
2020/11/5
14
位Байду номын сангаас图像
矢量图形
能较好表现色彩 可展示清晰线条或文字 浓度与层次
平面设计知识：平面设计中的图形复制和图片格式设置技巧
平面设计知识：平面设计中的图形复制和图片格式设置技巧平面设计是一种视觉艺术，其中图形复制和图片格式设置技巧是重要的技术，这篇文章将深入讨论这些技术。
一、图形复制1.复制的基本操作在平面设计中，复制是一项非常基本的技术，简单的复制图形可以帮助我们快速创建整洁的设计，同时保持重复的元素的一致性。
幸运的是，在许多软件中，都有一个快捷键来复制内容。
例如，Adobe Illustrator中的复制快捷键为Ctrl+C，粘贴快捷键为Ctrl+V，复制后，我们可以在一个新的图层上修改内容而不会影响原始图形。
2.确定复制数量和位置在有时候，我们需要重复一个图形来创建一个连续的模式，或者用同一个设计来填充大量的空间。
当我们需要在两个以上的位置放置图形时，我们可以使用复制和粘贴技术。
例如，在Adobe Illustrator中，我们可以使用Object> Transform> Move来确定我们要复制的数量和每个复制品之间的距离等参数。
3.利用反转、旋转和变奇型等技巧复制图形时，我们也可以利用反转、旋转和变奇型等技术来创建更多多样化的设计。
例如，在Adobe Illustrator中，我们可以使用Object> Transform> Reflect或Object> Transform> Rotate等功能来创建对称和旋转的图形，同时，我们还可以使用Object> Transform> Sheer来变形图形的形状，创造出独特的视觉效果。
二、图片格式设置技巧1.決定文件格式在平面设计中，文件格式可以影响文件质量和文件大小等方面，虽然格式种类繁多，但对于网路应用最常用的是JPEG和PNG文件格式。
JPEG文件通常用于照片和图像，而PNG文件则更适用于图形和字体。
JPEG文件格式支持多种像素密度，因此可以在质量较低的情况下减小文件大小，而PNG文件则通常会带有透明度，边缘清晰，颜色不受压缩的影响。
常用图片文件格式
常用图片文件格式1、bmp格式——位图文件——几乎不压缩——占用磁盘空间过大Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持。
随着Windows操作系统的流行与丰富的Windows应用程序的开发，BMP位图格式理所当然地被广泛应用。
这种格式的特点是包含的图像信息较丰富，几乎不进行压缩，但由此导致了它与生俱生来的缺点——占用磁盘空间过大。
2、jpg格式——国际标准图像压缩格式——有损压缩JPEG是国际标准图像压缩格式，是用于连续色调静态图像压缩的一种标准，文件后缀名为，jpg或，jpeg，是最常用的图像文件格式。
属于有损压缩格式，它能够将图像压缩在很小的储存空间，一定程度上会造成图像数据的损伤。
尤其是使用过高的压缩比例，将使最终解压缩后恢复的图像质量降低，如果追求高品质图像，则不宜采用过高的压缩比例。
JPEG压缩技术十分先进，它可以用有损压缩方式去除冗余的图像数据，换句话说，就是可以用较少的磁盘空间得到较好的图像品质。
而且JPEG是一种很灵活的格式，具有调节图像质量的功能，它允许用不同的压缩比例对文件进行压缩，支持多种压缩级别，压缩比越大，图像品质就越低；相反地，压缩比越小，图像品质就越高。
同一幅图像，用JPEG格式存储的文件是其他类型文件的1/10~1/20，通常只有几十KB，质量损失较小，基本无法看出。
JPEG格式压缩的主要是高频信息，对色彩的信息保留较好，适合应用于互联网；它可减少图像的传输时间，支持24位真彩色；也普遍应用于需要连续色调的图像中。
3、png格式——无损压缩的位图格式——支持透明效果png是一种采用无损压缩算法的位图格式，其设计目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。
PNG使用无损数据压缩算法，一般应用于JAVA程序、网页中，原因是它压缩比高，生成文件体积小。
PNG可以为原图像定义256个透明层次，使得彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘。
常见的图片文件格式及各自的特点
一、BMP格式BMP格式是Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持。
特点是包含的图像信息较丰富，几乎不进行压缩。
缺点是占用磁盘空间过大。
所以，目前BMP在单机上比较流行。
二、GIF格式特点是压缩比高，磁盘空间占用较少，所以这种图像格式迅速得到了广泛的应用。
此外，考虑到网络传输中的实际情况，GIF图像格式还增加了渐显方式。
目前Internet上大量采用的彩色动画文件多为这种格式的文件。
但GIF有个小小的缺点，即不能存储超过256色的图像。
尽管如此，这种格式仍在网络上大行其道应用，这和GIF图像文件短小、下载速度快、可用许多具有同样大小的图像文件组成动画等优势是分不开的。
三、JPEG格式JPEG文件的扩展名为.jpg或.jpeg，其压缩技术十分先进，它用有损压缩方式去除冗余的图像和彩色数据，获取得极高的压缩率的同时能展现十分丰富生动的图像，换句话说，就是可以用最少的磁盘空间得到较好的图像质量。
同时JPEG还是一种很灵活的格式，具有调节图像质量的功能，允许你用不同的压缩比例对这种文件压缩，当然我们完全可以在图像质量和文件尺寸之间找到平衡点。
它的应用也非常广泛，特别是在网络和光盘读物上，肯定都能找到它的影子。
目前各类浏览器均支持JPEG这种图像格式，因为JPEG格式的文件尺寸较小，下载速度快，使得Web页有可能以较短的下载时间提供大量美观的图像，JPEG同时也就顺理成章地成为网络上最受欢迎的图像格式。
四、JPEG2000格式JPEG 2000具备更高压缩率以及更多新功能的新一代静态影像压缩技术。
JPEG2000 与JPEG不同的是，JPEG2000 同时支持有损和无损压缩，而JPEG 只能支持有损压缩。
无损压缩对保存一些重要图片是十分有用的。
JPEG2000的一个极其重要的特征在于它能实现渐进传输，这一点与GIF的"渐显"有异曲同工之妙，即先传输图像的轮廓，然后逐步传输数据，不断提高图像质量，让图象由朦胧到清晰显示，而不必是像现在的JPEG 一样，由上到下慢慢显示。
图片通用格式有哪些
图片通用格式有哪些在现代互联网时代，图片已成为我们日常生活中不可或缺的一部分。
为了在不同设备和平台之间共享、展示和传输图片，通用的图片格式应运而生。
本文将介绍几种常用的图片通用格式。
1. JPEGJPEG（Joint Photographic Experts Group）是一种广泛应用的有损压缩图像格式。
由于其良好的压缩率和支持的颜色范围，JPEG是广泛用于数字摄影、网页图像和图像传输的格式。
尽管JPEG在压缩过程中会出现一些质量损失，但其优点在于可以通过调整压缩质量来平衡文件大小和图像质量。
2. PNGPNG（Portable Network Graphics）是一种无损压缩的图片格式。
与JPEG不同，PNG格式在压缩图像时不会丢失任何细节，因此保留了更高的图像质量。
PNG适用于需要保留图像细节的应用场景，如设计图、图标和透明背景图片。
3. GIFGIF（Graphics Interchange Format）是一种支持动画和透明背景的图片格式。
尽管GIF的色彩深度相对较低（最多256种颜色），它在动画图像方面具有独特的优势。
GIF也常用于呈现小型动画、表情包和简单的图形等。
4. WebPWebP是由Google开发的一种新型图像格式，旨在更好地平衡图片质量和文件大小。
WebP支持有损和无损压缩，并且通常比JPEG和PNG文件大小更小，同时保持相当的图像质量。
然而，由于WebP是一种相对较新的格式，对其支持的设备和平台有一定的限制。
5. TIFFTIFF（Tagged Image File Format）是一种无损的位图图像格式，被广泛用于印刷和出版业。
TIFF支持高色彩深度和分辨率，并且可以存储图像的所有元数据。
由于它的文件大小较大，TIFF往往用于印刷、档案和专业图像编辑工作中。
6. BMPBMP（Bitmap）是一种未经压缩的位图图像格式。
由于它的简单结构和无损特性，BMP通常用于Windows系统和图形编辑软件中。
常见的10种图片格式（文件后缀）和使用场景（方便选择不同的后缀）
常见的10种图⽚格式（⽂件后缀）和使⽤场景（⽅便选择不同的后缀）使⽤哪种图⽚格式是个⽼⽣常谈的问题，本站也多次写过关于图⽚格式的⽂章。
但之前我们都是在⼏种图⽚格式之间对⽐。
在这篇⽂章中，我们将列出10种最常见的图⽚⽂件格式，并介绍它的主要⽤途和优缺点。
通过阅读这篇⽂章，你将能了解在特定情况下，应选择哪种图⽚格式。
像素图和⽮量图⾸先必须注意，图⽚分为像素图和⽮量图两类，这两类图⽚有本质区别。
像素图：也叫位图，是使⽤像素点阵列拼合的图像。
通过捕捉得到的图像（如拍摄、截图）都是像素图。
像素图在放⼤到⼀定程度后会出现模糊。
常见的像素图格式包括：JPEG、PSD、PNG、TIFF。
⽮量图：是使⽤点线⾯构成的图像。
⽮量图往往是使⽤⽮量软件绘制得到的。
点线⾯都是数学化的，因此放⼤后不会模糊。
常见的⽮量图格式包括：AI、EPS、SVG。
如果希望再知道地详细⼀些，可以参考这篇⽂章：10种常见的图⽚⽂件格式01 JPEG⽤途：相机拍摄照⽚，⽹络图⽚等。
经常被⽤作图⽚处理的最终输出格式。
优势：⽤途⼴泛，受到⼏乎所有平台和系统的⽀持。
⽀持应⽤不同级别的压缩。
压缩后的⽂件尺⼨较⼩，适合携带和发送。
劣势：有损压缩，会随着重新存储次数增多⽽降低质量。
不⽀持图层。
不⽀持透明度。
JPEG是最常见的图⽚格式，使⽤⾮常⼴泛。
⼏乎所有的数码相机和⽹络环境都⽀持JPEG。
JPEG能使⽤有损压缩的⽅式，去除图⽚中不需要的像素并减少图⽚尺⼨。
JPEG和JPG是相同的格式，在早期版本的Windows中不⽀持三位以上的拓展名，因此有了JPG。
JPEG 2000是升级后的格式，但⾮常少⽤。
02 TIFF⽤途：⾼品质图像，常被平⾯设计师⽤于出版印刷。
也可以⽤于编辑和存储图像。
优势：⽆损压缩。
⽀持多页⾯和多图层。
软件基本⽀持。
⽀持透明度。
劣势：图⽚尺⼨很⼤，⼤于JPEG甚⾄⼤于RAW⽂件。
只有专业软件⽀持多页⾯功能。
TIFF是⽆损图像格式，默认设置下在压缩时不会损失信息，但也⽀持开启有损压缩设置。
常见的图片格式及其特点
常见的格式及其特点一、BMP格式BMP是英文Bitmap（位图）的简写，它是Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持，优点：BMP 支持 1 位到 24 位颜色深度。
包含的图像信息较丰富，与现有Windows 程序（尤其是较旧的程序）广泛兼容。
缺点：BMP 不支持压缩，占用磁盘空间过大。
BMP 文件不受 Web 浏览器支持。
二、GIF格式GIF 图片以 8 位颜色或 256 色存储单个光栅图像数据或多个光栅图像数据。
GIF 图片支持透明度、压缩、交错和多图像图片（动画 GIF）。
主要用于网页编辑方面。
优点：GIF 广泛支持 Internet 标准。
支持无损耗压缩和透明度。
动画 GIF 很流行，易于使用许多 GIF 动画程序创建。
缺点：GIF 只支持 256 色调色板，因此，详细的图片和写实摄影图像会丢失颜色信息，而看起来却是经过调色的。
三、JPEG格式JPEG也是常见的一种图像格式，它由联合照片专家组（Joint Photographic Experts Group）开发并以命名为"ISO 10918-1"，JPEG仅仅是一种俗称而已。
JPEG文件的扩展名为.jpg或.jpeg，优点：摄影作品或写实作品支持高级压缩。
利用可变的压缩比可以控制文件大小。
支持交错（对于渐近式 JPEG 文件）。
JPEG 广泛支持 Internet 标准。
缺点：有损耗压缩会使原始图片数据质量下降。
当您编辑和重新保存JPEG 文件时，JPEG 会混合原始图片数据的质量下降。
这种下降是累积性的。
JPEG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
四、TIFF标记图像文件格式TIFF 以任何颜色深度存储单个光栅图像。
TIFF 可以被认为是印刷行业中受到支持最广的图形文件格式。
TIFF 支持可选压缩，不适用于在 Web 浏览器中查看。
常见的图片格式有哪些？图像储存格式详解
常见的图片格式有哪些？图像储存格式详解导读:图片，现实中随处可见的广告中最直观的表达形式，从静态图形到动态图形，我们所见图片已然无处不在。
为了各种行业的需求，图片格式类型已经有多种类型，汇聚万千色彩于一身的常见图片格式有哪些呢？常见图像格式：一、BMP格式BMP是英文Bitmap（位图）的简写，它是Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持。
随着Windows操作系统的流行与丰富的Windows应用程序的开发，BMP位图格式理所当然地被广泛应用。
这种格式的特点是包含的图像信息较丰富，几乎不进行压缩，但由此导致了它与生俱生来的缺点--占用磁盘空间过大。
所以，目前BMP在单机上比较流行。
二、GIF格式GIF是英文Graphics Interchange Format（图形交换格式）的缩写。
顾名思义，这种格式是用来交换图片的。
事实上也是如此，上世纪80年代，美国一家著名的在线信息服务机构CompuServe针对当时网络传输带宽的限制，开发出了这种GIF图像格式。
GIF格式的特点是压缩比高，磁盘空间占用较少，所以这种图像格式迅速得到了广泛的应用。
最初的GIF只是简单地用来存储单幅静止图像（称为GIF87a），后来随着技术发展，可以同时存储若干幅静止图象进而形成连续的动画，使之成为当时支持2D动画为数不多的格式之一（称为GIF89a），而在GIF89a图像中可指定透明区域，使图像具有非同一般的显示效果，这更使GIF风光十足。
目前Internet上大量采用的彩色动画文件多为这种格式的文件，也称为GIF89a格式文件。
此外，考虑到网络传输中的实际情况，GIF图像格式还增加了渐显方式，也就是说，在图像传输过程中，用户可以先看到图像的大致轮廓，然后随着传输过程的继续而逐步看清图像中的细节部分，从而适应了用户的“从朦胧到清楚”的观赏心理。
目前Internet上大量采用的彩色动画文件多为这种格式的文件。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图片格式与设计油画家要了解他的颜料和画布、雕塑家要了解他的石材，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。
除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。
比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。
有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。
了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。
本文主要包括以下几方面内容：1. 1、基本概念o矢量图与位图o有损压缩与无损压缩2. 2、实际应用o什么时候应该使用PNGo什么时候应该使用JPGo总结3. 3、思考与实践o什么样的设计更适合Web页面？o我们还可以做些什么？4. 4、附录-Photoshop中各种参数的含义及设置技巧1、基本概念要了解图片格式的特性，首先得从一些基本概念开始。
这部分内容读起来可能会比较枯燥，但如果你耐着性子读完它，相信会获益匪浅。
矢量图与位图矢量图-完美的几何图形矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。
就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半径来描述，当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。
而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。
矢量图的优点在于文件相对较小，并且放大缩小不会失真。
缺点则是这些完美的几何图形很难表现自然度高的写实图像。
需要强调说明的是我们在web页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量icon等）也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的（区别于像素绘制的图形）。
位图-神奇的拼图位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。
一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。
所以当我们放大一幅像素图时，能看到这些拼片一样的像素点（如下图）。
位图的优点是利于显示色彩层次丰富的写实图像。
缺点则是文件大小较大，放大和缩小图像会失真。
尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是涉及到有损压缩和无损压缩的区别。
有损压缩与无损压缩有损压缩-你看到的不一定是真实的按照我的理解有损压缩就是在存储图像的时候并不完全真实的记录图像上每个像素点的数据信息，它会根据人眼观察现实世界的特性（人眼对光线的敏感度比对颜色的敏感度要高，生物实验证明当颜色缺失时人脑会利用与附近最接近的颜色来自动填补缺失的颜色）对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。
这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。
JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。
JPG在存储图像时会把图像分解成8*8像素的栅格（如上图），然后对每个栅格的数据进行压缩处理，当我们放大一幅图像的时候，就会发现这些8*8像素栅格中很多细节信息被去除，而通过一些特殊算法用附近的颜色进行填充（为了让大家看得更清楚我将图像的压缩比率调到很低）。
这也是为什么我们用JPG 存储图像有时会产生块状模糊的原因。
无损压缩-最精确的拼图相对有损压缩而言无损压缩则会真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法。
无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。
PNG是我们最常见的一种采用无损压缩的图片格式。
无损压缩在存储图像前会先判断图像上哪些地方是相同的哪些地方是不同的，为此需要对图像上所有出现的颜色进行索引（如上图），我们把称这些颜色称为索引色。
索引色就好比绘制这幅图像的“调色版”，PNG在显示图像的时候则会用“调色版”上的这些颜色去填充相应的位置。
这里大家可能会疑惑既然PNG采用的是无损压缩为什么我们保存的PNG格式图片还会有失真呢？这是因为无损压缩只是说它的压缩方式会尽可能真实的还原图像，但从它的压缩原理我们可以知道它是通过索引图像上相同区域的颜色进行压缩和还原的，这就意味着只有在图像上出现的颜色数量小于我们可以保存的颜色数量时，我们才能真实的记录和还原图像，否则就会丢失一些图像信息（PNG8最多只能索引256种颜色，所以对于颜色较多的图像不能真实还原；PNG24则可以保存1600多万种颜色，基本能够真实还原我们人类肉眼所可以分别的所有颜色；PNG 格式最多可以保存48位颜色通道）。
而对于有损压缩来说，不管图像上的颜色多少，都会损失图像信息。
JPG和PNG关于JPG和PNG的基本信息介绍这里就不赘述了，有兴趣详细了解的同学可以去这里：什么是JPG、什么是PNG。
另外这里我们也不对GIF进行讨论，是因为PNG就是为取代GIF 而生的，而且PNG的压缩算法也要优于GIF，所以只要不是需要动画效果的地方强烈建议都采用PNG格式图片。
这里我们不妨把JPG和PNG的一些特性进行一个简单对比：JPG的特性1. 1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。
2. 2、有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。
3. 3、JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
PNG的特性1. 1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
2. 2、PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。
3. 3、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
PNG8与PNG24提到PNG格式就不得不提到PNG8和PNG24，这种叫法并非官方定义，不过由于普遍使用已经被大家广泛接受了。
通过前面的介绍我们知道PNG采用无损压缩是通过索引色去存储和还原图像的，PNG8和PNG24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值。
”8″代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。
不仅如此，PNG8还支持1位的布尔透明通道，所谓布尔透明指的是要么完全透明要么完全不透明。
而PNG24则支持8位（256阶）的alpha通道透明，也就是说可以存储从完全透明到完全不透明一共256个层级的透明度（即所谓的半透明）。
可能通过以上特性的对比大家还不能很直观的理解在实际应用中到底因该选择什么格式的图片文件，我们不妨结合上面的基本概念通过几个例子去给大家说明。
2、实际应用什么时候应该使用PNG示例1下图是淘宝网最常见的一个图片即“立刻购买”按钮，这里我尝试用JPG和PNG8格式分别进行保存，可以看到保存的结果有两个值得注意的地方：1. 1、JPG保存的文件大小是PNG保存的文件大小的2倍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. 1、图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。
2. 2、具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。
根据经验具备上述条件的图像一般是使用photoshop或其他软件中的矢量工具进行绘制然后再保存成位图的图像。
什么时候应该使用JPG示例1从JPG的特性介绍我们知道JPG更适合用来存储摄影或写实图像，所以我们不妨先拿一张摄影作品做尝试。
下图是一副巴士车的照片，我们尝试用JPG 60%（左上）、PNG8 256色无仿色（右上）、PNG8 256色扩散仿色（左下）、PNG32（右下）分别进行了存储。
可以看出当用JPG存储图像时不仅能够达到最大的压缩率，也能尽量保证原图的还原效果。
而采用PNG8进行保存时图像文件大小更大，失真也较严重。
只有在PNG24的格式下才能保证品质，然而文件大小却比JPG要大很多。
产生这种结果的原因也与JPG和PNG各自的压缩算法有关。
对于摄影或者写实作品，由于受环境光线的影响，图像上的色彩层次十分丰富。
比如巴士车上的红色区域由于反光、阴影以及透视效果会形成明暗、深浅各异的区域，如果用PNG去保存，则需要不同明暗度的红色去存储这个区域。
对于整张图片来说，PNG8的256色无法完全索引图像上出现的所有颜色，于是在存储时就会丢失许多颜色而产生失真。
如果要保证图像的效果，则需要色彩范围更广的PNG24进行存储，相应的文件大小也会增加。
而JPG的压缩算法则更利于对真实世界中这些复杂的色彩变化进行压缩处理，从而在尽量压缩文件大小的情况下比较好的还原图像的视觉效果。