如果你運(yùn)營在線商城又或是大型電商網(wǎng)站，圖片優(yōu)化是你必須要掌握的。不僅僅是從吸引潛在消費(fèi)者，還是增加圖片搜索流量，又或是提升網(wǎng)站加載速度，圖片優(yōu)化扮演者非常關(guān)鍵的角色。但說到圖片優(yōu)化，很多傳統(tǒng)意義上的SEO人會(huì)說，圖片要加alt標(biāo)簽，圖片要壓縮…這樣的粗線條顯然是不行的。今天我就和大家深入分享一下圖片優(yōu)化必須了解的8個(gè)知識(shí)點(diǎn)。

我們很容易使用照相機(jī)默認(rèn)的圖片編號(hào)當(dāng)做圖片們的命名，這樣的話對(duì)于搜索引擎來說，可能就沒有辦法辨識(shí)圖片的內(nèi)容，從而我們就失去了從圖片搜索那塊兒帶來的流量，這是非?？上У?，特別是當(dāng)你的產(chǎn)品有數(shù)以萬計(jì)的話。通常我們可以制定結(jié)構(gòu)化數(shù)據(jù)規(guī)則讓技術(shù)人員設(shè)計(jì)程序批量替換圖片的alt屬性，而無需我們手工操作。

讓我們拿一張圖來說事兒，我個(gè)人比較喜歡的手表牌子——AP，

(圖片來源)

點(diǎn)擊上面的圖片來源可以看到這款表的具體型號(hào)，為“愛彼-皇家橡樹離岸型系列 26378IO.OO 男士機(jī)械表”，這個(gè)時(shí)候我們就可以思考，訪客的搜索習(xí)慣是什么?會(huì)搜索哪些關(guān)鍵詞?在這個(gè)例子里面，AP手表愛好者會(huì)搜索如下短語：

ap皇家橡樹

愛彼皇家橡樹

愛彼橡樹離岸

愛彼離岸

當(dāng)然最好可以再看一下谷歌統(tǒng)計(jì)里面的關(guān)鍵詞數(shù)據(jù)，看看有無遺漏。基本上來說，訪客更傾向于搜索品牌詞+產(chǎn)品系列的詞組組合和變化，那么alt標(biāo)簽的結(jié)構(gòu)化規(guī)則就出來了，可以寫為：alt=”{品牌詞}{產(chǎn)品系列}-{產(chǎn)品型號(hào)}”，即為“愛彼AP-皇家橡樹離岸系列-26378IO.OO”，對(duì)于產(chǎn)品圖片的描述來說，不建議寫過多冗余內(nèi)容，保持?jǐn)?shù)據(jù)結(jié)構(gòu)化，做到關(guān)鍵詞辨識(shí)度高，關(guān)鍵詞信息豐富就可以了，千萬不要做關(guān)鍵詞堆積。

基本上拍攝產(chǎn)品照片不會(huì)只拍一個(gè)角度，我們回到之前的ap手表，訪客肯定不會(huì)滿足于只有一張正面照，多角度的去展示手表的美才能更好的吸引訪客在你的網(wǎng)站上停留更多的時(shí)間，才可以去激發(fā)起他們的購買欲望，所以自然需要拍攝手表的正面，手表的后蓋，手表的側(cè)面，手表表盤的細(xì)節(jié)等等，這個(gè)時(shí)候如何寫alt標(biāo)簽?

最好的方法也是保持alt標(biāo)簽的結(jié)構(gòu)化，繼承主圖的格式，千萬不要去給這些圖片一個(gè)全新的寫法，正確的寫法如下，

愛彼AP-皇家橡樹離岸系列-26378IO.OO-正面

愛彼AP-皇家橡樹離岸系列-26378IO.OO-后蓋

愛彼AP-皇家橡樹離岸系列-26378IO.OO-側(cè)面

愛彼AP-皇家橡樹離岸系列-26378IO.OO-表盤

保持主干“愛彼AP-皇家橡樹離岸系列-26378IO.OO”不變，可以讓搜索引擎充分確認(rèn)當(dāng)前圖片系列或是頁面就是關(guān)于那個(gè)關(guān)鍵詞，從而讓這些圖片被圖片搜索引擎搜索到的幾率大大增加。單槍匹馬一定倒下。

如果你希望提供更大的圖片讓用戶爽一下，這個(gè)思路很好，但要非常小心，不建議將大圖直接放在網(wǎng)頁上然后用css將圖片縮小，雖然你看上去圖片變小了，但是圖片的尺寸還是實(shí)實(shí)在在存在的，這會(huì)影響加載速度。相反，你可以先放一張較小的圖片，然后提供查看大圖功能的選項(xiàng)，不管是點(diǎn)擊彈出大圖還是另外新頁面顯示，都o(jì)k。

