JPGNGGIF压缩原理与成像方式

JPG、PNG、GIF图片格式压缩原理与成像方式一、基本概念要了解图片格式的特性，先要学习一些基本概念。这部分比较枯燥，但如果你耐心学完，一定获益匪浅。1、矢量图与位图（1） 矢量图-完美的几何图形矢量图是通过一些基本图形元素，如点、线、面，边框，填充色等通过计算方式来显示的图形。例如，描述一个圆通过其圆心位置和半径，通过边框粗细、颜色及填充色等描述其样式。电脑在显示时通过这些数据绘制出定义的图像。矢量图的特点是：文件容量较小，且缩放不失真。缺点是无法表现自然界真实场景。web页中的图像都是位图，即便有些矢量图形，也是用矢量工具绘制后转成的位图格式。（2） 位图-神奇的拼图乂叫像素图或栅格图，是通过记录图像中每个点的颜色、深度、透明度等信息来存储和显示图像的。一张位图好比一幅拼图，其中的每个小拼块就是一个像素点，把这些不同颜色的像素点按一定规律拼接在一起，就形成了图像。放大一幅像素图时，能看出这些像素点（下图）。位图的特点是：可以显示出色彩丰富的真实图像。缺点是文件较大,缩放会出现失真。尽管web页中常用的JPG、PNG、GIF格式都是位图，但他们的编码方式不同，这就是有损和无损压缩的区别。2、有损压缩与无损压缩(1)有损压缩一一你看到的不一定是真的有损压缩就是在存储图像时不完全记录图像的每个像素点信息，它根据人眼观察现实的特性(人眼对光线敏感度比对颜色的敏感度高。生物实验证明，当颜色缺失时，人脑会利用附近的最接近颜色自动填补缺失颜色)处理图像数据，去除被人眼忽略的细节，用邻近色以渐变或其他方式重新填充。这样既大大降低图像的数据量，乂不会影响图像的还原效果。JPG是最常见的用有损压缩方式处理图像信息的格式。在存储图像时,JPG把图像分解成8*8像素的栅格（如上图），然后对每个栅格信息进行压缩，放大一幅图像时，就会发现这些8*8像素栅格中的很多细节信息被去除，而通过一些特殊算法用附近颜色进行填充（为看得更清楚，这里将图像压缩比调得很低）。这也是为什么看JPG图像时乂是产生块状模糊的原因。（2）无损压缩-最精确的拼图无损压缩真实地记录了图像上每个像素点的数据信息，但为了压缩图像文件的大小，常采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。PNG是最常见的无损压缩图片格式。在存储图像前，无损压缩将自动判断图像中哪些相同和不同的部分，因此要对图像颜色进行索引（如上图），这些颜色称为索引色。索引色好比绘制该图像的“调色版”，在显示图像时将自动用“调色版”上颜色填充相应的位置。既然PNG用无损压缩，为什么PNG图片还会失真这是因为无损压缩只是说明其压缩方式可以尽可能地还原图像，但因其压缩是通过索引图像上相同区域颜色进行的压缩和还原，所以只有图像上的颜色数量小于可以保存的颜色数量时，才能记录和还原图像，否则就会丢失一些信息（PNG8只能索引256种颜色，所以对颜色多于256色图就不能真实还原；PNG24可以保存1600多万种颜色，可以真实还原人眼可以分辨的所有颜色）。PNG格式最多可以保存48位颜色。而有损压缩，则是无论原图颜色多少种，都将损失掉图像信息。3、JPG和PNG这里不再讨论GIF,因为PNG取代了GIF,而且PNG的压缩算法优于GIF,所以如果不需要动画。建议都采用PNG格式。这里我们不妨把JPG和PNG的一些特性进行一个简单对比:格式压缩模式交做持透明支持动画支持JPG有损压缩支持不支持不支持PNG无损压缩支持支持不支持(])JPG特性支持摄影或写实图像的压缩，并且可利用压缩比来控制文件大小。有损压缩会降低图像数据质量，并且在编辑和再保存JPG格式时，累积这种损失。JPG不适合颜色很少、且具有大块颜色相近或亮度差异明显的简单图片。(2)PNG特性能在保真效果下，尽可能地压缩图像文件的大小。储灰度图时，深度可达16位，存储彩图时，深度达48位，并且还可存储16位的alpha通道数据。对需要保真的复杂图像，PNG能无损压缩，但文件较大，不适合用于网页上。(3)PNG8与PNG24PNG8和PNG24的叫法并非官方定义，但已经被大家广泛接受。PNG8和PNG24后的数字表示对应PNG可以索引和存储的颜色值。％”为2的8次方即256色，“24”则表示2的24次方约1600多万色。此外，PNG8还支持1位布尔透明通道，即或者透明或者不透明；PNG24则支持8位（256阶）的alpha通道，即从透明到不透明分为256级（即可以设置半透明）。格式最咼支持色彩通道索引色编辑支持透明支持PNG8256色支持支持布尔透明PNG24约1600万色不支持支持8位（256阶）alpha透明二、实际应用1、什么时候用PNG示例1下图是淘宝网最常见的一个图片一一“立刻购买”按钮，这里用JPG和PNG8格式分别保存后，可以看到：JPG保存的文件大小是PNG保存的文件大小的2倍JPG不仅文件更大并且还出现了噪点（如图中红色方框标注的）首先，“立刻购买”按钮是用矢量工具绘制的，其渐变填充是规则的线性渐变，字色和描边都采用纯色，所以这类图像的色彩数有限。依据无损压缩特性，用PNG存储此图只需保存很少色彩信息就可以真实还原。而对JPG来说，存放方式取决于图像的颜色层次，所以虽然颜色少但对比强烈，反而无法很好地对文件进行压缩。此外，按有损压缩算法，JPG自动通过渐变或其他方式填充被删除的信息来实现压缩，该图的红、白色位置色差较大，JPG将自动填充额外的杂色，反而影响了图像质量。因此，JPG不适合存储大块颜色相近且亮度差异明显的图像。示例2再看另一个应用，下图是淘宝彩票页面的一个Banner。用PNG8和JPG保存后可以看到，用PNG8保存不仅可以保证图像质量而且文件大小仅，而用JPG100%保存，文件增至，而且和前面一样，也会出现不必要的噪点。如果要达到PNG8的压缩率改用JPG45%保存，则图像出现严重的失真。

