前言

最近，在做項目資源打包優化。如果大家做過類似的工作，在操作過程中，想必有一個資源肯定是繞不開的。那就是「圖片資源」。無論，我們項目是用Webpack還是Vite亦或是Rspack。

因為，作為一個功能完備的項目，或多或少都會用到圖片(首頁功能介紹/輪播圖)，然后針對圖片的格式又有很多。這就需要我們對項目中不同的圖片資源做針對性的處理。常規的操作基本就是「壓縮」。這點我們在前端項目里都有啥？有過介紹。

圖片

而我們今天不是將如何在項目中優化圖片資源，而是像大家科普一下「那些不為人知的圖片知識」。下面的內容，我們都是選擇我們平時開發中常見的知識點，針對一些特別拗口的東西，我們就不介紹了。

好了，天不早了，干點正事哇。

我們能所學到的知識點

1. 柵格圖（位圖） vs 矢量圖
2. 位圖常見格式
3. 圖片轉換網站

1. 柵格圖（位圖） vs 矢量圖

什么是柵格圖？

下面是從維基百科中截取的關于柵格圖[1]的介紹。

圖片

就像圖片中截取的那樣，柵格圖是「像素」為主要信息的載體，通過內部的值的變化來呈現我們頁面中想要顯示的內容。

下面的笑臉圖案就是一個柵格圖。當放大時，單個像素會呈現為正方形。進一步放大，可以分析

每個像素，它們的顏色是通過紅、綠和藍的數值組合構成的。

圖片

像我們平時見到的GIF/PNG/JPEG/WEBP都屬于柵格圖。看到這些圖片格式，是不是感覺到倍感親切。沒關系，我們下文中會著力介紹他們。

其中，柵格圖其實還有一個大家耳熟能詳的名字 - 位圖(Bitmap Graphics)。

圖片

還有一點，再多啰嗦點，不知道大家看到Raster/Bitmap是不是感覺在哪里見過。(如果大家看過之前的像素是怎樣練成的)。

圖片

也就是說柵格圖/位圖是瀏覽器內置的一種顯示格式。大千世界，就是這么神奇。更加一步講，如果我們不做特殊說明和處理，我們在瀏覽器中看到的圖像信息都是以像素為基礎的。(這點和我們即將要講到的矢量圖有天壤之別)

正因為柵格圖是基于像素的，它能夠顯示讓人嘆為觀止的視覺表現，但也正是這一點導致它們在可擴展性、網絡性能等方面的能力欠佳。

任何位圖圖形中的像素數量都是固定的，這意味著任何嘗試調整大小/放大都將導致失真和/或模糊的視覺效果，因為系統無法憑空創建額外的像素。

矢量圖

我們繼續從維基百科中尋找關于矢量圖[2]的信息。

圖片

從上面的信息，我們可以得知。矢量圖是使用「數學公式」生成的，這些公式轉化為在網格上對齊的點、線和曲線。

?

矢量圖不是基于像素的，這意味著在調整大小時不受限制。它們是分辨率獨立的 - 我們可以調整矢量圖形的大小而不會丟失質量或出現視覺偽影。

?

矢量圖可以幫助我們創建性能友好的 UI 設計元素、可以無限縮放，或者以極低成本制作的快速加載的解釋性動畫。基于這些特性，我們如果考慮網絡性能時并且圖像的還原度不是很高的話，我們一般首選SVG(可縮放的矢量圖)。

矢量圖形常見于 SVG、WMF、EPS、PDF、CDR 或 AI 類型的圖形文件格式。

位圖和矢量圖如何抉擇

那么說了這么多，我們該在項目中如何抉擇使用哪個格式的圖片信息進行圖片信息的展示呢？

• 如果我們項目中如果對圖像展示有較高的要求，那么我們就需要選擇位圖，但是由于其文件資源較大，我們在兼顧展示的情況下還需要做一點的優化處理。
• 如果項目中對色彩還原度不是很高，并且還需要兼容PC/移動端等弱網環境，那么在一些不是很重要的部分(圖標/Icon等)就可以選用矢量圖。

一言以蔽之：位圖能夠表現更多的色彩能力，但是它的文件較大并且對顯示媒介的分辨率依賴性極強,而矢量圖在犧牲了色彩細節，但是它具有很高的延展性。

