一、主流的圖片格式

1、JPEG

目前最常見(jiàn)的圖片格式，它誕生于 1992 年，是一個(gè)很古老的格式。它只支持有損壓縮，其壓縮算法可以精確控制壓縮比，以圖像質(zhì)量換得存儲(chǔ)空間。由于它太過(guò)常見(jiàn)，以至于許多移動(dòng)設(shè)備的 CPU 都支持針對(duì)它的硬編碼與硬解碼。

2、PNG

誕生在 1995 年，比 JPEG 晚幾年。它本身的設(shè)計(jì)目的是替代 GIF 格式，所以它與 GIF 有更多相似的地方。PNG 只支持無(wú)損壓縮，所以它的壓縮比是有上限的。相對(duì)于 JPEG 和 GIF 來(lái)說(shuō)，它最大的優(yōu)勢(shì)在于支持完整的透明通道。

3、GIF

誕生于 1987 年，隨著初代互聯(lián)網(wǎng)流行開(kāi)來(lái)。它有很多缺點(diǎn)，比如通常情況下只支持 256 種顏色、透明通道只有 1 bit、文件壓縮比不高。它唯一的優(yōu)勢(shì)就是支持多幀動(dòng)畫(huà)，憑借這個(gè)特性，它得以從 Windows 1.0 時(shí)代流行至今，而且仍然大受歡迎。

在上面這些圖片格式誕生后，也有不少公司或團(tuán)體嘗試對(duì)他們進(jìn)行改進(jìn)，或者創(chuàng)造其他更加優(yōu)秀的圖片格式，比如 JPEG 小組的 JPEG 2000、微軟的 JPEG-XR、Google 的 WebP、個(gè)人開(kāi)發(fā)者發(fā)布的 BPG、FLIF 等。它們相對(duì)于老牌的那幾個(gè)圖片格式來(lái)說(shuō)有了很大的進(jìn)步，但出于各種各樣的原因，只有少數(shù)幾個(gè)格式能夠流行開(kāi)來(lái)。下面三種就是目前實(shí)力比較強(qiáng)的新興格式了：

4、APNG

Mozilla 在 2008 年發(fā)布的一種圖片格式，旨在替換掉畫(huà)質(zhì)低劣的 GIF 動(dòng)畫(huà)。它實(shí)際上只是相當(dāng)于 PNG 格式的一個(gè)擴(kuò)展，所以 Mozilla 一直想把它合并到 PNG 標(biāo)準(zhǔn)里面去。然而 PNG 開(kāi)發(fā)組并沒(méi)有接受 APNG 這個(gè)擴(kuò)展，而是一直在推進(jìn)它自己的 MNG 動(dòng)圖格式。MNG 格式過(guò)于復(fù)雜以至于并沒(méi)有什么系統(tǒng)或?yàn)g覽器支持，而 APNG 格式由于簡(jiǎn)單容易實(shí)現(xiàn)，目前已經(jīng)漸漸流行開(kāi)來(lái)。Mozilla 自己的 Firefox 首先支持了 APNG，隨后蘋果的 Safari 也開(kāi)始有了支持， Chrome 目前也已經(jīng)嘗試開(kāi)始支持 ，可以說(shuō)未來(lái)前景很好。

5、WebP

Google 在 2010 年發(fā)布的圖片格式，希望以更高的壓縮比替代 JPEG。它用 VP8 視頻幀內(nèi)編碼作為其算法基礎(chǔ)，取得了不錯(cuò)的壓縮效果。它支持有損和無(wú)損壓縮、支持完整的透明通道、也支持多幀動(dòng)畫(huà)，并且沒(méi)有版權(quán)問(wèn)題，是一種非常理想的圖片格式。借由 Google 在網(wǎng)絡(luò)世界的影響力，WebP 在幾年的時(shí)間內(nèi)已經(jīng)得到了廣泛的應(yīng)用。

5、BPG