PNG8256gj赫色大小：S.Mk?HZ0s3Qff^PNG8256gj赫色大小：S.Mk?HZ0s3Qff^JPG品庙丄。。洗大小:442K施30幵美,肝奖JPG品庙M爲大小：9.9K由此得出，具备以下条件的图像更适合用PNG8格式进行存储：图像颜色少，并且主要以纯色或平滑渐变色进行填充。具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。2、什么时候用JPG示例1JPG适合存储摄影或写实图像，所以用一张摄影作品进行尝试。下图是一幅巴士照片，分别用JPG60%（左上）、PNG8256色?无仿色（右上）、PNG8256色，扩散仿色（左下）、PNG32（右下）保存。可以看到，用JPG不仅可以达到最大压缩率，而且可以保证原图还原。而PNG8保存的文件更大，失真也较严重。只有PNG24才能保证品质，但文件比JPG要大很多。这种结果与JPG和PNG各自的压缩算法有关。对摄影或写实作品，由于受环境光线的影响，图像上的色彩十分丰富。比如巴士车上的红色由于反光、阴影及透视会形成明暗、深浅各异的色区。

用PNG保存，需要按不同明暗度的红色存储该区域。且PNG8无法完全索引所有颜色，于是存储为PNG8丢失很多颜色出现失真。为保证图像质量,存储为PNG24,但文件大小也会增加。而JPG的压缩算法更利于对真实世界的这些复杂色彩变化进行压缩处理，从而在尽量压缩文件大小的情况下较好地还原图像。示例2JPG只在存储照片时才用到看下面这个例子。下图是最近较火爆的某微博页面，用户可以选择不同的风格，会自动对应相应的背景图。当保存为JPG时（“背景另存为”）文件大小仅；保存为PNG8文件大小为，且图像显示出锯齿色块；对PNG8增加了扩散仿色效果后，文件达；而保存为PNG24文件大小为。这是因为，图像采用了很多真实素材（如白云、蚂蚁、绿叶等），这JPGgi图大小:3&球PNGSJPGgi图大小:3&球PNGS256克仿色大小:57.76KPNG8256旷散仿色大小:15&.3KPMGW4大心:Z31.9K由此得出：对摄影图或颜色层次丰富的图像（例如使用大量渐进色的图像），用JPG更能达到最佳压缩效果。网页中，商品图、用人像或实物素材制作的广告Banner等更适合保存为JPG。3、总结可见，采用JPG还是PNG保存，取决于图像的色彩层次和颜色数量。层次丰富颜色较多的适合保存为JPG颜色简单且对比强烈的适合保存为PNG。特例：有些图像色彩层次丰富，但图片尺寸较小，包含的颜色数量有限，可以试用PNG。而有些矢量图像由于采用了较多滤镜特效也会形成丰富的色彩层次，需要用JPG保存。对页面结构的基本视觉元素，如容器背景、按钮、导航背景等，应尽量用PNG格式，这样才能保证设计品质。而内容元素，如广告Banner、商品图片等质量要求不很苛刻的，可以用JPG以降低文件大小。三、思考与实践1、什么样的设计更适合web页面（1）慎用较“重”的视觉设计元素时代网页设计的一大趋势就是越来越“轻”。除了对那些高光和圆角效果的审美疲劳之外，设计师们也开始意识到好的设计应该是内容与形式的完美结合，而非形式的堆砌。所以设计师在应用那些较“重”的视觉效果时，一定要想清楚这样做的目的和意义，以及是否与产品的特点和受众的气质相契合。“轻量“设计一个比较典型的例子就是国内某知名网站，几乎没有采用任何需要图片的视觉元素，而是通过简单的CSS样式去实现，这样不仅能够突出内容，更能提升页面的访问速度。所以我十分强烈的建议视觉设计师也掌握一定的html和css知识（尤其是CSS3实现了很多过去需要图片才能实现的效果，例如圆角和渐变），这样在做设计的时候能够全面的去考虑产品效果。15^2*3里*% 財EWE欢迎.四爷鼻一豊g*，岫！上口"白書亀&岗卷出Ifi由EJM0B：牴事■旬S旧占上情了帰营片琳幅14相《曾HE*15^2*3里*% 財EWE欢迎.四爷鼻一豊g*，岫！上口"白書亀&岗卷出Ifi由EJM0B：牴事■旬S旧占上情了帰营片琳幅14相《曾HE*轡成我回玄幡trlJWSE夏ETituififbS「厂瑁iff怙希MidBilfll跡濾皿1甫％StI酮SS9健相I时舄明俱希M在，_g，■:蹒IHWEi*■LSiiiii瞰♦J濟州照心济有置的glWU)W*E3|M|国耐iWTi?HHtBZlES—ftStXOAsJfHB?、松l啊珥宗事日?®显史聾虑K1歸W21中 长.下面这个电子商务网站则采用过多无意义的视觉元素堆砌，不仅没有实现很好的设计效果，反而由于需要太多的图片元素而影响了页面的性LK9I也・】 岫M3 WW日整听・》r・】元抢曹■方價洁节・甯貯生話1粮浊*WLK9I也・】 岫M3 WW日整听・》r・】元抢曹■方價洁节・甯貯生話1粮浊*W色，国司司岸■#牛EV15¥15©DtIIS導膏fHPifetafhK写日云□inMLC生担方H間債HKVfti«品獭如果由于产品需要在设计中不得不使用较”重“的视觉元素，我们也可以根据图片格式的特点选择适当的表现形式以达到更好的效果。例如在下面这个例子中，第一个Banner应用了更适合PNG格式的设计风格(较多纯色和简单渐变的应用)不仅能达到热烈、突出的视觉效果，在保证图片质量的同时也更好的压缩了文件大小；而第二个Banner由于应用了过于复杂的渐变色和强烈对比，并且在局部区域采用太多的高光和阴影效果，导致图片的色彩层次过多，不论采用PNG还是JPG格式保存都无法实现图像质量和文件大小的最优化。当然举这个例子并不是要设计师在做设计的时候过分考虑页面性能问题，而是要清楚不同设计形式的效果和实现成本，在设计过程中多问自己为什么要这样做(2)内容和形式的分离对于一些比较强调视觉效果的特殊产品，比如活动推广页面或MiniSite。我们也可以利用图片格式和一些前端知识对设计进行优化，比较常用的一种设计方法就是内容和形式的分离。如下面一些国外比较流行的设计风格，以及前面提到的微博网站，都是通过大幅的背景图去进行意境的传达和气氛的渲染。这样做的一个好处就是能把需要用到图片的视觉元素进行集中的压缩优化，同时乂不会由于

