圖片基礎知識及不同格式的特點介紹

點陣圖和向量圖
點陣圖：也叫做點陣圖、畫素圖，基於影像的矩形柵格內的每個畫素值來進行編碼。點陣圖的最小單位是畫素，每一個畫素對應一個色彩值，透過畫素的色彩值展示出影像。
點陣圖的畫素特點導致它縮放的時候影像會失真。常見格式如 jpg、png。
向量圖：也叫向量圖，透過使用點、線和多邊形來描繪影像，一般應用於簡單形狀的圖形，並且能保證在縮放的時候不失真。
解析度、畫素與顏色
點陣圖放大後，會看到有小格子，最終結果是一個個畫素點的格子，每個格子為 1*1 的畫素點。
一張圖有多少個畫素點，與圖片的解析度有關，即常說的圖片寬高尺寸，比如一張圖的寬是 1920、高是 1080，則它擁有 1920 * 1080 = 2073600 個畫素點。這裡的 1920 * 1080 就是影像的解析度。
而畫素作為基本單位，在影像中通常是使用不同的顏色模型來描述，最常見的顏色模型就是 RGB，加上透明通道就是 RGBA。顏色模型的知識可見 顏色模型相關知識解讀。
RGBA 使用紅、藍、綠三色通道，再加上透明通道，總共四個通道分量，每個分量多使用 1 個位元組來表示。
每個位元組有 8 個位元位，即 1 byte = 8bits，二進位制取值在 00000000-11111111，就有 0-255 共 256 種。關於位元組與二進位制的知識可見 深入理解前端位元組二進位制知識以及相關 API。
RGB 顏色模型三個通道分量，每個都有 256 種，即 RGB = R(8) * G(8) * B(8) = 256 * 256 * 256，共 1600 多萬色，這裡三通道各 8 位，對應的 24 點陣圖，即位深度。
RGB 三通道再加上 Alpha 透明通道，即多了 1 個位元組 8 位，就對應了 32 點陣圖。
色彩深度
色彩深度又叫作位深度，是針對點陣圖的，表示點陣圖中儲存 1 個畫素的顏色所需要的二進位制位的數量。
它是點陣圖中的一個重要指標，一般色彩深度越高，可用的顏色就越多，圖片的色彩也就會越豐富，對應的影像資料更多，影像的體積就更大。
bmp 格式的圖片一般不會壓縮，約等於原始圖片，可以是 1-32 位 的多種位深度的圖片。
壓縮方式
圖片的壓縮方式一般是三類：
● 無壓縮
幾乎不對圖片進行壓縮處理，儘量以原圖的方式呈現圖片，如 bmp 格式的圖片就屬於這一類。
● 無失真壓縮
很多圖片都採用無失真壓縮的方式，如 png、gif 等。
無失真壓縮採用對圖片資料進行編碼壓縮，以不降低圖片質量的情況下減少圖片的大小。
無失真壓縮只是對畫素資料壓縮，不會減少畫素，幾乎沒有損耗，所以可以恢復到原始圖片。
● 有失真壓縮
有失真壓縮最常見的就是 jpg 格式的圖片，它一般是使用去除人眼無法識別的圖片畫素的方法，降低了圖片的質量用以大幅度的減少圖片的大小。
這種情況下，有失真壓縮減少了圖片的畫素點，導致圖片資料部分丟失了，屬於不可逆的，所以無法恢復到原始圖片。
webp 格式的圖片既有無失真壓縮的，也有有失真壓縮。