下面，我們就介紹一下我們常見的圖片格式。

2. 位圖常見格式

上節中我們從內部實現原理角度來簡單介紹了位圖和矢量圖。這節我們來位圖中常見的格式(Gif/Png/JPeg/Webp)，并且每種格式各自的優缺點和對應的適用場景。

常見位圖格式及特性支持

色彩支持

圖片

• .gif:每像素8位：256種顏色
• .jpg(.jpeg):每通道8位：1600萬+種顏色
• .png(apng):每通道8位：1600萬+種顏色
• .webp:每通道8位：1600萬+種顏色

透明度

圖片

• .gif:1位透明度，像素要么透明要么不透明
• .jpg(.jpeg):不支持透明度
• .png(apng):支持完全半透明
• .webp:支持完全半透明

是否支持動畫

圖片

• .gif:支持
• .jpg(.jpeg):不支持
• .apng:支持(這里是apng不是png)
• .webp:支持

文件初始大小和壓縮性能

圖片

• .gif:無損壓縮，文件大小較大
• .jpg(.jpeg):有損壓縮，文件大小較小
• .png(apng):無損或接近無損壓縮，更好的質量
• .webp:有損壓縮，文件大小較小

兼容性

圖片

• .gif:兼容性良好
• .jpg(.jpeg):兼容性良好
• .png(apng):在瀏覽器端兼容良好
• .webp:在瀏覽器端兼容良好

基于上面的各種特性，我們可以用一個表格來展示。

GIF

我們繼續從維基百科中尋找關于-GIF[3]的介紹。

圖片

總結上面的信息可得出，GIF（Graphics Interchange Format，圖形交換格式）是一種無損、低分辨率和低幀率的圖像格式，于1987年發明。它與所有網絡瀏覽器兼容，易于嵌入到各種網站中。該格式支持256種顏色，不支持半透明效果。GIF文件適用于具有清晰邊緣和線條以及少量顏色的圖像。

GIF被大家熟知的就是表情包了。在各種社交app中層出不窮。然后它還可以用在公司官網用于展示較短的動態信息。

想必大家在劃水時，都是用gif來和朋友斗法。只所以能夠以圖片形式展示一段動畫，就是

動態GIF是將圖像或幀組合成單個文件，顯示為短視頻或動畫。

其實，針對GIF還有很多操作和優化空間。例如

• 分辨率
• 幀率
• 速度/持續時間
• 顏色

如果對這塊感興趣，可以參考gif 優化方案[4]

PNG

來自維基百科的介紹 - PNG[5]

圖片

總結上面的信息可得出，PNG（Portable Network Graphics，便攜式網絡圖形）是一種基于柵格的高質量文件格式，是無損的，支持透明度。它保留了圖像的所有細節，并擁有1600萬種顏色，因此非常適合復雜的視覺效果。PNG文件可以在幾乎任何圖像查看器、網絡瀏覽器和圖形工具中查看。

這種格式從90年代開始存在，它是「為了替代GIF而創建」的，因為GIF涉及版權費用。它已成為當今網絡上最常見的圖像格式之一。

PNG是用于徽標、圖標、透明背景、具有硬邊緣的圖形以及顏色較少和/或包含文本的圖像的理想選擇。

PNG的主要類型如下

• PNG-8：支持256種顏色
• PNG-24：支持1600萬種顏色
• PNG-32：支持1600萬種顏色以及高級透明度支持

GIF VS PNG

從上面的介紹中我們可以得出GIF算是最早的圖片格式，那就意味著后面出現的各種圖片格式都是直接或者間接的去彌補它的錯誤或者增強它的某些特性。

所以，我們下面的每介紹一個圖片格式，都會以GIF為標準進行對比。

GIF和PNG之間的相似之處是功能性的，因為PNG是設計來取代GIF的。GIF和PNG都是由二維顏色點陣（即像素）組成的柵格格式。

PNG相對于GIF的以下3個主要優勢：

