前言

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

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

圖片

而我們今天不是將如何在項(xiàng)目中優(yōu)化圖片資源，而是像大家科普一下「那些不為人知的圖片知識(shí)」。下面的內(nèi)容，我們都是選擇我們平時(shí)開發(fā)中常見的知識(shí)點(diǎn)，針對(duì)一些特別拗口的東西，我們就不介紹了。

好了，天不早了，干點(diǎn)正事哇。

我們能所學(xué)到的知識(shí)點(diǎn)

1. 柵格圖（位圖） vs 矢量圖
2. 位圖常見格式
3. 圖片轉(zhuǎn)換網(wǎng)站

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

什么是柵格圖？

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

圖片

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

下面的笑臉圖案就是一個(gè)柵格圖。當(dāng)放大時(shí)，單個(gè)像素會(huì)呈現(xiàn)為正方形。進(jìn)一步放大，可以分析

每個(gè)像素，它們的顏色是通過紅、綠和藍(lán)的數(shù)值組合構(gòu)成的。

圖片

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

其中，柵格圖其實(shí)還有一個(gè)大家耳熟能詳?shù)拿?- 位圖(Bitmap Graphics)。

圖片

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

圖片

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

正因?yàn)闁鸥駡D是基于像素的，它能夠顯示讓人嘆為觀止的視覺表現(xiàn)，但也正是這一點(diǎn)導(dǎo)致它們在可擴(kuò)展性、網(wǎng)絡(luò)性能等方面的能力欠佳。

任何位圖圖形中的像素?cái)?shù)量都是固定的，這意味著任何嘗試調(diào)整大小/放大都將導(dǎo)致失真和/或模糊的視覺效果，因?yàn)橄到y(tǒng)無法憑空創(chuàng)建額外的像素。

矢量圖

我們繼續(xù)從維基百科中尋找關(guān)于矢量圖[2]的信息。

圖片

從上面的信息，我們可以得知。矢量圖是使用「數(shù)學(xué)公式」生成的，這些公式轉(zhuǎn)化為在網(wǎng)格上對(duì)齊的點(diǎn)、線和曲線。

?

矢量圖不是基于像素的，這意味著在調(diào)整大小時(shí)不受限制。它們是分辨率獨(dú)立的 - 我們可以調(diào)整矢量圖形的大小而不會(huì)丟失質(zhì)量或出現(xiàn)視覺偽影。

?

矢量圖可以幫助我們創(chuàng)建性能友好的 UI 設(shè)計(jì)元素、可以無限縮放，或者以極低成本制作的快速加載的解釋性動(dòng)畫?；谶@些特性，我們?nèi)绻紤]網(wǎng)絡(luò)性能時(shí)并且圖像的還原度不是很高的話，我們一般首選SVG(可縮放的矢量圖)。

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

位圖和矢量圖如何抉擇

那么說了這么多，我們該在項(xiàng)目中如何抉擇使用哪個(gè)格式的圖片信息進(jìn)行圖片信息的展示呢？

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

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

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

2. 位圖常見格式

上節(jié)中我們從內(nèi)部實(shí)現(xiàn)原理角度來簡單介紹了位圖和矢量圖。這節(jié)我們來位圖中常見的格式(Gif/Png/JPeg/Webp)，并且每種格式各自的優(yōu)缺點(diǎn)和對(duì)應(yīng)的適用場景。

常見位圖格式及特性支持

色彩支持

圖片

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

透明度

圖片

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

是否支持動(dòng)畫

圖片

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

文件初始大小和壓縮性能

圖片

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

兼容性

圖片

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

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

GIF

我們繼續(xù)從維基百科中尋找關(guān)于-GIF[3]的介紹。

圖片

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

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

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

動(dòng)態(tài)GIF是將圖像或幀組合成單個(gè)文件，顯示為短視頻或動(dòng)畫。

其實(shí)，針對(duì)GIF還有很多操作和優(yōu)化空間。例如

• 分辨率
• 幀率
• 速度/持續(xù)時(shí)間
• 顏色

如果對(duì)這塊感興趣，可以參考gif 優(yōu)化方案[4]

PNG

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

圖片

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

這種格式從90年代開始存在，它是「為了替代GIF而創(chuàng)建」的，因?yàn)镚IF涉及版權(quán)費(fèi)用。它已成為當(dāng)今網(wǎng)絡(luò)上最常見的圖像格式之一。

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

PNG的主要類型如下

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

GIF VS PNG

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

所以，我們下面的每介紹一個(gè)圖片格式，都會(huì)以GIF為標(biāo)準(zhǔn)進(jìn)行對(duì)比。

