圖片優(yōu)化做的好也能帶來(lái)不菲的流量

　　圖片優(yōu)化做的好也能帶來(lái)不菲的流量，圖文并茂可以說(shuō)是所有站長(zhǎng)默認(rèn)的創(chuàng)作方式，然而圖片過(guò)大對(duì)頁(yè)面的打開速度影響是很大的，由此才需要我們也給圖片做優(yōu)化。圖片優(yōu)化不僅僅是為了吸引潛在消費(fèi)者，另一個(gè)目的就是增加圖片搜索所帶來(lái)的流量，又或是提升網(wǎng)站加載速度，圖片優(yōu)化圖片優(yōu)化起著至關(guān)重要的作用。說(shuō)到圖片優(yōu)化，最常用的就是給圖片加alt屬性，圖片壓縮等，這些只是比較粗線條的優(yōu)化，想要做好圖片優(yōu)化只是這樣是不夠的，遠(yuǎn)遠(yuǎn)沒(méi)有這么簡(jiǎn)單，這只是開始。

　　要做圖片優(yōu)化，首先我們需要先給圖片減減肥。

　　我們先來(lái)看看這些數(shù)據(jù)，大部分PC用戶不會(huì)等待超過(guò)3秒的網(wǎng)站加載速度，而在移動(dòng)設(shè)備上則不會(huì)等待超過(guò)5秒鐘，5秒還沒(méi)有加載出來(lái)，結(jié)果就是用戶關(guān)掉頁(yè)面，還會(huì)給用戶留下不好的印象。

　　亞馬遜發(fā)現(xiàn)如果他們的網(wǎng)站加載速度慢了1秒鐘，他們一年將損失16億美元。

　　搜索引擎已經(jīng)將網(wǎng)站加載速度列入了排名算法之中，如果你網(wǎng)站有大量的圖片致使網(wǎng)站非常臃腫，將嚴(yán)重影響網(wǎng)站加載速度，如果超過(guò)10秒鐘，那你等著和你的客戶說(shuō)拜拜吧。

　　有些理論說(shuō)圖片的大小應(yīng)該保持在70kb以下，這個(gè)到?jīng)]有明確的規(guī)格，有的時(shí)候?yàn)榱吮ＷC圖片的清晰度，圖片稍微大點(diǎn)是在所難免的。個(gè)人覺(jué)得，不要用一個(gè)標(biāo)準(zhǔn)去限制每一張圖片的大小，我們的最終目的只是保證在不影響清晰度的情況下，盡可能的降低圖片大小來(lái)保證頁(yè)面的打開速度。

　　不同的圖片格式對(duì)圖片優(yōu)化也是有影響的。

　　目前最流行的三種圖片格式就是：JPEG、GIF、PNG。

　　JPEG (或者說(shuō) .jpg) 是最常用的圖片壓縮格式，支持最高級(jí)別的壓縮。通常，對(duì)于顯示要求比較高的圖片來(lái)說(shuō)，JPEG格式展示的圖片效果較GIF和PNG有明顯的優(yōu)勢(shì)。

　　GIF (.gif) 的圖片顯示質(zhì)量要比JPEG遜色很多，通常用作非常簡(jiǎn)單的圖片展示，比如素材或者裝飾性圖案，gif也可以用來(lái)制作動(dòng)畫。gif不適合用作高顯示質(zhì)量的圖片。

　　PNG(.png)圖片是比GIF更好的選擇，因?yàn)镻NG圖片支持的色彩要比GIF多。和JPEG一樣，PNG反復(fù)保存也不會(huì)影響圖片質(zhì)量，而且對(duì)于小圖來(lái)說(shuō)，PNG占用的體積極小，PNG完美支持透明背景，一般logo或一般裝飾性圖案都會(huì)選擇PNG格式。注意PNG-24圖片體積是PNG-8版本的3倍，對(duì)待PNG你要十分小心，看仔細(xì)了。

　　如下是一個(gè)例子，通過(guò)對(duì)比相同體積下(都是24kb)不同格式的圖片

　　可以很清楚的看到，JPEG顯然是獲勝者，在同樣的體積下，GIF和PNG必須以犧牲圖片質(zhì)量為代價(jià)。不過(guò)話又說(shuō)回來(lái)，對(duì)于非常小的圖片來(lái)說(shuō)(比如小于5K)，PNG是比較好的選擇，相比GIF，PNG可以在體積很小的情況下依然不會(huì)讓圖片失真。

　　對(duì)于那些對(duì)圖片質(zhì)量要求極高的站長(zhǎng)來(lái)說(shuō)，JPEG毫無(wú)疑問(wèn)是首選，絕對(duì)不要用GIF來(lái)當(dāng)做產(chǎn)品大圖。不然的話文件尺寸會(huì)非常大不說(shuō)，也沒(méi)有很好的辦法去壓縮它(一壓縮就失真)?？梢杂肎IFs做動(dòng)畫或是裝飾性小圖。

　　PNG可以作為JPEG和GIF的替代，如果你想把產(chǎn)品圖片做成PNG格式，盡量用PNG-8而非PNG-24。PNG同時(shí)也擅長(zhǎng)處理簡(jiǎn)單地裝飾圖而只需很小的體積，PNG將會(huì)變得越來(lái)越流行。當(dāng)然了，大部分的圖片編輯軟件可以轉(zhuǎn)換以上三種形式的圖片格式。

　　如果你希望提供更大的圖片讓用戶欣賞，不建議將大圖直接放在網(wǎng)頁(yè)上然后用css將圖片縮小，雖然看上去圖片變小了，但是圖片的真實(shí)尺寸還是沒(méi)有變的，這會(huì)嚴(yán)重影響頁(yè)面加載速度。相反，你可以先放一張較小的圖片，然后提供查看大圖的功能，不管是點(diǎn)擊彈出大圖還是另外新頁(yè)面顯示，都是極好的。

　　還有一些人會(huì)把一張大圖切成一張張的小圖做拼接，這樣做雖然可以讓圖片快速顯示，但這樣做會(huì)增加服務(wù)器的請(qǐng)求數(shù)，從而會(huì)影響網(wǎng)頁(yè)加載速度。所以，如果對(duì)圖片的要求非常高的話，建議為圖片專門配置專門的服務(wù)器。

　　首頁(yè)顯示縮略圖是個(gè)不錯(cuò)的選擇。

　　盡可能壓縮縮略圖體積，縮略圖的圖片不要過(guò)分追求顯示質(zhì)量，當(dāng)用戶點(diǎn)擊到下一層詳情頁(yè)面的時(shí)候再給他一張高質(zhì)量的圖片。

　　不要為縮略圖設(shè)置alt標(biāo)簽，我們并不希望搜索引擎索引的是縮略圖而應(yīng)是詳情頁(yè)的高質(zhì)量原圖。

　　背景圖、按鈕圖，邊框圖等都可算作裝飾圖，作為一名SEOer，你需要仔細(xì)去檢查這些圖片的體積是否過(guò)大，是否會(huì)影響網(wǎng)站載入速度。

　　如果只是一些邊框類的、或是簡(jiǎn)單的樣式圖片，使用PNG-8或者GIF，可以創(chuàng)建非常好看的圖片并且只占幾百byte的體積。如果可能的話，盡量使用css來(lái)創(chuàng)建一些特殊效果，而非圖片。

　　不建議為網(wǎng)站設(shè)置背景圖片，如果一定要有的話，在保證清晰度的前提下最大程度去壓縮體積。你還可以把背景圖當(dāng)中鏤空或保持透明來(lái)壓縮體積。