網(wǎng)站圖片優(yōu)化的分類有哪些？

時間：2022-05-25 20:30:02 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-25 20:30:02 來源：網(wǎng)絡(luò)營銷

隨著網(wǎng)站數(shù)量的日益增多，網(wǎng)站彼此之間的競爭也越來越激烈了，現(xiàn)在已不再是單純的關(guān)鍵詞排名競爭，用戶體驗也顯的尤為重要，尤其是網(wǎng)站的打開速度。而在網(wǎng)站優(yōu)化中，圖片的大小在一定程度上決定著網(wǎng)站速度，如果圖片優(yōu)化得好，不但可以提高頁面的加載速度，提升網(wǎng)站的用戶體驗，而且還可以通過圖片優(yōu)化來節(jié)省網(wǎng)站的帶寬。

今天我要在億企邦上說的圖片優(yōu)化就是最簡單的圖片優(yōu)化，不是ALT標(biāo)簽、不是圖片原創(chuàng)、也不是圖片位置等圖片排名優(yōu)化，就是圖片大小的優(yōu)化，這一點也是百度站長平臺頁面優(yōu)化建議要求的，那么作為頁面構(gòu)建工程師應(yīng)該采用什么方法來優(yōu)化圖片，既能保證UI的還原度，又使圖片最精簡呢？下面億企邦就個人的經(jīng)驗，來簡單介紹一下網(wǎng)站圖片優(yōu)化方法的分類有哪些？

1、矢量圖和位圖的對比

首先我們先來看看矢量圖和位圖之間有什么區(qū)別呢？具體情況如下圖所示：

（1）、矢量圖

矢量圖：縮放、旋轉(zhuǎn)不失真的圖像格式，不管你離多近去看都看不到圖形的最小單位。存儲的文件較小，但是很難表現(xiàn)色彩層次豐富的逼真圖像效果。你可以理解成完美的圓型、拋物線等形狀。

（2）、位圖

位圖：又叫柵格圖、像素圖，最小單位由像素構(gòu)成，縮放、旋轉(zhuǎn)會失真。在圖像工具將位圖放到最大時能看到每一針的色彩過渡，大多都是在用JPG、GIF、PNG、BMP幾種格式。舉個例子來說，位圖就好比十字繡，遠(yuǎn)看時畫面細(xì)膩多彩，近看時能看到每一針的色彩過渡。如下圖所示：

2、有損壓縮和無損壓縮

（1）、有損壓縮

有損壓縮的特點是保持顏色的逐漸變化，根據(jù)人眼觀察現(xiàn)實世界的突然變化，然后使用附近的顏色通過漸變或其他形式進(jìn)行填充。因為素點的數(shù)據(jù)信息，所以存儲量會降低，還不會影響圖像的還原度質(zhì)會有所下降。JPG是有損壓縮格式，在存儲圖像時會把圖像分解成8*8像素的網(wǎng)格單單獨優(yōu)化。舉個例子：白色小塊為8*8px，黑色底色塊為32*32px，當(dāng)小白塊已經(jīng)不是純白色了，它周圍的小白塊卻很尖銳，如下圖所示：

右上角的白色格子剛好沒有在8*8像素的網(wǎng)格單元中，所以保存時會跟周圍的8*8的網(wǎng)格單元顏色融合，下圖的效果：

這就是平時保存JPG圖片時圖像會模糊的原因，下面是幾張彩色圖的局部對比效果：

（2）、無損壓縮

無損壓縮是利用數(shù)據(jù)的統(tǒng)計冗余進(jìn)行壓縮，真實的記錄圖像上每個像素點的數(shù)據(jù)信息。他的原理是先判斷哪些顏色相同，哪些不同，將相同顏色的數(shù)據(jù)信息進(jìn)行壓縮記錄，把不同的數(shù)據(jù)另外保存，多次存儲后圖片的品質(zhì)不會下降。

為什么無損壓縮的圖也會有失真的？因為他的壓縮原理是通過索引圖像上相同區(qū)域的顏色進(jìn)行壓縮和還原，也就是說只有在圖像的顏色數(shù)量小于我們可以保存的顏色數(shù)量時，才能真實的記錄和還原圖像，否則就會丟失一些圖像信息。例如PNG-8和GIF格式：

而PNG24為真彩色所以顏色表為空，不會失真。如下圖所示：

3、PNG、GIF、JPG圖片對比

在我們進(jìn)行圖像優(yōu)化技術(shù)前，需要學(xué)習(xí)有關(guān)的圖片格式的一些技術(shù)細(xì)節(jié)。每個圖形格式都有自己的優(yōu)勢和弱點，知道他們會使你得到更好的視覺質(zhì)量和壓縮品質(zhì)。對于PNG、GIF和JPG圖片的壓縮情況及數(shù)據(jù)對比（關(guān)于這3類圖片的優(yōu)化技巧方法，大家可以通過億企邦《JPG、PNG和GIF圖片的基本原理及優(yōu)化方法》來詳細(xì)了解），為了能直觀的表達(dá)出三種之間的區(qū)別，我直接列了一個表，如下圖所示：

