每個前端工程師都應該瞭解的圖片知識 (建議收藏)

2019-06-04 08:28:35

前言

隨著web的發展,網站資源的流量也變得越來越大。據統計,60% 的網站流量均來自網站圖片,可見對圖片合理優化可以大幅影響網站流量,減小頻寬消耗和伺服器壓力。

有時候你花大力氣去配置 webpack 使打包體積減少,不如好好優化幾張圖片,這篇文章就是讓你明白如何選擇正確的圖片,並且讓你明白這麼多圖片格式,在什麼場景下使用什麼格式,如果想看答案,那麼直接滑到文末看圖即可。

基本概念

在進入正題之前,先聊聊一些圖片相關的基本概念。

一張照片(點陣圖)不斷放大之後,會看到一個個小格子,這些小格子,叫畫素。

一個格子(畫素),在計算機中,用二進位制來表示,使用的二進位制位數越多,畫素的色彩就越豐富。

舉個🌰,如果一個畫素用一位二進位制數表示,能有多少種顏色呢?

兩種,一個二進位制位,要不放 0(表示黑色),要不放 1(表示白色)

下圖展示了一個畫素二進位制的位數最多可以展示多少種顏色。

在對圖片有了基本的瞭解之後,接下來對圖片進行分下類,有利於理解各種格式圖片的特點。

根據圖的型別分類

  • 點陣圖(點陣圖)

  • 向量圖

點陣圖(點陣圖)

點陣圖,也叫做點陣圖,畫素圖。構成點陣圖的最小單位是畫素,點陣圖就是由畫素陣列的排列來實現其顯示效果的,每個畫素有自己的顏色資訊,在對點陣圖影象進行編輯操作的時候,可操作的物件是每個畫素,我們可以改變影象的色相、飽和度、透明度,從而改變影象的顯示效果。

前面介紹中的那種不斷放大會有小格子的圖就是屬於點陣圖。

常見的比如:jpg、png、webp等,我們平時遇到的大多數都是點陣圖

向量圖

向量圖,也叫做向量圖。向量圖並不紀錄畫面上每一點的資訊,而是紀錄了元素形狀及顏色的演算法,當你開啟一幅向量圖的時候,軟體對圖形對應的函式進行運算,將運算結果圖形的形狀和顏色顯示給你看。

無論顯示畫面是大還是小,畫面上的物件對應的演算法是不變的,所以,即使對畫面進行倍數相當大的縮放,其顯示效果仍然相同(不失真)。

常見的就是 svg 格式的。

根據壓縮分類

  • 無壓縮。

  • 無失真壓縮。

  • 有失真壓縮。

無壓縮

無壓縮的圖片格式不對圖片資料進行壓縮處理,能準確地呈現原圖片。BMP 格式就是其中之一。

有失真壓縮

指在壓縮檔案大小的過程中,損失了一部分圖片的資訊,也即降低了圖片的質量,並且這種損失是不可逆的,我們不可能從一個有失真壓縮過的圖片中恢復出完整的圖片。

常見的有失真壓縮手段,是按照一定的演算法將臨近的畫素點進行合併。壓縮演算法不會對圖片所有的資料進行編碼壓縮,而是在壓縮的時候,去除了人眼無法識別的圖片細節。因此有失真壓縮可以在同等圖片質量的情況下大幅降低圖片的尺寸。其中的代表是 jpg。

無失真壓縮

在壓縮圖片的過程中,圖片的質量沒有任何損耗。我們任何時候都可以從無失真壓縮過的圖片中恢復出原來的資訊。

壓縮演算法對圖片的所有的資料進行編碼壓縮,能在保證圖片的質量的同時降低圖片的尺寸。

png 是其中的代表。

小結

  • 使用有失真壓縮處理影象,是去除某些畫素資料,無法找回原圖。

  • 使用無損處理影象,是對畫素資料進行壓縮,可以找回原圖。

常見的圖片格式解析

GIF