1. Alpha通道：PNG的第一個優勢是Alpha通道，提供可變透明度。在PNG中，每個像素可以具有不同級別的透明度。
2. 伽馬校正：PNG的第二個優勢是伽馬校正，使得跨平臺對比度增強的控制成為可能。
3. 漸進式圖像呈現：PNG的第三個優勢與漸進式圖像呈現有關；雖然GIF只有四個通道，但PNG具有兩維交錯，七個通道，使其在視覺上更加吸引人。此外，與相似的GIF相比，PNG可以實現高達25%的更好壓縮。

在動畫領域，GIF相比PNG有更好的展示效果，所以優先選擇GIF格式。PNG旨在成為單一圖像格式，并不用于創建動畫圖形。盡管有一個名為MNG的支持動畫的PNG版本，但由于實際原因，這種格式并不被廣泛使用。

然而，還有一種較新的、非官方的PNG擴展稱為APNG，它是為了動畫目的而創建的。

APNG

APNG（Animated Portable Network Graphics，動態便攜式網絡圖形）是一種柵格圖形格式，也是PNG的一個非官方擴展。APNG具有無限幀率、非常好的壓縮率和流暢的外觀。

這項規范是在2004年創建的，旨在為動態PNG文件提供支持。

APNG使用相同的.png擴展名，支持24位圖像和8位透明度，并且可以在Firefox、Opera、Chrome中打開。

圖片

APNG可以被視為GIF的替代品，因為它提供了類似的可視化效果

它具有更高質量的調色板和透明度支持。它不僅比GIF看起來更好，GIF往往會出現像素化和顆粒狀的情況，而且它的文件大小更小。

JPEG

來自維基百科的介紹 - JPEG[6]

圖片

JPEG（Joint Photographic Experts Group,聯合攝影專家組）是一種常用于攝影和色彩豐富的圖像的圖像格式。它是最知名的格式之一，也是數字相機的默認設置。JPEG非常適合于在社交媒體和網站上使用的中等質量、逼真的圖像。它的一個優點是被所有瀏覽器支持，并且可以被所有圖像編輯軟件編輯。

JPEG具有「有損壓縮」，因此每次重新保存和導出圖像時，圖像的質量都會降低，因為原始數據在此過程中未被保留。

我們可以自由選擇壓縮的百分比，從0到100%。大多數圖形專業人員選擇大約60%-70%，因為在這個壓縮級別下圖像看起來仍然相當好。它不支持透明度或動畫。

GIF vs JPEG

GIF和JPEG之間的區別在于，對于具有有限色彩調色板的計算機圖形（如圖標、卡通圖片），GIF是更好的選擇，而JPEG是更適合照片和色彩豐富的圖像，并且在打印時也表現良好。

在進行GIF與JPEG比較時，圖像質量和文件大小是考慮的兩個主要因素。

如前所述，GIF和JPEG之間的一個顯著區別是JPEG在壓縮時會丟失數據，而GIF使用的是無損壓縮算法。

WebP

來自維基百科的介紹 - WebP[7]

圖片

WebP是一種用于網絡的圖像格式，旨在顯示高質量但文件大小較小的圖像，以改善加載時間。它可以根據我們的需要進行有損或無損壓縮。WebP格式相對較新，因為它是由谷歌旗下的一家公司于2010年創建的。

WebP的主要優勢是較小的文件大小，這導致了更好的用戶體驗和更快的加載時間。它支持透明度，并且據開發人員稱，無損的WebP文件比PNG文件小26%。

Webp具有很好的兼容性。

圖片

GIF vs WebP

GIF和WebP之間的區別在于它們的質量。WebP以較小的文件大小提供與GIF相同的質量，因此它顯然是更好的選擇。

AVIF

來自維基百科的介紹 - AVIF[8]

圖片

除了WebP在流行度上的崛起之外，還有另一種現代圖像格式旨在取代JPEG、PNG和GIF。AVIF基于AV1視頻格式，其壓縮性能遠遠超過上述任何其他格式。這種開源格式于2019年發布，支持動畫、透明度和多層圖像。

雖然在兼容性方面比其他格式稍遜，但是總體還是可觀的。

圖片

3. 圖片轉換網站

針對圖片的處理，在平時生活中，我們也需要對圖片格式進行轉換，圖片資源的壓縮等操作。

下面，就介紹幾種博主平時用到的網站

adobe[9]

圖片

iloveimg[10]

圖片