前端規(guī)范 圖片格式

圖片格式

常見的圖片格式有 GIF、PNG8、PNG24、JPEG、WEBP，根據(jù)圖片格式的特性和場景需要選取適合的圖片格式。

GIF

GIF 圖象是基于顏色列表的（存儲(chǔ)的數(shù)據(jù)是該點(diǎn)的顏色對應(yīng)于顏色列表的索引值），最多只支持 8位（ 256色）。GIF 文件內(nèi)部分成許多存儲(chǔ)塊，用來存儲(chǔ)多幅圖象或者是決定圖象表現(xiàn)行為的控制塊，用以實(shí)現(xiàn)動(dòng)畫和交互式應(yīng)用。GIF 文件還通過 LZW 壓縮算法壓縮圖象數(shù)據(jù)來減少圖象尺寸

特性

• 優(yōu)秀的壓縮算法使其在一定程度上保證圖像質(zhì)量的同時(shí)將體積變得很小。
• 可插入多幀，從而實(shí)現(xiàn)動(dòng)畫效果。
• 可設(shè)置透明色以產(chǎn)生對象浮現(xiàn)于背景之上的效果。
• 由于采用了 8位壓縮，最多只能處理 256種顏色，故不宜應(yīng)用于真彩色圖片。

更多關(guān)于GIF：

維基百科 - GIF

GIF文檔

PNG

PNG 是 20世紀(jì) 90年代中期開始開發(fā)的圖像文件存儲(chǔ)格式，其目的是企圖替代 GIF 和 TIFF 文件格式，同時(shí)增加一些 GIF 文件格式所不具備的特性。流式網(wǎng)絡(luò)圖形格式(Portable Network Graphic Format，PNG)名稱來源于非官方的“PNG’s Not GIF”，是一種位圖文件(bitmap file)存儲(chǔ)格式，讀成“ping”。PNG 用來存儲(chǔ)灰度圖像時(shí)，灰度圖像的深度可多到 16位，存儲(chǔ)彩色圖像時(shí)，彩色圖像的深度可多到 48位，并且還可存儲(chǔ)多到 16位的 α 通道數(shù)據(jù)。PNG 使用從 LZ77 派生的無損數(shù)據(jù)壓縮算法。

特性

• 支持 256色調(diào)色板技術(shù)，文件體積小。
• 無損壓縮
• 最高支持 48位真彩色圖像以及 16位灰度圖像。
• 支持 Alpha通道的透明/半透明特性。
• 支持圖像亮度的 Gamma 校準(zhǔn)信息。
• 支持存儲(chǔ)附加文本信息，以保留圖像名稱、作者、版權(quán)、創(chuàng)作時(shí)間、注釋等信息。
• 漸近顯示和流式讀寫，適合在網(wǎng)絡(luò)傳輸中快速顯示預(yù)覽效果后再展示全貌。
• 使用 CRC 防止文件出錯(cuò)。
• 最新的 PNG 標(biāo)準(zhǔn)允許在一個(gè)文件內(nèi)存儲(chǔ)多幅圖像。

更多關(guān)于 PNG：

PNG官方站 - PNG General Information

PNG格式

維基百科 - PNG

JPEG

JPEG 是一種針對照片視頻而廣泛使用的一種有損壓縮標(biāo)準(zhǔn)方法。這個(gè)名稱代表 Joint Photographic Experts Group（聯(lián)合圖像專家小組）。此團(tuán)隊(duì)創(chuàng)立于公元 1986年，1992年發(fā)布了 JPEG 的標(biāo)準(zhǔn)而在 1994年獲得了 ISO 10918-1 的認(rèn)定

特性

• 適用于儲(chǔ)存 24位元全采影像
• 采取的壓縮方式通常為有損壓縮
• 不支持透明或動(dòng)畫
• 壓縮比越高影像耗損越大，失真越嚴(yán)重
• 壓縮比在 10 左右肉眼無法辨出壓縮圖與原圖的差別

更多關(guān)于 JPEG：

維基百科 - JPEG

WEBP

WebP，是一種同時(shí)提供了有損壓縮與無損壓縮的圖片文件格式，派生自視頻編碼格式 VP8，是由 Google 在購買 On2 Technologies后發(fā)展出來。WebP 最初在 2010年發(fā)布，2011年11月8日，Google 開始讓 WebP 支持無損壓縮和透明色的功能，而在 2012年8月16日的參考實(shí)做 libwebp 0.2.0 中正式支持

特性

• 同時(shí)提供有損壓縮和無損壓縮兩種圖片文件格式
• 文件體積小，無損壓縮后，比 PNG 文件少了 45％ 的文件大??；有損壓縮后，比 JPEG 文件少了 25% - 34% 文件大小
• 瀏覽器兼容差，目前只支持客戶端 Chrome 和 Opera 瀏覽器以及安卓原生瀏覽器(Andriod 4.0+)，WebP兼容性

更多關(guān)于 WebP：

維基百科 - WEBP

WEBP探尋之路

團(tuán)隊(duì)約定

內(nèi)容圖

內(nèi)容圖多以商品圖等照片類圖片形式存在，顏色較為豐富，文件體積較大

• 優(yōu)先考慮 JPEG 格式，條件允許的話優(yōu)先考慮 WebP 格式
• 盡量不使用 PNG 格式，PNG8 色位太低，PNG24 壓縮率低，文件體積大

背景圖

背景圖多為圖標(biāo)等顏色比較簡單、文件體積不大、起修飾作用的圖片

• PNG 與 GIF 格式，優(yōu)先考慮使用 PNG 格式,PNG 格式允許更多的顏色并提供更好的壓縮率
• 圖像顏色比較簡單的，如純色塊線條圖標(biāo)，優(yōu)先考慮使用 PNG8 格式，避免不使用 JPEG 格式
• 圖像顏色豐富而且圖片文件不太大的（40KB 以下）或有半透明效果的優(yōu)先考慮 PNG24 格式
• 圖像顏色豐富而且文件比較大的（40KB - 200KB）優(yōu)先考慮 JPEG 格式
• 條件允許的，優(yōu)先考慮 WebP 代替 PNG 和 JPEG 格式