關鍵詞:無失真壓縮、索引色、透明、動畫

GIF(Graphics Interchange Format) 的原義是“影象互換格式”,是一種基於 LZW 演算法連續色調的無損的基於索引色的壓縮格式。其壓縮率一般在 50% 左右,它不屬於任何應用程式所以幾乎所有相關軟體都支援它,公共領域有大量的軟體在使用 GIF 影象檔案。

GIF 是一種無失真壓縮,所以它只是對畫素資料進行壓縮,其實 LZW 演算法只是一個壓縮資料的演算法,如果你懂哈夫曼演算法的話,可能就比較好理解壓縮資料是怎麼回事兒了。

GIF 的特性是幀動畫

相比古老的bmp格式,尺寸較小,而且支援透明(不支援半透明,因為不支援 Alpha 透明通道 )和動畫。

優勢

  1. 優秀的壓縮演算法使其在一定程度上保證影象質量的同時將體積變得很小。

  2. 可插入多幀,從而實現動畫效果。

  3. 可設定透明色以產生物件浮現於背景之上的效果。

缺點

由於採用了 8 位壓縮,最多隻能處理 256 種顏色,故不宜應用於真彩色(文末的附錄有解釋)圖片。

適合場景

色彩簡單的 logo、icon、線框圖、文字輸出等

JPG/JPEG

關鍵詞:有失真壓縮、直接色、適合大圖、體積小

JPEG 格式是最常見的一種影象格式,檔案後輟名為“.JPEG”或“.jpg”,JPEG 可以說是人們最熟悉的圖檔格式,相信在數字相機普及的現在,幾乎每臺數字相機、照相手機都可以(甚至只能)輸出 JPEG 格式的圖檔。

JPEG 是一種很典型的使用有失真壓縮影象格式,也就是說使用者每次進行 JPEG 的存檔動作後,圖檔的一些內容細節都會遭到永久性的破壞,尤其是使用過高的壓縮比例,將使最終解壓縮後恢復的影象質量明顯降低,如果追求高品質影象,不宜採用過高壓縮比例。

JPEG 圖片格式的設計目標,是在不影響人類可分辨的圖片質量的前提下,儘可能的壓縮檔案大小。

Baseline JPEG 和 Progressive JPEG

JPEG 有兩種儲存方式:Baseline JPEG(標準型)、Progressive JPEG(漸進式)。兩種格式有相同尺寸以及影象資料,他們的副檔名也是相同的,唯一的區別是二者顯示的方式不同。

Baseline JPEG

Baseline JPEG 檔案儲存方式是按從上到下的掃描方式,把每一行順序的儲存在 JPEG 檔案中。開啟這個檔案顯示它的內容時,資料將按照儲存時的順序從上到下一行一行的被顯示出來,直到所有的資料都被讀完,就完成了整張圖片的顯示。如果檔案較大或者網路下載速度較慢,那麼就會看到圖片被一行行載入的效果,這種格式的JPEG沒有什麼優點,因此,一般都推薦使用Progressive JPEG。

Progressive JPEG

和 Baseline 一遍掃描不同,Progressive JPEG 檔案包含多次掃描,這些掃描順尋的儲存在 JPEG 檔案中。開啟檔案過程中,會先顯示整個圖片的模糊輪廓,隨著掃描次數的增加,圖片變得越來越清晰。這種格式的主要優點是在網路較慢的情況下,可以看到圖片的輪廓知道正在載入的圖片大概是什麼。在一些網站開啟較大圖片時,你就會注意到這種技術。

漸進式圖片帶來的好處是可以讓使用者在沒有下載完圖片就可以看到最終影象的大致輪廓,一定程度上可以提升使用者體驗(瀑布流的網站建議還是使用標準型的)。

更多關於 Baseline JPEG 和 Progressive JPEG 請看這篇文章:使用漸進式JPEG來提升使用者體驗。

