在網(wǎng)站優(yōu)化中，如果圖片優(yōu)化得好，不但可以提高頁(yè)面的加載速度，提升網(wǎng)站的用戶體驗(yàn)，而且還可以通過(guò)圖片優(yōu)化來(lái)節(jié)省網(wǎng)站的帶寬。那么作為頁(yè)面構(gòu)建工程師應(yīng)該采用什么方法來(lái)優(yōu)化圖片，既能保證UI的還原度，又使圖片最精簡(jiǎn)呢？下面我就個(gè)人經(jīng)驗(yàn)，來(lái)簡(jiǎn)單介紹一下圖片優(yōu)化的方法，首先我們了解一些圖片方面的知識(shí)： 

 1. 矢量圖與位圖。

•  矢量圖：縮放、旋轉(zhuǎn)不失真的圖像格式，不管你離多近去看都看不到圖形的最小單位。存儲(chǔ)的文件較小，但是很難表現(xiàn)色彩層次豐富的逼真圖像效果。你可以理解成完美的圓型、拋物線等形狀。
•  位圖：又叫柵格圖、像素圖，最小單位由像素構(gòu)成，縮放、旋轉(zhuǎn)會(huì)失真。舉個(gè)例子來(lái)說(shuō)，位圖就好比十字繡，遠(yuǎn)看時(shí)畫面細(xì)膩多彩，近看時(shí)能看到每一針的色彩過(guò)渡。

十字繡                                                                                    十字繡放大

下表為矢量圖和位圖的對(duì)比：

2.有損壓縮、無(wú)損壓縮。

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

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

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

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

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

而PNG24為真彩色所以顏色表為空，不會(huì)失真。

標(biāo)簽： 圖片優(yōu)化 用戶體驗(yàn) 優(yōu)化方法 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。