不同格式圖片介紹
jpg
jpg 格式是最常見的影像格式，我們使用手機、相機等裝置拍的照片幾乎都是這種格式的，網際網路上也有大量 jpg 格式的圖片。根據一些資料顯示，jpg 格式的圖片目前大概能佔到七八成的比例。
它的特點是有失真壓縮，使用這種不可逆的壓縮方式，在不影響人眼可分辨的情形下，儘可能大的壓縮圖片檔案大小。
優點：支援 24 位，色彩豐富，檔案較小；
缺點：圖片有失真壓縮導致質量下降，不支援透明度。
適用於色彩豐富的照片、漸變影像，以及通用場景都較合適。
png
png 格式也是非常常見的影像格式，在網路傳輸和資源展示中都用處很大，它相比於 jpg，能夠支援透明度，並且圖片更清晰、逼真，這也是它被廣泛使用的原因之一。
優點：支援較高比例的無失真壓縮，擁有 32 位色彩深度，顏色豐富，支援透明度，並且檔案也相對較小，支援儲存附加資訊如 exif 等圖片資訊。
缺點：相比 jpg，壓縮較少，檔案大小會大一些。
適用於各種通用場景，對圖片質量要求較高，或者需要透明度的情況。
8 位 PNG 影像：
一個 8 位 PNG 圖片，支援透明背景且畫素顏色不能超過 256 種。除了壓縮演算法不同之外，此 8 位 PNG 格式與 GIF 格式極其相似；
用途：
8 位 PNG 圖片的用途與 GIF 格式基本相同，
● Logo
● 小圖示（Icon）
● 用於佈局的圖片（例如某個佈局角落，邊框等等）
● 僅包含不超過 256 種色彩的簡單，小型圖片場合
24 位 PNG 影像：
24 位 PNG，支援 160 萬種不同的畫素顏色且支援 Alpha 透明效果，這就意味著，無論透明度設定為多少，PNG 圖片均能夠與背景很好的融合在一起。

gif
gif 格式最常應用的場景就是網際網路上的表情包和各種圖片動畫效果，它只支援有 8 位 256 種顏色，色彩很簡單，加上壓縮率也較高，檔案大小都很小。
優點：幀動畫，帶透明效果，檔案小；
缺點：色彩簡單，影像質量較差。
適用於表情動圖、簡單的 logo、icon 等圖片，不適合顏色複雜細豐富的圖片。
svg
svg 格式是瀏覽器支援的唯一一種向量圖格式，它是一種可伸縮的向量圖形，基於 xml 語言進行描述的。 它縮放不失真的特點對我們在多屏展示圖示很有幫助，目前網路上的一些字型圖示、icon 等很多是 svg 圖片。
優點：向量圖，不失真，檔案更小，支援透明度，動效，svg 可程式設計，相容性也不錯；
缺點：過多的 svg 會導致渲染負擔。
適用於需要高效保真的影像，各種圖示、logo、icon、圖形表等等。
webp
webp 是一種相對較新的影像格式，它是谷歌推出的，最大的特點是：視覺效果好、色彩豐富的同時，同樣影像的檔案大小能比 jpg、png 減小 30% 左右。
優點：支援透明度，動畫效果，檔案更小，影像質量更好，既支援有損也支援無失真壓縮；
缺點：影像解碼稍複雜，可忽略 (ie 瀏覽器不支援)。
比較好的一點是，webp 目前已經獲得大部分主流瀏覽器的支援，所以使用 webp 格式的圖片也是一種較好選擇，能有效減少檔案大小，縮短下載時間。甚至，微信小程式都已經支援了。
bmp
bmp 格式是一種儲存影像原始資料的圖片格式，屬於 window 系統中的標準影像格式，它是無失真壓縮，幾乎不會作任何有損影像資料的操作，因此它是影像原始資料的一種來源。它支援多種位數 (1\4\8\16\24\32) 的色彩深度。
優點：無失真壓縮，影像資料儲存完整，畫質也很高；
缺點：影像檔案較大。
window 系統使用一些，但網際網路上一般使用很少。
ico
ico 是一種圖示檔案格式，一個檔案可以儲存多個尺寸的影像資料，較常見於 win 系統下的系統圖示。
它支援透明度，一般尺寸都較小，網際網路開發種常用的網站站點圖示就是使用這種格式： favicon.ico，顯示在瀏覽器頁面的標籤 tab 上。
avif
avif 是一種更新也更高效的影像格式，它基於高效影片編碼方案而生成的最新的一種影像檔案格式。
avif 可以使用無損或有失真壓縮來處理影像，可壓縮比例更高，一般檔案大小能比同樣的 jpg 影像減小 1 倍左右。
avif 支援透明度和動畫效果，影像質量和檔案大小的表現都要優於其他格式的影像，但是它的瀏覽器支援度還不夠，部分瀏覽器不支援，如 Edge。