著名程序員 Fabrice Bellard 在去年 (2014年) 發(fā)布的一款超高壓縮比的圖片格式。BPG 使用 HEVC (即 H.265) 幀內(nèi)編碼作為其算法基礎(chǔ)，就這點(diǎn)而言，它毋庸置疑是當(dāng)下最為先進(jìn)的圖片壓縮格式。相對(duì)于 JP2、JPEG-XR、WebP 來(lái)說(shuō)，同等體積下 BPG 能提供更高的圖像質(zhì)量。另外，得益于它本身基于視頻編碼算法的特性，它能以非常小的文件體積保存多幀動(dòng)畫(huà)。目前阻礙它流行的原因就是 HEVC 的版權(quán)問(wèn)題和它較長(zhǎng)的編碼解碼時(shí)間。

二、iOS支持介紹

iOS 底層是用 ImageIO.framework 實(shí)現(xiàn)的圖片編解碼。目前 iOS 原生支持的格式有：JPEG、JPEG2000、PNG、GIF、BMP、ICO、TIFF、PICT，自 iOS 8.0 起，ImageIO 又加入了 APNG、SVG、RAW 格式的支持。在上層，開(kāi)發(fā)者可以直接調(diào)用 ImageIO 對(duì)上面這些圖片格式進(jìn)行編碼和解碼。對(duì)于動(dòng)圖來(lái)說(shuō)，開(kāi)發(fā)者可以解碼動(dòng)畫(huà) GIF 和 APNG、可以編碼動(dòng)畫(huà) GIF。

三、靜態(tài)圖片的編碼與解碼

1、JPEG

目前比較知名的 JPEG 庫(kù)有以下三個(gè)：

1）libjpeg：開(kāi)發(fā)時(shí)間最早，使用最廣泛的 JPEG 庫(kù)。由于 JPEG 標(biāo)準(zhǔn)過(guò)于復(fù)雜和模糊，并沒(méi)有其他人去實(shí)現(xiàn)，所以這個(gè)庫(kù)是 JPEG 的事實(shí)標(biāo)準(zhǔn)；

2）libjpeg-turbo：一個(gè)致力于提升編解碼速度的 JPEG 庫(kù)。它基于 libjpeg 進(jìn)行了改造，用 SIMD 指令集 (MMX、SSE2、NEON) 重寫(xiě)了部分代碼，官網(wǎng)稱相對(duì)于 libjpeg 有 2 到 4 倍的性能提升；

3）MozJPEG： 一個(gè)致力于提升壓縮比的 JPEG 庫(kù)。它是 Mozilla 在 2014 年發(fā)布的基于 libjpeg-turbo 進(jìn)行改造的庫(kù)，相對(duì)于 libjpeg 有 5% ~ 15% 的壓縮比提升，但相應(yīng)的其編碼速度也慢了很多。

除了上面這三個(gè)庫(kù)，蘋果自己也開(kāi)發(fā)了一個(gè) AppleJPEG，但并沒(méi)有開(kāi)源。其調(diào)用了芯片提供的 DSP 硬編碼和硬解碼的功能。雖然它不如上面這三個(gè)庫(kù)功能完善，但其性能非常高。在我的測(cè)試中，其編解碼速度通常是 libjpeg-turbo 的 1~2 倍。可惜的是，目前開(kāi)發(fā)者并不能直接訪問(wèn)這個(gè)庫(kù)。

JPEG 編碼中 quality 越小，圖片體積就越小，質(zhì)量越也差，編碼時(shí)間也越短。解碼時(shí)間并沒(méi)有很大的差距，可能是其大部分時(shí)間消耗在了函數(shù)調(diào)用、硬件調(diào)用上。蘋果在自己的相冊(cè) Demo 中提供的 quality 的默認(rèn)值是 0.9，在這個(gè)值附近，圖像質(zhì)量和體積、編碼解碼時(shí)間之間都能取得不錯(cuò)的平衡。

2、PNG

