觸屏版
全國服務(wù)熱線:0571-87205688
登錄
注冊
客戶中心
關(guān)注云客
網(wǎng)站的優(yōu)化不是說就是更新文章,加點外鏈啥的,其實還包括圖片優(yōu)化,為什么圖片要進(jìn)行優(yōu)化呢?這要是圖片太大會影響到網(wǎng)站的打開速度,換言之,圖片的大小在一定程度上決定了網(wǎng)站速度,如果圖片優(yōu)化的好就可以提升頁面加載的速度,提高用戶體驗度,下面小編就給大家講講。
1、矢量圖和位圖的對比
(1)矢量圖
矢量圖:縮放、旋轉(zhuǎn)不失真的圖像格式,不管你離多近去看都看不到圖形的最小單位。存儲的文件較小,但是很難表現(xiàn)色彩層次豐富的逼真圖像效果。你可以理解成完美的圓型、拋物線等形狀。
(2)位圖
位圖:又叫柵格圖、像素圖,最小單位由像素構(gòu)成,縮放、旋轉(zhuǎn)會失真。在圖像工具將位圖放到最大時能看到每一針的色彩過渡,大多都是在用JPG、GIF、BMP、PNG幾種格式。舉個例子來說,位圖就好比十字繡,遠(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)不是純白色了,它周圍的小白塊卻很尖銳。
(2)無損壓縮
無損壓縮是利用數(shù)據(jù)的統(tǒng)計冗余進(jìn)行壓縮,真實的記錄圖像上每個像素點的數(shù)據(jù)信息。他的原理是先判斷哪些顏色相同,哪些不同,將相同顏色的數(shù)據(jù)信息進(jìn)行壓縮記錄,把不同的數(shù)據(jù)另外保存,多次存儲后圖片的品質(zhì)不會下降。
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ù)對比,為了能直觀的表達(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)化一下。
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ā)布的圖片。
評論(0人參與,0條評論)
發(fā)布評論
最新評論