图片格式与设计
常用的图像类型与格式
位图
位图图像(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、BMP：Windows 位图Windows 位图可以用任何颜色深度（从黑白到24 位颜色）存储单个光栅图像。
Windows 位图文件格式与其他Microsoft Windows 程序兼容。
它不支持文件压缩，也不适用于Web 页。
从总体上看，Windows 位图文件格式的缺点超过了它的优点。
为了保证照片图像的质量，请使用PNG 文件、JPEG 文件或TIFF 文件。
BMP 文件适用于Windows 中的墙纸。
优点：*. BMP 支持 1 位到24 位颜色深度。
*. BMP 格式与现有Windows 程序（尤其是较旧的程序）广泛兼容。
缺点：*.BMP 不支持压缩，这会造成文件非常大。
*. BMP 文件不受Web 浏览器支持。
2、PCX：PC 画笔“PC 画笔”图片（也被称为Z-Soft 位图）会以任何颜色深度存储单个光栅图像。
画笔图片更广泛地用于较早的Windows 程序和基于MS-DOS 的程序。
画笔图片与许多较新的程序兼容。
PCX 图片支持“行程长度编码”(RLE) 内部压缩。
优点：*. PCX 在许多基于Windows 的程序和基于MS-DOS 的程序间是标准格式。
*. PCX 支持内部压缩。
缺点：*. PCX 不受Web 浏览器支持。
3、PNG：可移植网络图形PNG 图片以任何颜色深度存储单个光栅图像。
PNG 是与平台无关的格式。
优点：*. PNG 支持高级别无损耗压缩。
*. PNG 支持alpha 通道透明度。
*. PNG 支持伽玛校正。
*. PNG 支持交错。
*. PNG 受最新的Web 浏览器支持。
缺点：较旧的浏览器和程序可能不支持PNG 文件。
*.PNG 作为Internet 文件格式，与JPEG 的有损耗压缩相比，PNG 提供的压缩量较少。
作为Internet 文件格式，PNG 对多图像文件或动画文件不提供任何支持。
聊聊几种常见的图片格式Webp、GIF、PNG、JPG
前言前端开发中经常和图片打交道，那么熟悉各种图片格式的应用场景以及优劣势对于我们尤为重要图片类型•无损压缩：对文件的数据存储方式进行优化，采用某种算啊表示重复的数据信息，能在保证图片的质量的同时降低图片的尺寸，png是其中的代表，但尺寸相比原图减少不多。
可以还原•有损压缩：在压缩的时候，去除了人眼无法识别的图片细节，图片质量会下降，图片尺寸能得到很大程度的压缩。
不可还原•无压缩：不会对图片进行任何压缩处理，能够精准的呈现原图片，例如：BMP。
开发中我们考虑到加载性能问题，几乎不会考虑这种图片GIF图优点•Gif图采用LZW压缩算法进行编码，采用无损压缩，这意味着图片在压缩后质量不会受损。
•Gif图1987年提出的，距今发展了几十年了，兼容性好。
•支持透明度，GIF允许图像中的像素具有不透明和透明属性，这使得它在创建带有透明背景的图像时非常有用。
•支持动画，GIF支持简单的动画，可以用来创建循环播放的短动画，这在网页设计和用户界面方面非常有用。
缺点•只能存储8位颜色索引，色彩复杂、细节丰富的图片不适合。
使用场景•适合简单的动画或者图标，例如：Logo、Icon、动图。
•上报埋点时采用1 * 1像素的透明Gif图。
o避免跨域，用图片上报而不是采用fetch或ajax去上报，用Image的src不会存在跨域行为并且也会触发请求o兼容性好，所有浏览器都支持Image对象，即便浏览器不支持XMLHttpRequest(例如古董级的IE)，也能进行上报。
相比与navigator.sendBeacon兼容性更好。
o体积最小，1*1的透明PNG是67字节，而Gif只需要43个字节。
同样的性能比PNG图片减少35%的流量。
o支持透明，用Gif上报埋点最好是透明的，一是避免影响页面展示，而是可以不用存储颜色索引，减少图片大小。
o避免请求取消，ajax请求过程中离开页面会导致请求中断，最终导致上报失败。
然而Image的src不会中断。
图片的格式有几种
图片的格式有几种如今，在我们的日常生活中，图片无处不在。
无论是在我们的电脑上浏览网页、在手机上分享照片，还是在社交媒体上发布动态，图片都扮演着重要的角色。
然而，你知道吗？这些图片是以不同的格式存储和传输的。
在本文中，我们将探讨图片的不同格式以及它们各自的特点。
1. JPEG格式(JPEG)JPEG，全名为"Joint Photographic Experts Group"，是一种常用的图片格式。
这种格式最适合存储照片和复杂的图像。
JPEG文件通常具有较小的文件大小，并且可以实现高质量的压缩。
然而，仅在文件进行压缩时，图片质量会有所损失。
这种格式的图片在互联网上广泛应用，因为它们的加载速度快并且适合在线浏览。
2. PNG格式(PNG)PNG格式，全名为"Portable Network Graphics"，是另一种常见的图片格式。
PNG格式最适合于图标、简单的图形和透明图片。
与JPEG格式不同，PNG格式不会丢失图片的质量，因此它们的文件大小通常比JPEG格式大。
PNG格式的另一个优点是支持透明度，这使得它成为网页和设计中常用的格式。
3. GIF格式(GIF)GIF格式，全名为"Graphics Interchange Format"，是一个支持动画的常见图片格式。
GIF格式最适合于小尺寸的动画和简单的图像。
与JPEG和PNG格式相比，GIF格式的文件大小通常较小。
然而，由于压缩算法的限制，GIF格式的图片色彩较为有限。
尽管如此，GIF格式仍然被广泛应用于表情包、简单动态图和一些简单的网页元素。
4. BMP格式(BMP)BMP格式，全名为"Bitmap"，是一种未经压缩的图像格式。
与其他图片格式不同，BMP格式的文件非常大，并且不支持压缩。
由于文件大小的限制，BMP格式的图片在互联网上使用相对较少。
然而，这种格式的图像质量非常高，因为它们不会经历任何压缩。
小白科普!设计师和摄影师常用的图片格式
小白科普!设计师和摄影师常用的图片格式【PConline 教程】作为设计师，开发者或摄影师，很有必要了解图片格式的区别。
基于工作需求，你可以很容易选择某一文件类型，很多时候，格式差别你就不那么在意了。
以下列举了6种常用图片格式，以便你使用某种时，明了其优缺点。
图01JPEG （.jpg）术语“JPEG”是确定该格式的联合图像专家组（Joint Photographic Experts Group）的首字母缩写，文档类型是JPEG, 很容易在文档后缀名中找到.jpg。
JPG的文件格式所占空间很小，而且适合照片使用。
JPG格式是所列中有损压缩格式，意味着缩减图像信息压缩文档大小。
每次打开与保存（取决于当时压缩程度）都永久性的降低图像质量JPG不适于多次编辑的工作情形，但它因为姣小的文档空间，以及相对可忽略的压缩损失，很适用于网页用图。
与文字与图标一样，JPEG格式不适用于矢量地图。
当你处理有固定颜色，梯度平滑和有棱角的图像时，人为压缩的痕迹会相当明显。
JPEG图像不支持透明度处理，但他可以保留剪辑路径。
建议：在网站使用低分辨率的JPEG图片时，建议用PS将图片的保存为网页模式标签，通过改变元数据，会缩减图片文档大小。
图02PNG （.png）PNG格式全称便捷的网络制图，而且日益流行。
PNG格式无损压缩适用于地理插图，例如文字和图标。
PNG格式比JPEG 格式有更小的文档尺寸。
本格式不适用于印刷制品，因为压缩高分辨率的相片很慢，因此该格式常用于网络中低分辨率图像。
PS存储为网页模式有有两种默认格式PNG-24和PNG-8。
PNG-24是全彩（24位）支持全透明模式。
PNG限制于256彩（8位）和1位的透明度（或者100%的不透明度或100%的透明像素）。
图03GIF （.gif）一些人认为GIF（Graphics Interchange Format）过时了，但这仍是支持动态图片的常用格式，如果不需要动态图片，可以考虑8位的PNG代替。
图片格式——位图与矢量图
图⽚格式——位图与⽮量图☆图⽚格式㈠位图①位图⼜称为点阵图像，是由像素（图⽚元素）的单个点组成的。
通常分为8位，16位，24位和32位。
②所谓8位图并不是只有8种颜⾊，⽽是2的8次幂（即256）种颜⾊，8位图指的是⽤8个bits来表⽰颜⾊，对⼈眼的感觉来说，16位⾊基本能满⾜需要了。
③24位⼜称为“真⾊彩”，2的24次幂，⼤概有1600万种颜⾊之多，这个数字差不多是⼈眼可以分辨颜⾊的极限了。
④32位⾊并不是2的32次幂，其实也是2的24次幂，不过它添加了2的8次幂阶颜⾊的灰度，也就是8位透明度，因此规定它为32位⾊。
⑤在制作页⾯的时候，⼀般选⽤24位图像。
因为32位图像会带来更⼤的图像容量，会使浏览器加载页⾯速度变慢。
⑥放⼤原始位图，图像会失真，缩⼩原始位图，同样会使图像效果失真，这是因为缩⼩图像，减少的是图像中像素的数量。
㈡位图格式①JPG格式jpg可以很好地处理⼤⾯积⾊调的图像，如相⽚，⽹页中⼀般的图⽚②PNG格式PNG⽀持透明信息。
所谓透明，即图像可以浮现在其他页⾯⽂件或页⾯图像之上。
可以说PNG是专门为web创造的图像，通常⼤部分页⾯设计者在页⾯中加⼊logo或者⼀些点缀的⼩图像时，都会选⽤PNG格式。
PNG格式图⽚体积⼩，⽽且⽆损压缩，能保证⽹页打开速度，所以PNG格式图⽚是很好地选择。
③GIF格式GIF只⽀持256⾊以内的图像。
所以，GIF格式的图⽚效果是很差的。
但是，GIF可以制作动画，图像作者利⽤图像处理软件，将静态的GIF图像设置为单帧画⾯，然后把这些单帧画⾯连在⼀起，设置好⼀个画⾯到下⼀个画⾯的间隔时间，最后保存为GIF格式就可以了。
可以说，这就是简单的逐帧动画。
当处理⾊调复杂，绚丽的图像时，如照⽚，图画等，适合使⽤jpg格式；⽽处理⼀些logo，banner，简单线条构图的时候，适合使⽤PNG格式；GIF格式通常只适合表达动画效果。
㈢⽮量图①⽮量图格式⽮量图⼜称为“向量图”。
图片格式全解
PCX,ADOBE公司开发的应用于WINDOWS、MAC、unx和 DOS系统的一种电子出版软件的文件格式，该文件可以存储多页文件信息，其中包含图形和文件的查找，导航功能，因此使用该软件不需要排版或图像软件即可获得图文混排的版面，由于该格式支持超文本链接，因此是网络上最流行的文件格式
、RGB和会读文件，支持不带通道的LAB、索引颜色、位图文件。另外 还支持LZW压缩.。而且TIFF格式还可加入作者、版权、备注以及2位总线，附加的8位信号就被用来保存不可见的透明度信号以方便处理用，这就是Alpha通道。白色的alpha象素用以定义不透明的彩色象素，而黑色的alpha象素用以定义透明象素，黑白之间的灰阶用来定义半透明象素。
pict/PCT应用于MACINTOS图形和页面排版程序间作为应用程序见传递文件的中间文件格式，它支持带一个ALPHA的、通道的RGB文件和不带ALPHA通道的索引文件，灰度，位图文件，其对于具有大面积单色的图形非常有效，这种的、压缩效果非常明显
�
PSD，Photoshop的文件格式，可以保存图像的层、通道等多种信息。在未完成图像处理任务之前，一种常用且能较好保存图像信息的格式。
BMP，微软公司专用的格式，也就是常见的位图，它支持RGB、索引颜色、灰度和位图颜色模式，但不支持Alpha 通道，一般位图产生的文件比较大。
TIFF，无损压缩格式，便于在应用程序之间和计算机之间进行图像数据交换，并且它带有支持Alpha通道的CMYK
JPEG，一种有损压缩格式。它支持真彩颜色，生成的文件比较小，同样支持CMYK、RGB、和灰度颜色模式，但不支持alpha。
网页设计制作要正确的使用图片格式
网页设计制作要正确的使用图片格式为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。
除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。
比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。
有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。
了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。
本文主要包括以下几方面内容：1、基本概念矢量图与位图有损压缩与无损压缩2、实际应用什么时候应该使用PNG什么时候应该使用JPG总结3、思考与实践什么样的设计更适合Web页面？我们还可以做些什么？4、附录-Photoshop中各种参数的含义及设置技巧1、基本概念要了解图片格式的特性，首先得从一些基本概念开始。
这部分内容读起来可能会比较枯燥，但如果你耐着性子读完它，相信会获益匪浅。
矢量图与位图矢量图-完美的几何图形矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。
就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半径来描述，当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。
而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。
矢量图的优点在于文件相对较小，并且放大缩小不会失真。
缺点则是这些完美的几何图形很难表现自然度高的写实图像。
需要强调说明的是我们在web页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量icon等）也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的（区别于像素绘制的图形）。
位图-神奇的拼图位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。
Axure设计中的图片处理与优化技巧分享
Axure设计中的图片处理与优化技巧分享随着互联网的迅猛发展，网页设计越来越注重用户体验，而图片在网页设计中起到了至关重要的作用。
然而，过多或不合适的图片使用可能会导致网页加载速度过慢，影响用户的浏览体验。
在Axure设计中，如何处理和优化图片成为了一个重要的技巧。
本文将分享一些Axure设计中的图片处理与优化技巧，帮助设计师提升工作效率和用户体验。
一、选择合适的图片格式在Axure设计中，选择合适的图片格式是优化图片的第一步。
常见的图片格式有JPEG、PNG和GIF。
JPEG格式适用于色彩丰富、细节丰富的照片，但它不支持透明背景。
PNG格式支持透明背景，适用于图标和简单的图形。
GIF格式适用于动画效果。
根据图片的特点和需求，选择合适的图片格式可以减小文件大小，提高加载速度。
二、优化图片尺寸和分辨率在Axure设计中，图片尺寸和分辨率的优化也是非常重要的。
过大的图片尺寸和分辨率不仅会占用更多的存储空间，还会增加加载时间。
因此，设计师需要根据实际需求，调整图片的尺寸和分辨率。
可以使用图片编辑软件或在线工具来进行裁剪和缩放，确保图片大小合适，分辨率适中。
三、使用CSS Sprites技术CSS Sprites技术是一种将多个小图片合并为一张大图片的方法，通过CSS的background-position属性来显示不同的图片。
在Axure设计中，使用CSS Sprites技术可以减少HTTP请求，提高网页加载速度。
设计师可以将多个图标或小图片合并为一张大图片，并使用CSS来控制显示区域，从而减少图片的数量和文件大小。
四、使用Lazy Load延迟加载技术Lazy Load是一种延迟加载技术，它可以在用户滚动到可见区域时才加载图片，而不是一次性加载所有图片。
在Axure设计中，使用Lazy Load技术可以提高网页的加载速度，减少不必要的资源浪费。
设计师可以通过Axure插件或自定义脚本来实现Lazy Load功能，让页面在用户需要时再加载图片。
常见的图片格式有哪些？图像储存格式详解
常见的图⽚格式有哪些？图像储存格式详解常见的图⽚格式有哪些？图像储存格式详解导读:图⽚，现实中随处可见的⼴告中最直观的表达形式，从静态图形到动态图形，我们所见图⽚已然⽆处不在。
为了各种⾏业的需求，图⽚格式类型已经有多种类型，汇聚万千⾊彩于⼀⾝的常见图⽚格式有哪些呢？常见图像格式：⼀、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图像格式还增加了渐显⽅式，也就是说，在图像传输过程中，⽤户可以先看到图像的⼤致轮廓，然后随着传输过程的继续⽽逐步看清图像中的细节部分，从⽽适应了⽤户的“从朦胧到清楚”的观赏⼼理。
常用电脑图片格式详解
常用电脑图片格式详解
矢量图形：
Wmf office自带的剪贴画，office制作的图形
Fla Flash制作的图形
图片格式即图片的文件名后缀的扩展名（属性）
BMP：Windows系统下的标准位图格式，使用很普遍。
其结构简单，未经过压缩，一般图像文件会比较大。
它最大的好处就是能被大多数软件“接受”，可称为通用格式。
JPEG：也是应用最广泛的图片格式之一，它采用一种特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比（可达到2:1甚至40:1），所以“身材娇小，容貌姣好”，特别受网络青睐。
GIF：分为静态GIF和动画GIF两种，支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。
其实GIF是将多幅图像保存为一个图像文件，从而形成动画,所以归根到底GIF 仍然是图片文件格式。
PSD：图像处理软件“大哥大”Photoshop的专用图像格式，图像文件一般较大。
PCX：ZSOFT公司在开发图像处理软件Paintbrush时开发的一种格式，存储格式从1位到24位。
它是经过压缩的格式，占用磁盘空间较少，并具有压缩及全彩色的优点。
PNG：与JPG格式类似,网页中有很多图片都是这种格式，压缩比高于GIF，支持图像透明，可以利用Alpha通道调节图像的透明度。
DXF：三维模型设计软件AutoCAD的专用格式，文件小，所绘制的图形尺寸、角度等数据十分准确，是建筑设计的首选。
CDR：著名的图形设计软件——CorelDRAW的专用格式，属于矢量图像，最大的优点“体重”很轻，便于再处理。
各种图片格式详解(BMP,JPEG,GIF,TTF,PSD等等)
一、BMP图像文件格式
BMP是一种与硬件设备无关的图像文件格式，使用非常广。它采用位映射存储格式，除了图像深度可选以外，不采用其他任何压缩，因此，BMP文件所占用的空间很大。BMP文件的图像深度可选lbit、4bit、8bit及24bit。BMP文件存储数据时，图像的扫描方式是按从左到右、从下到上的顺序。
优点：BMP 支持 1 位到 24 位颜色深度。
BMP 格式与现有 Windows 程序（尤其是较旧的程序）广泛兼容。
缺点： BMP 不支持压缩，这会造成文件非常大。 BMP 文件不受 Web 浏览器支持。
二、 PCX图像文件格式
PCX这种图像文件的形成是有一个发展过程的。最先的PCX雏形是出现在ZSOFT公司推出的名叫PC PAINBRUSH的用于绘画的商业软件包中。以后，微软公司将其移植到 Windows环境中，成为Windows系统中一个子功能。先在微软的Windows3．1中广泛应用，随着Windows的流行、升级，加之其强大的图像处理能力，使PCX同GIF、TIFF、BMP图像文件格式一起，被越来越多的图形图像软件工具所支持，也越来越得到人们的重视。
九、SVG格式
SVG是可缩放的矢量图形格式。它是一种开放标准的矢量图形语言，可任意放大图形显示，边缘异常清晰，文字在SVG图像中保留可和可搜寻的状态，没有字体的限制，生成的文件很小，下载很快，十分适合用于设计高分辨率的Web图形页面。
十、PSD文件格式
这是Photoshop图像处理软件的专用文件格式，文件扩展名是．psd，可以支持图层、通道、蒙板和不同色彩模式的各种图像特征，是一种非压缩的原始文件保存格式。扫描仪不能直接生成该种格式的文件。PSD文件有时容量会很大，但由于可以保留所有原始信息，在图像处理中对于尚未制作完成的图像，选用 PSD格式保存是最佳的选择。
- 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的压缩算法则更利于对真实世界中这些复杂的色彩变化进行压缩处理，从而在尽量压缩文件大小的情况下比较好的还原图像的视觉效果。