資訊專(zhuān)欄INFORMATION COLUMN
摘要：由于采用了無(wú)損壓縮，相比古老的格式，尺寸較小，而且支持透明和動(dòng)畫(huà)。采用無(wú)損壓縮，是基于直接色的位圖格式。正是因?yàn)槠涓咂焚|(zhì)，無(wú)損壓縮，非常適合用于源文件或需要二次編輯的圖片格式的保存。
前言
在大多數(shù)的web頁(yè)面中，圖片占到了頁(yè)面大小的60%-70%。因此在web開(kāi)發(fā)中，不同的場(chǎng)景使用合適的圖片格式對(duì)web頁(yè)面的性能和體驗(yàn)是很重要的。圖片格式種類(lèi)非常多，本文僅針對(duì)幾種web應(yīng)用中常用的圖片格式：gif、png、jpg、webp進(jìn)行一個(gè)基本的總結(jié)。
圖片格式分類(lèi)無(wú)壓縮。無(wú)壓縮的圖片格式不對(duì)圖片數(shù)據(jù)進(jìn)行壓縮處理，能準(zhǔn)確地呈現(xiàn)原圖片。BMP格式就是其中之一。
無(wú)損壓縮。壓縮算法對(duì)圖片的所有的數(shù)據(jù)進(jìn)行編碼壓縮，能在保證圖片的質(zhì)量的同時(shí)降低圖片的尺寸。png是其中的代表。
有損壓縮。壓縮算法不會(huì)對(duì)圖片所有的數(shù)據(jù)進(jìn)行編碼壓縮，而是在壓縮的時(shí)候，去除了人眼無(wú)法識(shí)別的圖片細(xì)節(jié)。因此有損壓縮可以在同等圖片質(zhì)量的情況下大幅降低圖片的尺寸。其中的代表是jpg。
gif采用LZW壓縮算法進(jìn)行編碼，是一種無(wú)損的基于索引色的圖片格式。由于采用了無(wú)損壓縮，相比古老的bmp格式，尺寸較小，而且支持透明和動(dòng)畫(huà)。缺點(diǎn)是由于gif只存儲(chǔ)8位索引（也就是最多能表達(dá)2^8=256種顏色），色彩復(fù)雜、細(xì)節(jié)豐富的圖片不適合保存為gif格式。色彩簡(jiǎn)單的logo、icon、線框圖適合采用gif格式。
jpgjpg是一種有損的基于直接色的圖片格式。由于采用直接色，jpg可使用的顏色有1600w之多（2^24），而人眼識(shí)別的顏色數(shù)量大約只有1w多種，因此jpg非常適合色彩豐富圖片、漸變色。jpg有損壓縮移除肉眼無(wú)法識(shí)別的圖片細(xì)節(jié)后，可以將圖片的尺寸大幅度地減小。
但是jpg不適合icon、logo，因?yàn)橄啾萭if/png-8，它在文件大小上絲毫沒(méi)有優(yōu)勢(shì)。
png-8png-8采用無(wú)損壓縮，是基于8位索引色的位圖格式。png-8相比gif對(duì)透明的支持更好，同等質(zhì)量下，尺寸也更小。非常適合作為gif的替代品。但png-8也一個(gè)明顯的不足就是不支持動(dòng)畫(huà)。這也是png-8沒(méi)辦法完全替代gif的重要原因。如果沒(méi)有動(dòng)畫(huà)需求推薦使用png-8來(lái)替代gif。
png-24png-24采用無(wú)損壓縮，是基于直接色的位圖格式。png-24的圖片質(zhì)量堪比bmp，但是卻有bmp不具備的尺寸優(yōu)勢(shì)。當(dāng)然相比于jpg，gif，png-8，尺寸上還是要大。正是因?yàn)槠涓咂焚|(zhì)，無(wú)損壓縮，非常適合用于源文件或需要二次編輯的圖片格式的保存。
png-24與jpg一樣能表達(dá)豐富的圖片細(xì)節(jié)，但并不能替代jpg。圖片存儲(chǔ)為png-24比存儲(chǔ)為jpg，文件大小至少是jpg的5倍，但在圖片品質(zhì)上的提升卻微乎其微。所以除非對(duì)品質(zhì)的要求極高，否則色彩豐富的網(wǎng)絡(luò)圖片還是推薦使用jpg。
png-24與png-8一樣也支持透明。
webpWebP圖片是一種新的圖像格式，由Google開(kāi)發(fā)。與png、jpg相比，相同的視覺(jué)體驗(yàn)下，WebP圖像的尺寸縮小了大約30％。另外，WebP圖像格式還支持有損壓縮、無(wú)損壓縮、透明和動(dòng)畫(huà)。理論上完全可以替代png、jpg、gif等圖片格式，當(dāng)然目前webp的還沒(méi)有得到全面的支持。
看一下png圖片與webp圖片的對(duì)比：
詳見(jiàn)png VS webp。
再看一下webp的兼容性：
可以看到webp格式的支持度還不是很好，但是移動(dòng)端的支持整體還可以。
結(jié)合以上的介紹，我們了解了各種圖片格式的優(yōu)缺點(diǎn)及適用場(chǎng)景，我們?cè)賮?lái)通過(guò)一個(gè)圖表來(lái)做一個(gè)抽象總結(jié)：
| 格式 | 優(yōu)點(diǎn) | 缺點(diǎn) | 適用場(chǎng)景 |
|---|---|---|---|
| gif | 文件小，支持動(dòng)畫(huà)、透明，無(wú)兼容性問(wèn)題 | 只支持256種顏色 | 色彩簡(jiǎn)單的logo、icon、動(dòng)圖 |
| jpg | 色彩豐富，文件小 | 有損壓縮，反復(fù)保存圖片質(zhì)量下降明顯 | 色彩豐富的圖片/漸變圖像 |
| png | 無(wú)損壓縮，支持透明，簡(jiǎn)單圖片尺寸小 | 不支持動(dòng)畫(huà)，色彩豐富的圖片尺寸大 | logo/icon/透明圖 |
| webp | 文件小，支持有損和無(wú)損壓縮，支持動(dòng)畫(huà)、透明 | 瀏覽器兼容性不好 | 支持webp格式的app和webview |
最后附上Google關(guān)于圖片格式的選擇指南：
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51957.html
摘要：由于采用了無(wú)損壓縮，相比古老的格式，尺寸較小，而且支持透明和動(dòng)畫(huà)。采用無(wú)損壓縮，是基于直接色的位圖格式。正是因?yàn)槠涓咂焚|(zhì)，無(wú)損壓縮，非常適合用于源文件或需要二次編輯的圖片格式的保存。 前言 在大多數(shù)的web頁(yè)面中，圖片占到了頁(yè)面大小的60%-70%。因此在web開(kāi)發(fā)中，不同的場(chǎng)景使用合適的圖片格式對(duì)web頁(yè)面的性能和體驗(yàn)是很重要的。圖片格式種類(lèi)非常多，本文僅針對(duì)幾種web應(yīng)用中常用的圖...
摘要：由于采用了無(wú)損壓縮，相比古老的格式，尺寸較小，而且支持透明和動(dòng)畫(huà)。采用無(wú)損壓縮，是基于直接色的位圖格式。正是因?yàn)槠涓咂焚|(zhì)，無(wú)損壓縮，非常適合用于源文件或需要二次編輯的圖片格式的保存。 前言 在大多數(shù)的web頁(yè)面中，圖片占到了頁(yè)面大小的60%-70%。因此在web開(kāi)發(fā)中，不同的場(chǎng)景使用合適的圖片格式對(duì)web頁(yè)面的性能和體驗(yàn)是很重要的。圖片格式種類(lèi)非常多，本文僅針對(duì)幾種web應(yīng)用中常用的圖...
PngPNG包括png-8和png-24 png-32 相對(duì)來(lái)說(shuō)體積小；支持透明 24（160W）比8（256） 像素 色塊 色彩 要多很多 8位保存的時(shí)候會(huì)有鋸齒邊緣 24位是透明邊緣 24位PNG，支持160萬(wàn)種不同的像素顏色且支持Alpha透明效果，這就意味著，無(wú)論透明度設(shè)置為多少，PNG圖片均能夠與背景很好的融合在一起。 JpgJPG能顯示的顏色比gif和png要多的多；同時(shí)能得到很好...
PngPNG包括png-8和png-24 png-32 相對(duì)來(lái)說(shuō)體積??；支持透明 24（160W）比8（256） 像素 色塊 色彩 要多很多 8位保存的時(shí)候會(huì)有鋸齒邊緣 24位是透明邊緣 24位PNG，支持160萬(wàn)種不同的像素顏色且支持Alpha透明效果，這就意味著，無(wú)論透明度設(shè)置為多少，PNG圖片均能夠與背景很好的融合在一起。 JpgJPG能顯示的顏色比gif和png要多的多；同時(shí)能得到很好...
PngPNG包括png-8和png-24 png-32 相對(duì)來(lái)說(shuō)體積??；支持透明 24（160W）比8（256） 像素 色塊 色彩 要多很多 8位保存的時(shí)候會(huì)有鋸齒邊緣 24位是透明邊緣 24位PNG，支持160萬(wàn)種不同的像素顏色且支持Alpha透明效果，這就意味著，無(wú)論透明度設(shè)置為多少，PNG圖片均能夠與背景很好的融合在一起。 JpgJPG能顯示的顏色比gif和png要多的多；同時(shí)能得到很好...
閱讀 3549·2023-04-25 17:35
閱讀 2620·2021-11-24 09:39
閱讀 2557·2021-10-18 13:32
閱讀 3444·2021-10-11 10:58
閱讀 1665·2021-09-26 09:55
閱讀 6241·2021-09-22 15:47
閱讀 995·2021-08-26 14:15
閱讀 3496·2019-08-30 15:55