GIF和PNG之間的相似之處是功能性的，因?yàn)镻NG是設(shè)計(jì)來取代GIF的。GIF和PNG都是由二維顏色點(diǎn)陣（即像素）組成的柵格格式。

PNG相對(duì)于GIF的以下3個(gè)主要優(yōu)勢：

1. Alpha通道：PNG的第一個(gè)優(yōu)勢是Alpha通道，提供可變透明度。在PNG中，每個(gè)像素可以具有不同級(jí)別的透明度。
2. 伽馬校正：PNG的第二個(gè)優(yōu)勢是伽馬校正，使得跨平臺(tái)對(duì)比度增強(qiáng)的控制成為可能。
3. 漸進(jìn)式圖像呈現(xiàn)：PNG的第三個(gè)優(yōu)勢與漸進(jìn)式圖像呈現(xiàn)有關(guān)；雖然GIF只有四個(gè)通道，但PNG具有兩維交錯(cuò)，七個(gè)通道，使其在視覺上更加吸引人。此外，與相似的GIF相比，PNG可以實(shí)現(xiàn)高達(dá)25%的更好壓縮。

在動(dòng)畫領(lǐng)域，GIF相比PNG有更好的展示效果，所以優(yōu)先選擇GIF格式。PNG旨在成為單一圖像格式，并不用于創(chuàng)建動(dòng)畫圖形。盡管有一個(gè)名為MNG的支持動(dòng)畫的PNG版本，但由于實(shí)際原因，這種格式并不被廣泛使用。

然而，還有一種較新的、非官方的PNG擴(kuò)展稱為APNG，它是為了動(dòng)畫目的而創(chuàng)建的。

APNG

APNG（Animated Portable Network Graphics，動(dòng)態(tài)便攜式網(wǎng)絡(luò)圖形）是一種柵格圖形格式，也是PNG的一個(gè)非官方擴(kuò)展。APNG具有無限幀率、非常好的壓縮率和流暢的外觀。

這項(xiàng)規(guī)范是在2004年創(chuàng)建的，旨在為動(dòng)態(tài)PNG文件提供支持。

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

圖片

APNG可以被視為GIF的替代品，因?yàn)樗峁┝祟愃频目梢暬Ч?/p>

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

JPEG

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

圖片

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

JPEG具有「有損壓縮」，因此每次重新保存和導(dǎo)出圖像時(shí)，圖像的質(zhì)量都會(huì)降低，因?yàn)樵紨?shù)據(jù)在此過程中未被保留。

我們可以自由選擇壓縮的百分比，從0到100%。大多數(shù)圖形專業(yè)人員選擇大約60%-70%，因?yàn)樵谶@個(gè)壓縮級(jí)別下圖像看起來仍然相當(dāng)好。它不支持透明度或動(dòng)畫。

GIF vs JPEG

GIF和JPEG之間的區(qū)別在于，對(duì)于具有有限色彩調(diào)色板的計(jì)算機(jī)圖形（如圖標(biāo)、卡通圖片），GIF是更好的選擇，而JPEG是更適合照片和色彩豐富的圖像，并且在打印時(shí)也表現(xiàn)良好。

在進(jìn)行GIF與JPEG比較時(shí)，圖像質(zhì)量和文件大小是考慮的兩個(gè)主要因素。

如前所述，GIF和JPEG之間的一個(gè)顯著區(qū)別是JPEG在壓縮時(shí)會(huì)丟失數(shù)據(jù)，而GIF使用的是無損壓縮算法。

WebP

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

圖片

WebP是一種用于網(wǎng)絡(luò)的圖像格式，旨在顯示高質(zhì)量但文件大小較小的圖像，以改善加載時(shí)間。它可以根據(jù)我們的需要進(jìn)行有損或無損壓縮。WebP格式相對(duì)較新，因?yàn)樗怯晒雀杵煜碌囊患夜居?010年創(chuàng)建的。

WebP的主要優(yōu)勢是較小的文件大小，這導(dǎo)致了更好的用戶體驗(yàn)和更快的加載時(shí)間。它支持透明度，并且據(jù)開發(fā)人員稱，無損的WebP文件比PNG文件小26%。

Webp具有很好的兼容性。

圖片

GIF vs WebP

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

AVIF

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

圖片

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

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

圖片

3. 圖片轉(zhuǎn)換網(wǎng)站

針對(duì)圖片的處理，在平時(shí)生活中，我們也需要對(duì)圖片格式進(jìn)行轉(zhuǎn)換，圖片資源的壓縮等操作。

下面，就介紹幾種博主平時(shí)用到的網(wǎng)站

adobe[9]

圖片

iloveimg[10]

圖片