前言
前端常用的圖片格式：JPG商源、PNG寂诱、GIF癣缅、WEBP栈戳、APNG等等岂傲。
主要圖片格式背景以及信息
JPEG（Joint Photographic Experts Group）聯(lián)合圖像專家組
成立于1986年，該標(biāo)準(zhǔn)于1992年正式通過子檀，在JPEG中主要包含4中模式：
無損壓縮編碼模式
基于DCT的順序編碼模式
基于DCT的累進(jìn)編碼模式
基于DCT的分層編碼模式镊掖。
針對(duì)JPEG的大火，應(yīng)用領(lǐng)域越來越廣褂痰，為了增加壓縮比亩进，有出現(xiàn)了JPEG2000標(biāo)準(zhǔn)，此標(biāo)準(zhǔn)完全拋棄了DCT（離散余弦變換）缩歪，而采用了離散小波變換归薛。
離散余弦變換：是以區(qū)塊編碼為主的方式，將圖片壓縮成8x8的小塊存儲(chǔ)到文件中匪蝙，所以圖片在加載時(shí)主籍，會(huì)一行一行的刷新。
離散小波變換：是以多解析編碼方式逛球，主要將影響頻率成分抽取出來千元，將圖片作為整體變換和編碼，所以圖片在加載時(shí)需忿，會(huì)直接展示模糊的圖片輪廓诅炉，然后逐漸變清晰。
GIF（Graphics Interchange Format）圖形交換格式
1987年由Compu Serve公司發(fā)展起來屋厘，為了填補(bǔ)跨平臺(tái)圖像格式涕烧。GIF是一種位圖，即每個(gè)像素填充一種顏色汗洒，最多支持256種顏色议纯。GIF采用的是LZW（Lempel-Zev-Welch）壓縮算法，比較適合色彩較少的場(chǎng)景溢谤，對(duì)于一些復(fù)雜顏色的場(chǎng)景GIF的表現(xiàn)力就比較有限瞻凤。GIF通常會(huì)自帶一個(gè)調(diào)色板憨攒，存放需要使用的顏色，所以壓縮時(shí)阀参，我們要減少圖像使用的顏色肝集。
GIF包含2個(gè)版本：GIF87a和GIF89a
- GIF87a: 1987年推出，允許存儲(chǔ)一個(gè)圖像蛛壳，嚴(yán)格不支持透明像素杏瞻，，采用LZW壓縮算法衙荐，保證圖像質(zhì)量的前提下捞挥，能壓縮20%-25%
- GIF89a：1989年推出，允許一個(gè)文件存儲(chǔ)多個(gè)圖像忧吟，可實(shí)現(xiàn)動(dòng)畫功能砌函，允許某些像素透明（我們常見的gif圖）
PNG（Portable Network Graphics）
1995年，因GIF的LZW數(shù)據(jù)壓縮算法的軟件專利開始收費(fèi)溜族，為避免影響讹俊，誕生了PNG，1999年unisys公司進(jìn)一步中止了GIF的專利免費(fèi)許可斩祭，讓PNG才開始獲得更多關(guān)注劣像，所以業(yè)內(nèi)瀏覽器很晚才開始支持PNG，IE在7.0才正式支持PNG格式的摧玫。（開發(fā)過IE6的同學(xué)一定很痛苦）
無損壓縮：采用了LZ77算法的派生算法進(jìn)行壓縮，他利用特殊編碼方式標(biāo)記重復(fù)出現(xiàn)的數(shù)據(jù)绑青，因此對(duì)圖像顏色沒有影響诬像。
索引彩色模式： PNG-8格式與GIF圖像類似，同樣采用8位調(diào)色板將RGB彩色圖像轉(zhuǎn)換為索引彩色圖像闸婴，圖像中保存的不再是各個(gè)像素的彩色信息坏挠，而是從圖像中挑選出來的具有代表性的顏色標(biāo)號(hào)， 沒一個(gè)標(biāo)號(hào)對(duì)應(yīng)一種顏色邪乍，圖像數(shù)據(jù)量也因此減少降狠。
更優(yōu)化的網(wǎng)絡(luò)傳輸：PNG圖像采用流式瀏覽，所以在圖片下載前庇楞，可以提供給瀏覽者一個(gè)基本圖像內(nèi)容榜配，然后慢慢清晰起來。
支持透明效果：PNG可以為原圖像定義256個(gè)透明層次吕晌，使得彩色圖像邊緣能與任何背景平滑融合蛋褥，從而消除鋸齒邊緣。
WebP (WebM文件里單個(gè)被壓縮的幀)
WebP的文件格式來源于Google的VP8視頻編解碼（WebM）睛驳，VP8編解碼最大特性是幀內(nèi)預(yù)測(cè)壓縮烙心，也就是視頻的每一幀都被壓縮膜廊，后續(xù)幀與幀之間也會(huì)被壓縮。
WebP的名稱由來：WebM文件里單個(gè)被壓縮的幀淫茵。
自從2011年發(fā)布以來爪瓜，webP作為一個(gè)獨(dú)特文件類型做了很多升級(jí)與改變铆铆，例如支持透明度算灸、無損模式、動(dòng)畫支持等驻啤。
2013年支持了動(dòng)態(tài)WebP菲驴。
接下來我們來深入了解一下為什么有損WebP（lossy WebP）的壓縮能力如此之強(qiáng)吧。
WebP的壓縮的原理
第一步：宏塊
與JPG相同的時(shí)骑冗，WebP也采用宏塊進(jìn)行壓縮赊瞬，典型的宏塊由一個(gè) 16×16 的亮度像素(luma pixel)塊和兩個(gè) 8×8 的色度像素(chroma pixel)塊組成。分塊越小贼涩，預(yù)測(cè)越準(zhǔn)巧涧，需要記錄的信息也越多谤绳，一版來說，細(xì)節(jié)月豐富的地方袒哥，分塊越細(xì)缩筛。相對(duì)不豐富的地方使用16x16分塊。
第二步：預(yù)測(cè)
WebP最大的不同之處在于每個(gè)4x4的宏塊中都有一個(gè)預(yù)測(cè)模型堡称。（又名：過濾）桐臊，PNG過濾用的比較多，它對(duì)每一行做同樣的事晓殊，WebP過濾是針對(duì)每一個(gè)塊断凶。
VP8幀內(nèi)預(yù)測(cè)常用的三種宏塊：
4x4 亮度像素塊
16x16 亮度像素塊
8x8 色度像素塊
編碼器會(huì)將它們放在一個(gè)4x4的測(cè)試像素塊填滿，并確定哪一個(gè)生成了最接近原始?jí)K的值挺物。這些用不同方法填滿的塊叫做”預(yù)測(cè)塊”懒浮。
主要使用的預(yù)測(cè)方式有以下4種：
H_PRED（Horiz prediction-水平預(yù)測(cè))——像素塊中每一列使用左邊一列（col L）的數(shù)據(jù)填充
V_PRED (vertical prediction-垂直預(yù)測(cè))——像素塊中每一行使用其上邊一行（row A）的數(shù)據(jù)填充
DC_PRED (DC prediction - DC 預(yù)測(cè))——像素塊中每個(gè)單元使用 row A 和 col L 的所有像素的平均值填充。
True Motion (TrueMotion 預(yù)測(cè))——一種超級(jí)先進(jìn)的模式，我沒找到原理砚著，暫時(shí)還不懂次伶。
對(duì)于4x4的亮度塊，會(huì)有6種額外預(yù)測(cè)模式稽穆，類似于垂直預(yù)測(cè)與水平預(yù)測(cè)方式冠王，他們可以從不同的方向去填充剩余色塊。
第三步：DCT（離散余弦變換）
將預(yù)測(cè)部分的原圖數(shù)據(jù)減去預(yù)測(cè)出來的數(shù)據(jù)舌镶，得到差值矩陣柱彻，最后對(duì)差值進(jìn)行DCT。此步驟會(huì)生成一個(gè)頻率系數(shù)矩陣餐胀，坐上的系數(shù)幅度最大哟楷，右下的最小，幅度值越小否灾，頻率越高卖擅。大部分圖片信息都在左上區(qū)域，這一步的作用就是朱熬出圖片的高頻區(qū)域和低頻區(qū)域墨技。
第四步：量化
人眼對(duì)高頻部分不敏感惩阶，這一步會(huì)將高頻部分舍去。對(duì)上一步的頻率系數(shù)表和量化表進(jìn)行計(jì)算扣汪，將頻率系數(shù)表和量化表按位相除断楷，并四舍五入整數(shù)位，最終生成一個(gè)量化矩陣崭别。
第五步：算法編碼
WebP不同于JPEG冬筒，也可以說由于JPEG壓縮的地方在于，WebP采用了算法編碼壓縮（Arithmetic encoding）茅主，JPEG采用的是霍夫曼編碼（Huffman encoding）账千，算法編碼提供了優(yōu)于霍夫曼編碼5%-10%的壓縮率。
總結(jié)
WebP的壓縮優(yōu)于其他圖片暗膜，主要得益于起繼承自VP8的幀內(nèi)預(yù)測(cè)技術(shù)，相比于JPEG對(duì)圖像原值進(jìn)行編碼來說鞭衩，WebP編碼的是預(yù)測(cè)值和原值的差值学搜，這也是WebP體積更小的主要原因，最后论衍，WebP使用了更優(yōu)秀的算法編碼瑞佩。
這個(gè)WebP的壓縮過程用，一張圖可以囊括表述：
當(dāng)然以上主要是針對(duì)WebP的有損壓縮（lossy WebP）來進(jìn)行的原理講解坯台，無損壓縮的邏輯與其完全不同炬丸，不過我們提高性能，主要也是采用的有損WebP。
希望以上內(nèi)容稠炬，對(duì)大家了解WebP的原理有一定的幫助焕阿，能讓大家更好的去使用WebP。