相對(duì)于 JPEG 來(lái)說(shuō)，PNG 標(biāo)準(zhǔn)更為清晰和簡(jiǎn)單，因此有很多公司或個(gè)人都有自己的 PNG 編碼解碼實(shí)現(xiàn)。但目前使用最廣的還是 PNG 官方發(fā)布的 libpng 庫(kù)。iOS 和 Android 底層都是調(diào)用這個(gè)庫(kù)實(shí)現(xiàn)的 PNG 編解碼。

在編解碼圖形類型（顏色少、細(xì)節(jié)少）的圖片時(shí)，PNG 和 JPEG 差距并不大；但是對(duì)于照片類型（顏色和細(xì)節(jié)豐富）的圖片來(lái)說(shuō)，PNG 在文件體積、編解碼速度上都差 JPEG 不少了。

和 JPEG 不同，PNG 是無(wú)損壓縮，其并不能提供壓縮比的選項(xiàng)，其壓縮比是有上限的。目前網(wǎng)上有很多針對(duì) PNG 進(jìn)行優(yōu)化的工具和服務(wù)，旨在提升 PNG 的壓縮比。

pngcrush 是 Xcode 自帶的 PNG 壓縮工具，相對(duì)于設(shè)計(jì)師用 Photoshop 生成的圖片來(lái)說(shuō)，它能取得不錯(cuò)的壓縮效果。ImageOptim 則更進(jìn)一步，對(duì)每張圖用多種縮算法進(jìn)行比對(duì)，選擇壓縮比更高的結(jié)果，進(jìn)一步縮小了文件體積。TinyPNG.com 相對(duì)于其他工具來(lái)說(shuō)，壓縮比高得不像話。它啟用了類似 GIF 那樣的顏色索引表對(duì) PNG 進(jìn)行壓縮，所以會(huì)導(dǎo)致顏色豐富的圖片丟失掉一部分細(xì)節(jié)。如果使用 TinyPNG 的話，最好在壓縮完成后讓設(shè)計(jì)師看一下顏色效果是否可以接受。

3、WebP

WebP 標(biāo)準(zhǔn)是 Google 定制的，迄今為止也只有 Google 發(fā)布的 libwebp 實(shí)現(xiàn)了該的編解碼 。 所以這個(gè)庫(kù)也是該格式的事實(shí)標(biāo)準(zhǔn)。

4、BPG

BPG 是目前已知最優(yōu)秀的有損壓縮格式了，它能在相同質(zhì)量下比 JPEG 減少 50% 的體積。

BPG 目前只有作者發(fā)布的 libbpg 可用。但作者基于 libbpg 編譯出了一個(gè) Javascript 解碼器，很大的擴(kuò)展了可用范圍。bpg 可以以無(wú)損和有損壓縮兩種方式進(jìn)行編碼，有損壓縮時(shí)可以用 quality 參數(shù)控制壓縮比，可選范圍為 0～51，數(shù)值越大壓縮比越高。通常來(lái)說(shuō)，25 附近是一個(gè)不錯(cuò)的選擇，BPG 官方工具默認(rèn)值是 28。

libbpg 目前并沒(méi)有針對(duì) ARM NEON 做優(yōu)化，所以其在移動(dòng)端的性能表現(xiàn)一般。

四、動(dòng)態(tài)圖片的編碼與解碼

動(dòng)圖在網(wǎng)絡(luò)上非常受歡迎，它近似視頻，但通常實(shí)現(xiàn)簡(jiǎn)單、文件體積小，應(yīng)用范圍非常廣泛。動(dòng)圖的始祖是 GIF，它自 Windows 1.0 時(shí)代就在互聯(lián)網(wǎng)上流行開(kāi)來(lái)，直到今天仍然難以被其他格式取代。盡管它非常古老，但其所用的原理和今天幾種新興格式幾乎一樣。

大部分內(nèi)容是相近的，為了壓縮文件體積，通常動(dòng)圖格式都支持一些特殊的方式對(duì)相似圖片進(jìn)行裁剪，只保留前后幀不同的部分。