（1）、PNG-8的高壓縮比

切圖時，有時選擇 PNG-8 可以獲得更高的壓縮比。注意，是PNG-8，不是PNG-24。不過有些情況下還是GIF或JPG會小一些，需要根據(jù)實際情況調(diào)試以選擇最佳方案。

（2）、PNG-24的優(yōu)化技巧

PNG-24優(yōu)化時可以使用ps里的色調(diào)分離，減小大小，然后再用工具進(jìn)行優(yōu)化一下。

拿微博左側(cè)導(dǎo)航的小icon為例，壓縮后的圖像大小對比如下圖：

PS色調(diào)分離的操作方法如下：

對比大小及效果展示：

使用工具優(yōu)化后，還能夠小一些：

請注意，上圖中原本是GIF格式的圖片被改為了PNG格式。所以，在使用工具優(yōu)化時后需要再查看一下文件格式是否被更改，避免漏過某些圖片沒有優(yōu)化。

4、圖型類和照片類

另外對于圖像格式的選擇，我們還需要考慮圖片的使用場景或功能，概括為兩類：圖型類和照片類。

（1）、圖型類

圖形符號，具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性，顏色數(shù)量較少。一般可以使用PNG格式或者GIF格式。優(yōu)化時可采用PNG格式為PNG8或者PNG24，品質(zhì)為32，如果色彩有損失可采用品質(zhì)64或者128。例如：首頁左導(dǎo)的圖標(biāo)、feed區(qū)圖標(biāo)、勛章圖、表情動畫都屬于圖形。

（2）、照片類

照片通常含有百萬數(shù)量級的顏色，包括平滑的顏色過度和漸變，如果是圖形較為復(fù)雜，圖中有時會出現(xiàn)真實的照片。照片類一般用PNG和JPG，可以根據(jù)圖片色彩的豐富程度而定。PNG的品質(zhì)一般要到128。JPG的品質(zhì)一般要在70-80之間，以噪點的程度確定。例如：皮膚背景圖、發(fā)布器、按鈕背景、發(fā)布器下方的tips、右側(cè)廣告、用戶頭像、用戶發(fā)布的圖片。

5、通用類和隨機(jī)類

按照首頁圖片出現(xiàn)的頻率分成：通用類、隨機(jī)類

通用類：每個人首頁都會看到，圖標(biāo)、按鈕、小背景。

例如，頂部托盤圖標(biāo)、左導(dǎo)圖標(biāo)、feed區(qū)圖標(biāo)、發(fā)布器圖標(biāo)、身份圖標(biāo)、操作類圖標(biāo)、狀態(tài)類圖標(biāo)、按鈕。盡可能的采用PNG的格式保存，文件會相對來說較小一些。

下圖為微博的按鈕和左側(cè)導(dǎo)航icon小圖的，使用GIF和PNG格式的大小對比：

隨機(jī)類：根據(jù)自己定義和發(fā)布的內(nèi)容而定。

6、表情GIF

可以使用FireWorks或者ImageReady，建議使用ImageReady。

最好是手動一張張的調(diào)整，因為這些表情圖的色彩值都比較少，如果使用比較大的顏色時會存儲量較大。

另外，批處理的話也是需要一個文件夾一個文件夾去處理，表情的文件夾太多了，基本上批處理還是很慢。批處理如果是使用FireWorks的話，有的動畫會出現(xiàn)變快或者是缺邊的情況。

手動處理時，根據(jù)索引色的多少來存，一般來說4-128索引色存儲。

7、換膚類圖片

采用JPG格式或者PNG格式。

皮膚的主要背景圖中如含有真實的照片或者文字，可采用JPG格式，為了保證更接近設(shè)計圖需采用85以上的品質(zhì)壓縮圖片。如果色彩跨度不大的背景圖片，可采用PNG格式。

8、勛章類

目前有GIF和PNG兩種格式，GIF的是小圖、PNG的是中圖和大圖。品質(zhì)選128即可。

這個目錄批處理比較快。因為都是在同一個文件夾里。但是手動的話會更小一點。

9、各種廣告

發(fā)布器下方tips、右側(cè)廣告、底部廣告。采用JPG格式或者PNG格式。

10、用戶相關(guān)圖

頭像、用戶發(fā)布的圖這個需要在后臺控制壓縮品質(zhì)。采用JPG格式或者PNG格式。

億企邦點評：

當(dāng)然，優(yōu)化圖片大小的方法還有很多，但是我們始終要注意，不要因為追求速度的極致影響了圖片的質(zhì)量，我們說的圖片大小優(yōu)化永遠(yuǎn)是建立在既能保證圖片質(zhì)量不影響頁面UI設(shè)計，又能使圖片大小最小的基礎(chǔ)上。速度快了質(zhì)量差了同樣是傷害了用戶體驗，不要顧此失彼，盲目的壓縮大小，同時也不要讓圖片拖網(wǎng)站速度的后退，在保證UI的同時一定要注重圖片大小優(yōu)化。