優點

  • 可以支援 24bit 真彩色,普遍應用於需要連續色調的影象如色彩豐富的圖片、照片等;

  • 可利用可變的壓縮比以控制檔案大小;

  • 支援交錯(對於漸近式 JPEG 檔案);

缺點

  • JPEG 不適合用來儲存企業 Logo、線框類的圖。因為有失真壓縮會導致圖片模糊,而直接色的選用,又會導致圖片檔案較GIF更大。

  • 有損耗壓縮會使原始圖片資料質量下降。

  • JPEG 影象不支援透明度處理,透明圖片需要召喚 PNG 來呈現。

適合場景

JPG 適用於呈現色彩豐富的圖片,在我們日常開發中,JPG 圖片經常作為大的背景圖、輪播圖或 Banner 圖出現。

GIF vs JPEG

由於 GIF 與 JPEG 有著如此不同的特性,因此我們可以很輕易的選擇何時該用哪一種格式來輸出我們需要的圖檔:當圖片擁有豐富的色彩時,並且沒有明顯銳利反差的邊緣線條時,選擇 JPEG 可以得到最好的輸出結果,照片就是最好的例子;當圖片是擁有明確邊緣的線條圖、沒有使用太多色彩、甚至可能需要透明背景時,GIF 是很好的選擇,檔案小、畫質又精美。

PNG

關鍵詞:無失真壓縮、索引色、支援透明、體積大

行動式網路圖形(簡稱 PNG,英語全稱:Portable Network Graphics)。PNG 能夠提供長度比 GIF 小30%的無失真壓縮影象檔案。它同時提供 24 位和 32 位真彩色影象支援以及其他諸多技術性支援。由於PNG 優秀的特點,PNG 格式圖片可以稱為“網頁設計專用格式”。PNG 最初的開發目的是為了作為 GIF 的替代方案的,作為做新開發的影像傳輸檔案格式,PNG 同樣使用了無損壓縮格式,事實上 PNG 的開發就是因為 GIF 所使用的無失真壓縮格式專利問題而誕生的。

PNG 有三種形式,下面分別介紹一下他們的區別。

PNG-8

PNG-8 是 PNG 的索引色版本。PNG-8 是無損的、使用索引色的、點陣圖。

PNG-8 是非常好的 GIF 替代者,在可能的情況下,應該儘可能的使用 PNG-8 而不是 GIF,因為在相同的圖片效果下,PNG-8 具有更小的檔案體積。除此之外,PNG-8 還支援透明度的調節,而 GIF 並不支援。 現在,除非需要動畫的支援,否則我們沒有理由使用 GIF 而不是 PNG-8。

PNG-24

PNG-24 是 PNG 的直接色版本。PNG-24 是無損的、使用直接色的、點陣圖。

無損的、使用直接色的點陣圖,聽起來非常像 BMP,是的,從顯示效果上來看,PNG-24 跟 BMP 沒有不同。PNG-24 的優點在於,它壓縮了圖片的資料,使得同樣效果的圖片,PNG-24 格式的檔案大小要比 BMP 小得多。當然,PNG24 的圖片還是要比 JPEG、GIF、PNG-8 大得多。

雖然 PNG-24 的一個很大的目標,是替換 JPEG 的使用。但一般而言,PNG-24 的檔案大小是 JPEG 的五倍之多,而顯示效果則通常只能獲得一點點提升。所以,只有在你不在乎圖片的檔案體積,而想要最好的顯示效果時,才應該使用 PNG-24 格式。

另外,PNG-24 跟 PNG-8 一樣,是支援圖片透明度的。

理論上來說,當你追求最佳的顯示效果、並且不在意檔案體積大小時,是推薦使用 PNG-24 的。

實踐當中,為了規避體積的問題,我們一般不用PNG去處理較複雜的影象。當我們遇到適合 PNG 的場景時,也會優先選擇更為小巧的 PNG-8。

PNG-32

PNG-32 跟 PNG-24 的區別就是多了一個 Alpha 通道,用來支援半透明,其他的跟 PNG-24 基本一樣。