在解碼動(dòng)圖時(shí)，解碼器通常采用所謂“畫(huà)布模式”進(jìn)行渲染。想象一下：播放的區(qū)域是一張畫(huà)布，第一幀播放前先把畫(huà)布清空，然后完整的繪制上第一幀圖；播放第二幀時(shí)，不再清空畫(huà)布，而是只把和第一幀不同的區(qū)域覆蓋到畫(huà)布上，就像油畫(huà)的創(chuàng)作那樣。

像這樣的第一幀就被稱為關(guān)鍵幀（即 I 幀，幀內(nèi)編碼幀），而后續(xù)的那些通過(guò)補(bǔ)償計(jì)算得到的幀被稱為預(yù)測(cè)編碼幀（P幀）。一個(gè)壓縮的比較好的動(dòng)圖內(nèi)，通常只有少量的關(guān)鍵幀，而其余都是預(yù)測(cè)編碼幀；一個(gè)較差的壓縮工具制作的動(dòng)圖內(nèi)，則基本都是關(guān)鍵幀。不同的動(dòng)圖壓縮工具通常能得到不同的結(jié)果。

1、GIF

GIF 缺陷非常明顯：

它通常只支持 256 色索引顏色，這導(dǎo)致它只能通過(guò)抖動(dòng)、差值等方式模擬較多豐富的顏色；

它的 Alpha 通道只有 1 bit，這意味著一個(gè)像素只能是完全透明或者完全不透明。

2、APNG

APNG 目前并沒(méi)有被 PNG 官方所接受，所以 libpng 并不能直接解碼 APNG。但由于 APNG 只是基于 PNG 的一個(gè)簡(jiǎn)單擴(kuò)展，所以在已經(jīng)支持 PNG 的平臺(tái)上，可以很輕松的用少量代碼實(shí)現(xiàn) APNG 的編解碼。

3、WebP

WebP 在 2010 年 發(fā)布時(shí)并沒(méi)有支持動(dòng)圖。2012 年 libwebp v0.2 的時(shí)候，Google 才開(kāi)始嘗試支持動(dòng)畫(huà)，但其實(shí)現(xiàn)有很多問(wèn)題，性能也非常差，以至于 Chrome 團(tuán)隊(duì)一直都沒(méi)有接受。直到 2013 年，libwebp v0.4 時(shí)，動(dòng)畫(huà)格式才穩(wěn)定下來(lái)才被 Chrome 所接受。

WebP 動(dòng)圖實(shí)際上是把多個(gè)單幀 WebP 數(shù)據(jù)簡(jiǎn)單打包到一個(gè)文件內(nèi)，而并不是由單幀 WebP 擴(kuò)展而來(lái)，以至于動(dòng)圖格式并不能向上兼容靜態(tài)圖。如果要支持動(dòng)圖，首先在編譯 libwebp 時(shí)需要加上 demux 模塊，解碼 WebP 時(shí)需要先用 WebPDemuxer 嘗試拆包，之后再把拆出來(lái)的單幀用 WebPDecode 解碼。

4、BPG

BPG 本身是基于 HEVC (H.265) 視頻編碼的，其最開(kāi)始設(shè)計(jì)時(shí)就考慮到了動(dòng)圖的實(shí)現(xiàn)。由于它充分利用了 HEVC 的高壓縮比和視頻編碼的特性，其動(dòng)圖壓縮比遠(yuǎn)超其他格式。

五、動(dòng)圖性能對(duì)比

APNG 在文件體積上比 GIF 略有優(yōu)勢(shì)，解碼時(shí)間相差不多。WebP 在體積和解碼時(shí)間上都具有較大的優(yōu)勢(shì)。BPG 在體積上優(yōu)勢(shì)最大，但解碼時(shí)間也最長(zhǎng)。這么看來(lái)，APNG 和 WebP 都是不錯(cuò)的選擇，而 BPG 還有待性能優(yōu)化。

處于學(xué)習(xí)目的，本文非原創(chuàng)，出自于《全面掌握移動(dòng)端主流圖片格式的特點(diǎn)、性能、調(diào)優(yōu)等》