如果你運營在線商城(chéng)又或是大(dà)型電商網站，圖片優化(huà)是你必須要掌握的(de)。不僅僅是從吸引潛在消費者，還(hái)是增加圖片搜索流量，又或是提升網站加載速度，圖片優化(huà)扮演者非常關鍵的(de)角色。但說到圖片優化(huà)，很多(duō)傳統意義上的(de)SEO人(rén)會說，圖片要加alt标簽，圖片要壓縮…這(zhè)樣的(de)粗線條顯然是不行的(de)。今天我就和(hé)大(dà)家深入分(fēn)享一下(xià)圖片優化(huà)必須了(le)解的(de)8個(gè)知識點。
1. 用(yòng)結構化(huà)數據寫産品圖片ALT
我們很容易使用(yòng)照(zhào)相機默認的(de)圖片編号當做(zuò)圖片們的(de)命名，這(zhè)樣的(de)話(huà)對(duì)于搜索引擎來(lái)說，可(kě)能就沒有辦法辨識圖片的(de)内容，從而我們就失去了(le)從圖片搜索那塊兒(ér)帶來(lái)的(de)流量，這(zhè)是非常可(kě)惜的(de)，特别是當你的(de)産品有數以萬計的(de)話(huà)。通(tōng)常我們可(kě)以制定結構化(huà)數據規則讓技術人(rén)員(yuán)設計程序批量替換圖片的(de)alt屬性，而無需我們手工操作。
我們要思考一下(xià)，訪客的(de)搜索習(xí)慣是什(shén)麽？會搜索哪些關鍵詞？最好可(kě)以再看一下(xià)谷歌(gē)統計裏面的(de)關鍵詞數據，看看有無遺漏。基本上來(lái)說，訪客更傾向于搜索品牌詞+産品系列的(de)詞組組合和(hé)變化(huà)，那麽alt标簽的(de)結構化(huà)規則就出來(lái)了(le)，可(kě)以寫爲：alt=”{品牌詞}{産品系列}-{産品型号}”。對(duì)于産品圖片的(de)描述來(lái)說，不建議(yì)寫過多(duō)冗餘内容，保持數據結構化(huà)，做(zuò)到關鍵詞辨識度高(gāo)，關鍵詞信息豐富就可(kě)以了(le)，千萬不要做(zuò)關鍵詞堆積。
2. 圖片拍(pāi)攝角度問題
基本上拍(pāi)攝産品照(zhào)片不會隻拍(pāi)一個(gè)角度，訪客肯定不會滿足于隻有一張正面照(zhào)，多(duō)角度的(de)去展示圖片才能更好的(de)吸引訪客在你的(de)網站上停留更多(duō)的(de)時(shí)間，才可(kě)以去激發起他(tā)們的(de)購(gòu)買欲望，所以自然需要拍(pāi)攝物(wù)體的(de)正面，背面，側面，細節等等，這(zhè)個(gè)時(shí)候如何寫alt标簽？
最好的(de)方法也(yě)是保持alt标簽的(de)結構化(huà)，繼承主圖的(de)格式，千萬不要去給這(zhè)些圖片一個(gè)全新的(de)寫法，正确的(de)寫法如下(xià)，
- alt={品牌詞}{産品系列}-{産品型号}-正面
- alt={品牌詞}{産品系列}-{産品型号}-背面
- alt={品牌詞}{産品系列}-{産品型号}-側面
保持主幹“{品牌詞}{産品系列}-{産品型号}”不變，可(kě)以讓搜索引擎充分(fēn)确認當前圖片系列或是頁面就是關于那個(gè)關鍵詞，從而讓這(zhè)些圖片被圖片搜索引擎搜索到的(de)幾率大(dà)大(dà)增加。單槍匹馬一定倒下(xià)。
3. 關于大(dà)圖的(de)顯示問題
如果你希望提供更大(dà)的(de)圖片讓用(yòng)戶爽一下(xià)，這(zhè)個(gè)思路很好，但要非常小心，不建議(yì)将大(dà)圖直接放在網頁上然後用(yòng)css将圖片縮小，雖然你看上去圖片變小了(le)，但是圖片的(de)尺寸還(hái)是實實在在存在的(de)，這(zhè)會影(yǐng)響加載速度。相反，你可(kě)以先放一張較小的(de)圖片，然後提供查看大(dà)圖功能的(de)選項，不管是點擊彈出大(dà)圖還(hái)是另外新頁面顯示，都ok。
當然，還(hái)有一些人(rén)會把大(dà)圖切成一張張小圖做(zuò)拼接，這(zhè)樣做(zuò)可(kě)以讓圖片快(kuài)速顯示，但同時(shí)一張圖片切成小圖之後，服務器的(de)請求數會增加，從而會影(yǐng)響網頁加載速度。所以，如果圖片的(de)體積實在過大(dà)的(de)話(huà)，建議(yì)爲圖片專門配置新服務器。
4. 給圖片減減肥
先看看這(zhè)些數據，
- 大(dà)部分(fēn)台式機或是筆記本用(yòng)戶不會等待超過3秒的(de)網站加載速度
- …在移動設備上不會等待超過5秒鐘(zhōng)
- 亞馬遜發現如果他(tā)們的(de)網站加載速度慢(màn)了(le)1秒鐘(zhōng)，他(tā)們一年将損失16億美(měi)元
- 搜索引擎将網站加載速度列入了(le)排名算(suàn)法之中
如果你大(dà)量的(de)網站圖片非常臃腫，這(zhè)将嚴重影(yǐng)響網站加載速度，如果超過10秒鐘(zhōng)，那你等著(zhe)和(hé)你的(de)客戶說byebye把。
圖片文件應該多(duō)大(dà)？
有些理(lǐ)論說圖片的(de)大(dà)小應該保持在70kb以下(xià)，不過這(zhè)個(gè)有時(shí)候是很困難的(de)，特别對(duì)于大(dà)圖片來(lái)說幾乎是不可(kě)能的(de)，除非你不求清晰度。我個(gè)人(rén)倒是覺得(de)，不要用(yòng)一個(gè)标準去限制每一張圖片的(de)大(dà)小，關鍵在于，我們有沒有去執行，有沒有看到我這(zhè)篇博文後去真正壓縮圖片，這(zhè)才是關鍵。
5. 用(yòng)對(duì)圖片格式
目前有三種非常流行的(de)圖片格式，他(tā)們是JPEG，GIF，和(hé)PNG。讓我們來(lái)看看他(tā)們有何不同，
- JPEG (或者說 .jpg) 是最常用(yòng)的(de)圖片壓縮格式，支持最高(gāo)級别的(de)壓縮。通(tōng)常，對(duì)于顯示要求比較高(gāo)的(de)圖片來(lái)說，JPEG格式展示的(de)圖片效果較GIF和(hé)PNG有明(míng)顯的(de)優勢。
- GIFs (.gif) 的(de)圖片顯示質量要比JPEGs遜色很多(duō)，通(tōng)常用(yòng)作非常簡單的(de)圖片展示，比如素材或者裝飾性圖案，gif也(yě)可(kě)以用(yòng)來(lái)制作動畫(huà)。gif不适合用(yòng)作高(gāo)顯示質量的(de)圖片。
- PNG圖片是比gif更好的(de)選擇，因爲PNG圖片支持的(de)色彩要比GIFs多(duō)。此外，和(hé)JPEG一樣，PNG反複保存也(yě)不會影(yǐng)響圖片質量，而且對(duì)于小圖來(lái)說，PNG占用(yòng)的(de)體積極小，PNG完美(měi)支持透明(míng)背景，所以一般logo或一般裝飾性圖案都會選擇PHG格式。注意PNG-24圖片體積要超3倍地大(dà)于同樣情況下(xià)的(de)PNG-8版本，對(duì)待PNG你要十分(fēn)小心，看仔細了(le)。
通(tōng)過對(duì)比相同體積下(xià)（都是24kb）不同格式的(de)圖片顯示效果，經過測試可(kě)以看到，JPEG 是獲勝者，在同樣的(de)體積下(xià)，GIFs和(hé)PNGs必須以犧牲圖片質量爲代價。不過話(huà)又說回來(lái)，如果對(duì)于非常小的(de)圖片來(lái)說（比如小于5K），PNG是比較好的(de)選擇，相比GIF，PNG可(kě)以在體積很小的(de)情況下(xià)依然不會讓圖片失真。
當我們選擇圖片格式時(shí)，如下(xià)一些tips供大(dà)家參考，
- 對(duì)于電商網站來(lái)說，産品圖片的(de)質量要求極高(gāo)，JPEGs毫無疑問是首選，他(tā)們有相對(duì)高(gāo)質量的(de)圖片顯示且不會占用(yòng)太大(dà)的(de)體積。
- 絕對(duì)不要用(yòng)GIFs來(lái)當做(zuò)産品大(dà)圖。不然的(de)話(huà)文件尺寸會非常大(dà)，也(yě)沒有很好的(de)辦法去壓縮它（一壓縮就失真）。可(kě)以用(yòng)GIFs做(zuò)動畫(huà)或是裝飾性小圖。
- PNG可(kě)以作爲JPEGs和(hé)GIFS的(de)替代，如果你想把産品圖片做(zuò)成PNG格式，盡量用(yòng)PNG-8而非PNG-24。PNGs同時(shí)也(yě)擅長(cháng)處理(lǐ)簡單地裝飾圖而隻需很小的(de)體積，PNG将會變得(de)越來(lái)越流行。
順便提一句，大(dà)部分(fēn)的(de)圖片編輯軟件可(kě)以轉換以上三種形式的(de)圖片格式。
6. 正确看待縮略圖
大(dà)部分(fēn)電商網站都有縮略圖展示，它可(kě)以讓訪客迅速的(de)掃描到盡可(kě)能多(duō)的(de)商品樣式而不需要再去點擊一個(gè)額外的(de)頁面。
縮略圖很棒，但是要小心，他(tā)們可(kě)能是你網站的(de)速度殺手。他(tā)們通(tōng)常會出現在關鍵的(de)購(gòu)物(wù)流程之中，若因此影(yǐng)響了(le)購(gòu)物(wù)流程的(de)流暢性，額… 那你就可(kě)能又損失了(le)一個(gè)顧客。關于縮略圖，我個(gè)人(rén)有如下(xià)兩點建議(yì)：
- 盡可(kě)能壓縮縮略圖體積，縮略圖的(de)圖片不要過高(gāo)的(de)追求顯示質量，當用(yòng)戶點擊到下(xià)一層詳情頁面的(de)時(shí)候再給他(tā)一張高(gāo)質量的(de)圖片。
- 盡量不要爲縮略圖設置alt标簽，通(tōng)常我們并不希望搜索引擎索引的(de)是縮略圖而應是産品詳情頁的(de)高(gāo)質量原圖。
7. 使用(yòng)圖片地圖
如果你的(de)網站用(yòng)JS做(zuò)圖片效果來(lái)更好的(de)提升用(yòng)戶體驗，你是否擔心圖片是否還(hái)能收錄？當然通(tōng)常來(lái)說蜘蛛是不會爬取不顯示在源代碼裏面的(de)圖片文件的(de)，但是谷歌(gē)對(duì)于這(zhè)點已經很有經驗了(le)，通(tōng)過圖片地圖的(de)提交，即把圖片地址一個(gè)個(gè)老老實實地列出來(lái)，搜索引擎就可(kě)以爬行了(le)。
對(duì)于圖片地圖，我就不多(duō)說了(le)，因爲谷歌(gē)有許多(duō)指導文檔來(lái)幫助你提升圖片的(de)搜索排名，看這(zhè)裏。
8. 留心裝飾性圖片
非産品類的(de)圖片比如背景圖、按鈕圖，邊框圖等都可(kě)算(suàn)作裝飾圖，作爲一個(gè)優化(huà)者，你需要仔細去檢查這(zhè)些圖片的(de)體積是否過大(dà)，是否會影(yǐng)響網站載入速度。
這(zhè)裏有一些關于如何壓縮裝飾圖的(de)建議(yì)：
- 如果隻是一些邊框類的(de)、或是簡單的(de)樣式圖片，使用(yòng)PNG-8或者GIFs，你可(kě)以創建非常好看的(de)圖片并且隻占幾百bytes的(de)體積。
- 如果可(kě)能的(de)話(huà)，盡量使用(yòng)css來(lái)創建一些特殊效果，而非圖片。
- 不建議(yì)爲網站設置背景圖片，如果一定要有的(de)話(huà)，在保證清晰度的(de)前提下(xià)最大(dà)程度去壓縮體積。你還(hái)可(kě)以把背景圖當中镂空或保持透明(míng)來(lái)壓縮體積。