優點:

  • 支援高級別無損耗壓縮;

  • 支援 alpha 通道透明度;

  • 支援 256 色調色盤技術以產生小體積檔案

  • 最高支援 24 位真彩色影象以及 8 位灰度影象。

  • 支援影象亮度的 Gamma 校準資訊。

  • 支援儲存附加文字資訊,以保留影象名稱、作者、著作權、創作時間、註釋等資訊。

  • 漸近顯示和流式讀寫,適合在網路傳輸中快速顯示預覽效果後再展示全貌。

缺點

  • 較舊的瀏覽器 IE6- 和程式可能不支援 PNG 檔案;

  • 與 JPEG 的有損耗壓縮相比,PNG 提供的壓縮量較少;

  • 與 GIF 格式相比,對多影象檔案或動畫檔案不提供任何支援。

適合場景

呈現小的 Logo、顏色簡單且對比強烈的圖片或背景等。

關於 PNG 的小知識點

PNG 分為兩種,一種是 Index,一種是 RGB。Index 記錄同一種顏色的值和出現的位置(簡單地說,比如一個 2px*2px 的超級小圖,從左往右從上往下依次的顏色是紅,白,白,紅,那麼記錄的方法就是“紅-1,4;白-2,3”);而 RGB 圖則把所有畫素的色值依次記錄下來(即“紅,白,白紅”)。對於相同的圖片,Index 格式的尺寸總是小於 RGB。

其中 PNG-8 就是 Index,稱作為索引色,而 PNG-24 和 PNG-32 是 RGB 形式,也可稱作為直接色。

因為 PNG 是無失真壓縮,保留了圖片需要的所有資訊,所以索引色是可以轉化為直接色的。

WebP

關鍵詞:年輕、有損、無損、相容性

WebP 是谷歌開發的一種新圖片格式,WebP 是同時支援有損和無失真壓縮的、使用直接色的、點陣圖。

從名字就可以看出來它是為 Web 而生的,什麼叫為 Web 而生呢?就是說相同質量的圖片,WebP 具有更小的檔案體積。現在網站上充滿了大量的圖片,如果能夠降低每一個圖片的檔案大小,那麼將大大減少瀏覽器和伺服器之間的資料傳輸量,進而降低訪問延遲,提升訪問體驗。

  • 在無失真壓縮的情況下,相同質量的 WebP 圖片,檔案大小要比 PNG 小26%;

  • 在有失真壓縮的情況下,具有相同圖片精度的 WebP 圖片,檔案大小要比 JPEG 小 25%~34%;

  • WebP 圖片格式支援圖片透明度,一個無失真壓縮的 WebP 圖片,如果要支援透明度只需要 22% 的格外檔案大小。

可以看到 WebP 集多種圖片檔案格式的優點於一身,所以在圖片的質量和效能上,WebP 無疑是贏家。

不過 WebP 有有一個缺點,導致還不能大規模使用,那就是相容性。

這是我 2019 年 5 月截的圖,可以看到 IE 和 Safari 所有的版本都是不支援的(這是硬傷), 火狐也是最新的幾個版本才開始支援,年輕有年輕的代價。

此外,WebP 與 JPG 相比較,編碼速度慢 10 倍,解碼速度慢 1.5 倍,而絕大部分的網路應用中,圖片都是靜態檔案,所以對於使用者使用只需要關心解碼速度即可。但實際上,WebP 雖然會增加額外的解碼時間,但是由於減少了檔案體積,縮短了載入的時間,實際上檔案的渲染速度反而變快了。

使用場景

**WebP **集多種圖片檔案格式的優點於一身,所以基本上適合各種場景,但是由於相容性不好,所以我們如果大規模的適用 WebP,一定要在 Safari 和 IE 裡面施行降級。