次岫F论5电电也編4屿孥WrDf[就HUHiUwgJiaiWirIaa^呷脚MImu*.时luNbAAJilpr^nmw^uM MamipfogrjmfnngTECHNOLOGIES次岫F论5电电也編4屿孥WrDf[就HUHiUwgJiaiWirIaa^呷脚MImu*.时luNbAAJilpr^nmw^uM MamipfogrjmfnngTECHNOLOGIESWEUSE^flKIjnRtJbif瓦Nianwc.opensmsce-p4-ogr-wrrnmgh^uagevrilfihIocwOnP炊h£ZAA/■MT1".wafc5»rMSq"Y*m$m(就3 G.eD.inTcuch加载太慢而影响用户的访问速度（前端实现时一般会用相近的背景色先进行填充，然后在逐步显示背景图）。I^IPLUgLl$twmlEprcviciu^iijimblindsludlnYt-mf-iMi1n'lltarMs■13yirai:皿』mir-fu^lMliKibcil_hc-pcnadiitfutivLutiil,w血llg M・l111<xir.-id^-：h-isih^ipkHi..1Inn»i^i-a<wi...2X4日>1侦上j■舌厦■-\Viuil!击电-尸中占时11'tajdiiT^4对tip血»jgp—PiullihI吐hljntif^l>,L.ICII■hA■日以乍％.I^ib—IXr.l.!..ImL'*、卩-t iilirkJi^-fsi«.Il£a|Ndjy>jflis L!yr 匚耐―傾IWdav>ifert—Ceieiilkf1前.园Qsign■[!}Rub/onRaiils■onwenswtfimu"EtmofTnollFiEmwhKhFas-rwMmsctiThe袖¥m<£ioMewebappk^lnr^■grmus-aJJ)etiecertlriy如t&日i 16tnMftcRJTkjtafs nwfrefltFl^lro^tH^rr^>gfcfr如心郡gM_5關歴的啓AMfiMWny。■a^trkvxTMg 匸*% egaF〃—EEk卓卩nd题rh相hjiikipEin国■rli/r'Iypo^raphie11^Vritan^nd^iirhHltt'rstfIi-ildi>.-r：,ArtiSkrI-iiu|<■]n^ruridIf^cnsivV«»rxkiindruNd<vLneppfr>cn[爪卩江口ischcnS^dtri卄与？嵐■ikmhMnHl俱标ichimwwcSlw-nT^sla*uf弱Hi眠LlTw^npfeischd-Ei^enlwiti^nMHp司ihdwniSdm，i：韓JiinweitiHiJh?huf^ncUdhi^i^imhlEurTvyngiflivnalshimdiuriBbili口vkh*t£e面*耗前KilianMusterlew!inmmmLini匸丄Em“陌侶［U方旗Mh'f/iitmc）ji叩l」mi广tme■kjuk&ronflact个人认为好的视觉设计最重要是意境传达和气氛渲染，使用高光、阴影等滤镜效果的目的也仅仅是为了达到质感上的统一从而更好的去传达意境和渲染气氛，所以切忌为了质感而质感。即便是为了体现设计品质也不一定非要使用炫丽的滤镜，相较而言优美的布局和精巧的结构才是体现品质的关键！(3)通过较小的视觉牺牲换取较大的性能提升有时候为了提升页面的加载速度达到更好的用户体验，不得不对设计进行优化。这个时候利用我们对图片格式知识掌握就可以更有目的性的去进行优化。例如下图是淘宝“双十一”大促活动的一个页头设计，由于页面访问量非常大并且要使用较多的商品图片，不得不对页头设计进行优化以提升性能。这个时候我们就可以去掉一些不太重要的高光、渐变和阴影效果，从而大大降低文件大小。50%X全场5折！全国包邮！卜平迥弓；:】鴻"冃工 id也試廁喚土MjKflWjaLSBrFJgjiSttJOTTmu島*丑月管日很此一天…丄..iKftJHlK+S-M忧化前：PNGE56KE.ttUffil!E.ttUffil!^LJlLl.BMlfSW-L蚯対t・Jk就£«m1PHI■做E的土黄財*町・旳HWi!彳®ftfl』t¥3!i-X它功哄 皇博曲Mis先豆tt iw屋次胃岫％时・ 50%*全场五折全国包邮

BTFlflSO,鼻8蓉f 虫衬卫卍虻如甘♦口—j#■上f优化启:PNG85.6K2、还可以做些什么(1)Sprite图片二次优化由于目前国内很多互联网公司没有页面重构师这一职位，所以页面切图和静态代码实现基本都是前端工程师去完成。为提高页面性能目前普遍采用的实现方式是将与页面结构相关的需要用到图片的视觉元素集中在一个PNG图片上，然后通过CSS样式将其应用到页面中，我们称这个图片为Sprite图片。由于这个图片上经常要集中较多的视觉元素，在用PNG格式存储时难免会产生失真而影响图片质量。这个时候就需要视觉设计师帮助前端开发工程师对Sprite图片进行优化，这样做的好处是不仅能提升图片质量，还能达到减小文件大小的效果，可谓一举两得。下图是一个优化前的Sprite图片，由于视觉元素过多PNG8无法真实

保存所有的颜色信息，于是便会产生颜色的缺失和杂色的产生(如局部放大图所示)。

在前端工程师完成页面的静态代码之后，视觉设计师可以将定位好的Sprite图片进行像素级的优化，去掉不必要的杂色，并且用已存在的索引色对缺失的地方进行补充，这样不仅能压缩文件大小，还能提升设计品质。确定自动发货我妾比价折,二销星动铠量會信用*价格會价格毋折扣我要购买销量母销量會信用*价格會价格我要购买我要比价自动发货价格宫价格1围格或价格价格寸价格价格舍价格毋确定搜素PNGE大小:在前端工程师完成页面的静态代码之后，视觉设计师可以将定位好的Sprite图片进行像素级的优化，去掉不必要的杂色，并且用已存在的索引色对缺失的地方进行补充，这样不仅能压缩文件大小，还能提升设计品质。确定自动发货我妾比价折,二销星动铠量會信用*价格會价格毋折扣我要购买销量母销量會信用*价格會价格我要购买我要比价自动发货价格宫价格1围格或价格价格寸价格价格舍价格毋确定搜素PNGE大小:155K21自动充值奇奇奇奋奇书自动充值念击奇奇奇PNG8大小:.143K确定销是寻销是 信用折价格心价格驴销量卄铠星甘信用寻价格W价格/确定更客热卖卜更多热卖卜Sprite图片的优化方式有很多种，比如通过索引色排序进行颜色的删减和替换，或是直接通过像素描绘进行优化。设计师可以根据具体的场景进行选择和处理。以上设计和优化的方法只是我在工作中一些经验的积累和总结，个人感觉每一个点展开来都有很多值得研究和讨论的地方，限于篇幅有限不能继续深入。关于图片优化的高级技巧有两篇比较经典的文章推荐给大家：CleverPNGOptimizationTechniques、CleverJPEGOptimizationTechniques。四、附录 Photoshop中各种参数的含义及设置技巧1、PNG8的参数设置FNG-8 ▼诚低舜色深度郭去"葉单一可感知▼颜色：25&日一素引色设置•'仿色算菜单一扩散▼仿色：100%刁—值"透明度"设置一同诿明度杂边：司一"耘"设置“透明度仿色算法“菜单一无谴明賣仿色数堂：3-透明度0福值”交错“遺直一可交諸脸靠色:□%，|一W曲靠色设置(1)减低颜色深度(的算法与颜色)确定生成颜色查找表的算法，以及要在颜色查找表中使用的颜色数。可选算法有：可选择：与”可感知”颜色表类似，但更有利于保存大范围颜色区域和Web色。此颜色表通常生成具有最大颜色完整性的图像。是默认选项。建议：一般情况下默认“可选择”项即可。可感知：以人眼感知颜色优先方式创建自定颜色表。随样性：从图像主要色谱中提取色样创建自定颜色表。例如，某幅只含有绿、蓝色的图像，将产生主要由绿、蓝色构成的颜色表。大多数图像颜色集中在色谱的特定区域。受限(Web):标准的216色颜色表。确保使用8位色显示图像时，不会出现浏览器仿色(也称Web安全调板)。用Web调板可能会产生较大的文件，因此，仅在浏览器仿色是优先考虑因素时，才使用该项。自定：使用用户创建或修改的调色板。可自定颜色查找表。黑白、灰度、MacOS、Windows使用一组调色板。确定应用程序仿色的方法和数量。”仿色”是指模拟计算机显示系统中未提供颜色的方法。较高的仿色百分比可以使图像中出现更多的颜色和细节，但同时也增大文件。要获得最佳压缩比，请用可提供所需颜色细节的最低百分比的仿色。

若图像所含颜色主要是纯色，则不应用仿色也能正常显示。含连续色调（尤其是颜色渐变）的图像，则需要仿色以防止出现颜色条带现象。可选以下几种仿色方法：扩散：使用与“图案”仿色类似的随机图案。仿色效果在相邻像素间扩散。图案：使用类似半调的方形图案来模拟颜色表中没有的颜色。杂色：使用与“扩散”仿色法相似的随机图案，但不在相邻像素扩散图案。使用“杂色”仿色法。不会出现接缝。建议：仅在图片颜色过多且出现失真时，才选择仿色。建议选扩散仿色，以适当调节仿色百分比达到最佳效