圖片格式介紹

本文原創：huhongtao

1、圖片格式有哪些？

BMP、JPEG、GIF、PSD、PNG、TIFF、TGA、EPS、SVG、webP、CDR、PCX、EXIF、FPX、PCD、DXF、UFO、AI、HDRI、RAW、WMF、FLIC、EMF、ICO

2、圖片分類

一、 矢量圖

矢量圖：由數學向量來記錄的圖像是矢量圖

特色：放大後圖片依舊清晰—放大後從新構圖

缺點：很難表現天然度高的寫實圖像

格式：SVG、CDR、AI、WMF、EPS、ICO、TGA、DXF、…

二、位圖(Bitmap)

位圖：由一系列像素點組成的圖像是位圖，位圖也稱爲點陣圖

特色： （1）放大會看到像素點，呈現鋸齒狀——放大後單位面積的像素點減小 （2）dpi決定圖像的清晰度 （3）RGB彩色圖像——色彩豐富

格式：PNG、JPEG、GIF、BMP、webP、PSD、TIFF、PCX、FPX、PCD、…

二者差異

類型	位圖	矢量圖
構圖方式	像素點	向量
色彩	色彩豐富	色彩變化少
失真	放大、縮小易失真	不失真，良好的縮放性
大小	大(面積越大,色彩越豐富,越大)	小
分類	bpm、jpg、gif、psd、png、...	wmf、ai、EPS、SVG、cdr、emf、dxf、...

位圖不一樣格式的區別 —— 有損壓縮、無損壓縮

不一樣格式的圖像在記錄這些數據時的方式不同，涉及到有損壓縮和無損壓縮的區別

三、有損壓縮

概念：並不徹底真是的記錄圖像上每一個像素點的數據信息，去掉那些圖像上會被人眼忽略的細節，而後使用附近的顏色經過漸變或其餘形式進行填充。

特色：能大大下降圖像信息的數據量，又不會影響圖像的還原效果

格式：jpg

四、無損壓縮

概念：真實的記錄圖像上每一個像素點的數據信息，爲了壓縮圖像文件的大小會採用一些特殊的算法

壓縮原理：先判斷圖像上哪些區域的顏色是相同的，哪些是不一樣的而後把這些相同的數據信息進行壓縮記錄，（例如一片藍色的天空只須要記錄起點和終點的位置就能夠了），而把不一樣的數據另外保存（例如天空上的白雲和漸變等數據）

格式： （1）PNG（對圖像上全部出現的顏色進行索引，咱們把這些顏色成爲索引色，PNG8(索引256色)、PNG24(真彩16.7million色)、PNG32(真彩16.7million色)） （2）GIF，索引256色，支持動畫

3、經常使用格式介紹

介紹 png、jpg、psd、svg、webp、iconfont

png —— 主要特性是半透明

1. 壓縮比高於GIF，支持圖像透明，無損壓縮，質量高
2. 能夠利用Alpha通道調節圖像的透明度(實驗)
3. 逐次逼近顯示，先用低分辨率顯示圖像，而後逐步提升它的分辨率
4. 透明性，用來建立一些有特點的圖像
5. 流式讀/寫性能，容許連續讀出和寫入圖像數據
6. PNG的開發目標是改善並取代GIF,PNG8除了不支持動畫外，PNG8有GIF全部的特色，可是比GIF更加具備優點的是它支持alpha透明和更優的壓縮（GIF僅支持索引透明）
7. 佔內存大
8. 能在保證不失真的狀況下儘量壓縮圖像文件的大小
9. 對於須要高保真的較複雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在web頁面上
10. 顏色數越少，文件體積越小

jpg

1. 應用最普遍
2. 有損壓縮
3. 將不易被人眼察覺的圖像顏色刪除
4. 較大的壓縮比(可達到2:1甚至40:1)
5. 尺寸較小，下載速度快，但不支持透明
6. 位圖，由像素構成，放大變虛
7. JPEG圖像存儲格式既知足了人眼對色彩和分辨率的要求，又適當的去除了圖像中很難被人眼所分辨出的色彩
8. 編輯和從新保存JPG格式圖像，清晰度降低損失會累積
9. JPG不適用於所含顏色較少、具備大塊顏色相近的區域或亮度差別十分明顯的較簡單的圖片

「基線」格式的JPG加載過程

「連續」格式的JPG加載過程

jpg格式保存方式

psd

1. Photoshop的專用圖像格式
2. 保存圖片的完整信息，圖層，透明，通道，文字
3. 文件通常較大

svg

經過記錄座標的形式存儲圖形信息，SVG使用基於XML的語義化標籤結構，因爲是DOM結構，你能夠經過ID獲取SVG元素，並操縱它們

1. 採用文原本描述對象
2. 矢量圖形、點陣圖像、文本
3. 不適用於寫實圖像和有許多細節的複雜圖片
4. 可用於數據可視化
5. 支持動畫、透明、縮放

webp

目標：減小文件大小，但達到和JPEG格式相同的圖片質量，但願可以減小圖片檔在網絡上的發送時間

1. 支持動畫
2. 犧牲圖片質量來下降圖片文件大小
3. 相同質量的狀況下比JPEG文件尺寸小巧許多
4. 支持有損壓縮和無損壓縮的圖片文件格式
5. 無損壓縮後的 WebP 比 PNG 文件少了 45％ 的文件大小，即便png通過壓縮，webp能夠減小28%的大小
6. 更小的圖片體積
7. 在 JPEG 和 PNG 上的轉化效果都很是優秀、穩定和統一
8. 谷歌推出的新格式，存在兼容性，目前chrome、opera支持

iconfont

1. 矢量圖標
2. 引入字體
3. 便於調整大小、顏色

gif

1. 動畫
2. 支持透明背景
3. 適用於多種操做系統，壓縮比高
4. 色域不太廣,只支持256種顏色

4、應用介紹

一、前端使用何種圖片格式

一、通常層次豐富顏色較多的圖像採用JPG存儲，而顏色簡單對比強烈的則須要採用PNG
二、有些矢量工具繪製的圖像因爲採用較多的濾鏡特效也會造成豐富的色彩層次，這個時候就須要採用JPG進行存儲了
三、基本視覺元素，如容器的背景、按鈕、導航的背景等應該儘可能用PNG格式進行存儲，這樣才能更好的保證設計品質


照片用 JPG。
動畫用 GIF。
Logo、Icon 等小圖用 PNG-8。
複製代碼

二、加載的圖片太多、太大怎麼辦

一、將圖片和應用分離，防止高I/O負載而崩潰，同一時間對同一域名下的資源的併發請求數目限制
二、壓縮
三、懶加載
四、css雪碧圖css Sprites
五、將圖片壓縮成base64格式來節約請求
複製代碼

三、前端圖像處理工具

一、[tinypng.com](https://tinypng.com/)
二、[騰訊智圖](http://zhitu.isux.us/)
三、[pngcrush](https://pngcrush.com/)
四、...
複製代碼

tinypng.com

1.更好的壓縮算法，並且經過智能地減小顏色數，達到有效的壓縮。 2.壓縮比高，失真小

騰訊智圖

1.除了 PNG 和 JPG ，還支持 WebP
2.能夠直接看到壓縮後的圖片大小

pngcrush

1.能夠批量壓縮圖片 2.可減小40%的大小

四、圖片懶加載的原理

五、base64

1.減小請求次數 2.轉化後不必定會減少體積 3.不會被緩存，適合較小或者簡單的圖片