這是淘寶商品圖片是我在 Chrome 開啟的例子,可以看到圖片的字尾是 .jpg_.webp,如果這張圖片在 Safari 開啟字尾就變為了 .jpg,這是一種降級方案,其他的方案請讀者自行研究,不在本文討論中。

APNG

APNG(Animated Portable Network Graphics)顧名思義是基於 PNG 格式擴充套件的一種動畫格式,增加了對動畫影象的支援,同時加入了 24 點陣圖像和 8 位 Alpha 透明度的支援,這意味著動畫將擁有更好的質量,其誕生的目的是為了替代老舊的 GIF 格式,但它目前並沒有獲得 PNG 組織官方的認可。

APNG 第1幀為標準 PNG 影象,剩餘的動畫和幀速等資料放在 PNG 擴充套件資料塊,因此只支援原版 PNG 的軟體會正確顯示第 1 幀。

在相容性方面絕大部分瀏覽器都還是支援的,如果以前是因為動畫的原因用 GIF 的,現在用 APNG 是一個不錯的選擇,其他的特性是跟 PNG 樣的,因為 APNG 只是一個 PNG 的擴充套件。

更多 APNG 相關的可以看 APNG 那些事

SVG

關鍵詞:無損、向量圖、體積小、不失真、相容性好

可縮放向量圖形,英文 Scalable Vector Graphics(SVG),是無損的、向量圖。

SVG是一種用 XML 定義的語言,用來描述二維向量及向量/柵格圖形。SVG提供了3種類型的圖形物件:向量圖形(例如:由直線和曲線組成的路徑)、圖象、文字。圖形物件還可進行分組、新增樣式、變換、組合等操作,特徵集包括巢狀變換、剪下路徑、alpha 蒙板、濾鏡效果、模板物件和其它擴充套件。

SVG 跟上面這些圖片格式最大的不同,是 SVG 是向量圖。這意味著 SVG 圖片由直線和曲線以及繪製它們的方法組成。當你放大一個 SVG 圖片的時候,你看到的還是線和曲線,而不會出現畫素點。這意味著 SVG 圖片在放大時,不會失真,所以它非常適合用來繪製企業 Logo、Icon 等。

優點:

  • SVG 可被非常多的工具讀取和修改(比如記事本)。

  • SVG 與 JPEG 和 GIF 影象比起來,尺寸更小,且可壓縮性更強。

  • SVG 是可伸縮的。

  • SVG 影象中的文字是可選的,同時也是可搜尋的(很適合製作地圖)。

  • SVG 可以與 JavaScript 技術一起執行

  • SVG圖形格式支援多種濾鏡和特殊效果,在不改變影象內容的前提下可以實現點陣圖格式中類似文字陰影的效果。

  • SVG圖形格式可以用來動態生成圖形。例如,可用 SVG 動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端使用者。

缺點:

  • 渲染成本比較高,對於效能有影響。

  • SVG 的學習成本比較高,因為它是可程式設計的。

適用場景

1、高保真度複雜向量文件已是並將繼續是 SVG 的最佳點。它非常詳細,適用於檢視和列印,可以是獨立的,也可以嵌入到網頁中
2、在WEB專案中的平面圖繪製,如需要繪製線,多邊形,圖片等。
3、資料視覺化。

SVG 只是 Web 開發常用的一種向量圖,其實向量圖常見還有幾種格式:BW 格式、AI 格式、CDR 格式、ICO 格式。

總結

本文詳細的介紹了常見的圖片格式:GIF、JPEG、PNG、WebP、APNG、SVG,介紹了他們是什麼,有什麼用,優點和缺點,以及使用場景。由於圖片相關的知識確實太多了,我只是把一些我覺得必要的寫出來,下面在網上找到了一個選擇圖片過程的表格和圖,下次不知道選擇什麼圖片格式,直接看圖就行。

其中 APNG 和 WebP 格式出現的較晚,尚未被 Web 標準所採納,只有在特定平臺或瀏覽器環境可以預知的情況下加以採用。圖片格式選擇過程如下:


在看



熱點新聞