當(dāng)然，還有一些人會(huì)把大圖切成一張張小圖做拼接，這樣做可以讓圖片快速顯示，但同時(shí)一張圖片切成小圖之后，服務(wù)器的請(qǐng)求數(shù)會(huì)增加，從而會(huì)影響網(wǎng)頁加載速度。所以，如果圖片的體積實(shí)在過大的話，建議為圖片專門配置新服務(wù)器。對(duì)于外置服務(wù)器的選擇，目前我個(gè)人比較推薦又拍，只是需要你花一點(diǎn)銀子。

先看看這些數(shù)據(jù)，

大部分臺(tái)式機(jī)或是筆記本用戶不會(huì)等待超過3秒的網(wǎng)站加載速度

…在移動(dòng)設(shè)備上不會(huì)等待超過5秒鐘

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

搜索引擎將網(wǎng)站加載速度列入了排名算法之中

如果你大量的網(wǎng)站圖片非常臃腫，這將嚴(yán)重影響網(wǎng)站加載速度，如果超過10秒鐘，那你等著和你的客戶說byebye把。

所以該怎么做?這篇文章或許能幫助你。

圖片文件應(yīng)該多大?

有些理論說圖片的大小應(yīng)該保持在70kb以下，不過這個(gè)有時(shí)候是很困難的，特別對(duì)于大圖片來說幾乎是不可能的，除非你不求清晰度。我個(gè)人倒是覺得，不要用一個(gè)標(biāo)準(zhǔn)去限制每一張圖片的大小，關(guān)鍵在于，我們有沒有去執(zhí)行，有沒有看到我這篇博文后去真正壓縮圖片，這才是關(guān)鍵。

目前有三種非常流行的圖片格式，他們是JPEG，GIF，和PNG。讓我們來看看他們有何不同，

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

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

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

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

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

當(dāng)我們選擇圖片格式時(shí)，如下一些tips供大家參考，

對(duì)于電商網(wǎng)站來說，產(chǎn)品圖片的質(zhì)量要求極高，JPEGs毫無疑問是首選，他們有相對(duì)高質(zhì)量的圖片顯示且不會(huì)占用太大的體積。

絕對(duì)不要用GIFs來當(dāng)做產(chǎn)品大圖。不然的話文件尺寸會(huì)非常大，也沒有很好的辦法去壓縮它(一壓縮就失真)?？梢杂肎IFs做動(dòng)畫或是裝飾性小圖。

PNG可以作為JPEGs和GIFS的替代，如果你想把產(chǎn)品圖片做成PNG格式，盡量用PNG-8而非PNG-24。PNGs同時(shí)也擅長處理簡單地裝飾圖而只需很小的體積，PNG將會(huì)變得越來越流行。

順便提一句，大部分的圖片編輯軟件可以轉(zhuǎn)換以上三種形式的圖片格式。

大部分電商網(wǎng)站都有縮略圖展示，它可以讓訪客迅速的掃描到盡可能多的商品樣式而不需要再去點(diǎn)擊一個(gè)額外的頁面。

縮略圖很棒，但是要小心，他們可能是你網(wǎng)站的速度殺手。他們通常會(huì)出現(xiàn)在關(guān)鍵的購物流程之中，若因此影響了購物流程的流暢性，額… 那你就可能又損失了一個(gè)顧客。關(guān)于縮略圖，我個(gè)人有如下兩點(diǎn)建議：

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

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

如果你的網(wǎng)站用JS做圖片效果來更好的提升用戶體驗(yàn)，你是否擔(dān)心圖片是否還能收錄?當(dāng)然通常來說蜘蛛是不會(huì)爬取不顯示在源代碼里面的圖片文件的，但是谷歌對(duì)于這點(diǎn)已經(jīng)很有經(jīng)驗(yàn)了，通過圖片地圖的提交，即把圖片地址一個(gè)個(gè)老老實(shí)實(shí)地列出來，搜索引擎就可以爬行了。

對(duì)于圖片地圖，我就不多說了，因?yàn)楣雀栌性S多指導(dǎo)文檔來幫助你提升圖片的搜索排名，看這里。

非產(chǎn)品類的圖片比如背景圖、按鈕圖，邊框圖等都可算作裝飾圖，作為一個(gè)優(yōu)化者，你需要仔細(xì)去檢查這些圖片的體積是否過大，是否會(huì)影響網(wǎng)站載入速度。

這里有一些關(guān)于如何壓縮裝飾圖的建議：

如果只是一些邊框類的、或是簡單的樣式圖片，使用PNG-8或者GIFs，你可以創(chuàng)建非常好看的圖片并且只占幾百bytes的體積。

如果可能的話，盡量使用css來創(chuàng)建一些特殊效果，而非圖片。

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

好了，今天關(guān)于圖片優(yōu)化我就分享到這里，大家有無更好地建議?期待您的留言，咱們一起探討共同進(jìn)步。

最新評(píng)論