在杭州網(wǎng)站建設(shè)環(huán)節(jié)中的優(yōu)化工作中, 圖片優(yōu)化得好, 可以提高頁面的加載速度,對(duì)網(wǎng)站的用戶體驗(yàn)帶來好處,而且還可以通過圖片優(yōu)化來節(jié)省網(wǎng)站的帶寬。 下面由杭州共榮網(wǎng)絡(luò)的技術(shù)總監(jiān)來和大家分享一下這方面的內(nèi)容。
1. 矢量圖與位圖。
矢量圖:縮放、旋轉(zhuǎn)不失真的圖像格式,不管你離多近去看都看不到圖形的最小單位。存儲(chǔ)的文件較小,但是很難表現(xiàn)色彩層次豐富的逼真圖像效果。你可以理解成完美的圓型、拋物線等形狀。
位圖:又叫柵格圖、像素圖,最小單位由像素構(gòu)成,縮放、旋轉(zhuǎn)會(huì)失真。舉個(gè)例子來說,位圖就好比十字繡,遠(yuǎn)看時(shí)畫面細(xì)膩多彩,近看時(shí)能看到每一針的色彩過渡。
2.有損壓縮、無損壓縮。
有損壓縮:特點(diǎn)是保持顏色的逐漸變化,根據(jù)人眼觀察現(xiàn)實(shí)世界的 突然變化, 然后使用附近的顏色通過漸變或其他形式進(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)不是純白色了,它周圍的小白塊卻很尖銳。
無損壓縮:利用數(shù)據(jù)的統(tǒng)計(jì)冗余進(jìn)行壓縮,真實(shí)的記錄圖像上每個(gè)像素點(diǎn)的數(shù)據(jù)信息。他的原理是先判斷哪些顏色相同,哪些不同,將相同顏色的數(shù)據(jù)信息進(jìn)行壓縮記錄,把不同的數(shù)據(jù)另外保存。多次存儲(chǔ)后圖片的品質(zhì)不會(huì)下降。
為什么無損壓縮的圖也會(huì)有失真的?因?yàn)樗膲嚎s原理是通過索引圖像上相同區(qū)域的顏色進(jìn)行壓縮和還原,也就是說只有在圖像的顏色數(shù)量小于我們可以保存的顏色數(shù)量時(shí),才能真實(shí)的記錄和還原圖像,否則就會(huì)丟失一些圖像信息。
3. PNG 、GIF 、JPG圖片對(duì)比。
在我們進(jìn)行圖像優(yōu)化技術(shù)前,需要學(xué)習(xí)有關(guān)的圖片格式的一些技術(shù)細(xì)節(jié)。每個(gè)圖形格式都有自己的優(yōu)勢和弱點(diǎn),知道他們會(huì)使你得到更好的視覺質(zhì)量和壓縮品質(zhì)。
網(wǎng)頁圖片優(yōu)化是網(wǎng)頁加速中非常重要的一步,對(duì)圖片進(jìn)行壓縮,不僅能夠節(jié)約帶寬,并且加快網(wǎng)頁的速度。我們常用的圖片編輯軟件都可以在壓縮圖片。
PNG-8 的高壓縮比
切圖時(shí),有時(shí)選擇 PNG-8 可以獲得更高的壓縮比。注意,是 PNG-8,不是 PNG-24。不過有些情況下還是 GIF 或 JPG 會(huì)小一些,需要根據(jù)實(shí)際情況調(diào)試以選擇最佳方案。
以上是由杭州公榮網(wǎng)絡(luò)科技首發(fā)轉(zhuǎn)載請(qǐng)注明,謝謝! 杭州網(wǎng)站建設(shè)、杭州網(wǎng)站制作、杭州網(wǎng)頁設(shè)計(jì)、杭州網(wǎng)站設(shè)計(jì)服務(wù)熱線:13675891327 QQ:404011662