如果，你運(yùn)營(yíng)在線商城，又或是大型電商網(wǎng)站，圖片優(yōu)化是你必須要掌握的，不僅僅是從吸引潛在消費(fèi)者，還是增加圖片搜索流量，又或是提升網(wǎng)站加載速度，圖片優(yōu)化扮演者非常關(guān)鍵的角色。但說(shuō)到圖片優(yōu)化，很多傳統(tǒng)意義上的SEO人會(huì)說(shuō)，圖片要加alt標(biāo)簽，圖片要壓縮……這樣的粗線條顯然是不行的。今天我就和大家深入分享一下，圖片優(yōu)化必須了解的8個(gè)知識(shí)點(diǎn)。
1、用結(jié)構(gòu)化數(shù)據(jù)寫(xiě)產(chǎn)品圖片ALT
正常的圖片標(biāo)簽是有 5 大標(biāo)簽（width、height、alt、src、Title）但是好多在寫(xiě)標(biāo)簽時(shí)往往會(huì)把 alt、Title 這兩個(gè)標(biāo)簽給省略掉。但是這兩個(gè)標(biāo)簽才是圖片中最主重要的，要是沒(méi)有這兩個(gè)標(biāo)簽搜索引擎是沒(méi)有辦法去識(shí)別圖片是什么東西，所以就不可能收錄這張圖片。
我們經(jīng)常會(huì)習(xí)慣性的，使用照相機(jī)默認(rèn)的圖片編號(hào)當(dāng)做圖片的名稱(chēng)，這樣的話，對(duì)于搜索引擎來(lái)說(shuō)就沒(méi)有辦法辨識(shí)圖片的內(nèi)容，從而我們就失去了從圖片搜索那塊兒帶來(lái)的流量，這是非常可惜的，特別是當(dāng)你的產(chǎn)品有數(shù)以萬(wàn)計(jì)的話，通常我們可以制定結(jié)構(gòu)化數(shù)據(jù)規(guī)則，讓技術(shù)人員設(shè)計(jì)程序批量替換圖片的alt屬性，而無(wú)需我們手工操作。
我們要思考一下，訪客的搜索習(xí)慣是什么？會(huì)搜索哪些關(guān)鍵詞？最好可以再看一下，谷歌統(tǒng)計(jì)里面的關(guān)鍵詞數(shù)據(jù)，看看有無(wú)遺漏，基本上來(lái)說(shuō)，訪客更傾向于搜索“品牌詞+產(chǎn)品詞”組合和變化，那么，alt標(biāo)簽的結(jié)構(gòu)化規(guī)則就出來(lái)了，可以寫(xiě)為：alt="{品牌詞}{產(chǎn)品系列}-{產(chǎn)品型號(hào)}"。對(duì)于產(chǎn)品圖片的描述來(lái)說(shuō)，不建議寫(xiě)過(guò)多冗余內(nèi)容，保持?jǐn)?shù)據(jù)結(jié)構(gòu)化，做到關(guān)鍵詞辨識(shí)度高，關(guān)鍵詞信息豐富就可以了，千萬(wàn)不要做關(guān)鍵詞堆積。
圖片周邊文字
圖片周邊描述文字也會(huì)影響到圖片在搜索引擎上的排名，除了圖片名和alt標(biāo)簽之外，圖片周?chē)枰湟恍┪淖置枋?。這些文字要圍繞著alt標(biāo)簽中的關(guān)鍵詞來(lái)寫(xiě)，這能加強(qiáng)圖片和內(nèi)容的相關(guān)性，更容易使圖片在搜索引擎上排名靠前。
2、圖片拍攝角度問(wèn)題
基本上拍攝產(chǎn)品照片不會(huì)只拍一個(gè)角度，訪客肯定不會(huì)滿(mǎn)足于只有一張正面照，多角度的去展示產(chǎn)品，才能更好的吸引訪客在你的網(wǎng)站上，停留更多的時(shí)間，才可以去激發(fā)起他們的購(gòu)買(mǎi)欲望，所以，自然需要拍攝產(chǎn)品的正面、背面、側(cè)面、細(xì)節(jié)等角度，這個(gè)時(shí)候如何寫(xiě)alt標(biāo)簽？最好的方法也是保持alt標(biāo)簽的結(jié)構(gòu)化，繼承主圖的格式，千萬(wàn)不要去給這些圖片一個(gè)全新的寫(xiě)法，正確的寫(xiě)法如下：
alt={品牌詞}{產(chǎn)品系列}-{產(chǎn)品型號(hào)}-正面
alt={品牌詞}{產(chǎn)品系列}-{產(chǎn)品型號(hào)}-背面
alt={品牌詞}{產(chǎn)品系列}-{產(chǎn)品型號(hào)}-側(cè)面
保持主干"{品牌詞}{產(chǎn)品系列}-{產(chǎn)品型號(hào)}"不變，可以讓搜索引擎充分確認(rèn)當(dāng)前圖片系列，或者頁(yè)面就是關(guān)于那個(gè)產(chǎn)品的關(guān)鍵詞，從而讓這些圖片被圖片搜索引擎搜索到的幾率大大增加，單槍匹馬一定倒下。
3、關(guān)于大圖的顯示問(wèn)題
如果，你希望提供更大的圖片讓用戶(hù)爽一下，這個(gè)思路很好，但要非常小心，不建議將大圖直接放在網(wǎng)頁(yè)上，然后用css將圖片縮小，雖然你看上去圖片變小了，但是圖片的尺寸還是實(shí)際存在的，這會(huì)影響加載速度。相反，你可以先放一張較小的圖片，然后提供查看大圖功能的選項(xiàng)，不管是點(diǎn)擊彈出大圖，還是另外新頁(yè)面顯示，都“ok”。
當(dāng)然，還有一些人會(huì)把大圖切成一張張小圖做拼接，這樣做可以讓圖片快速顯示，但同時(shí)一張圖片切成小圖之后，服務(wù)器的請(qǐng)求數(shù)會(huì)增加，從而會(huì)影響網(wǎng)頁(yè)加載速度。所以，如果圖片的體積實(shí)在過(guò)大的話，建議為圖片專(zhuān)門(mén)配置新服務(wù)器。
4、給圖片減減肥
先看看這些數(shù)據(jù)，大部分臺(tái)式機(jī)或是筆記本用戶(hù)，不會(huì)等待超過(guò)3秒的網(wǎng)站加載速度……在移動(dòng)設(shè)備上不會(huì)等待超過(guò)5秒鐘，亞馬遜發(fā)現(xiàn)，如果他們的網(wǎng)站加載速度慢了1秒鐘，他們一年將損失16億美元，搜索引擎將網(wǎng)站加載速度，列入了排名算法之中，如果，你大量的網(wǎng)站圖片非常臃腫，這將嚴(yán)重影響網(wǎng)站加載速度，如果超過(guò)10秒鐘，那你等著和你的客戶(hù)說(shuō)“byebye”吧！
最普遍的問(wèn)題：網(wǎng)絡(luò)圖片文件應(yīng)該多大?
清晰的圖片更加有利于用戶(hù)體驗(yàn)，圖片不宜過(guò)大(指圖片的內(nèi)存屬性不宜過(guò)大，并不是指圖片的尺寸大小，圖片內(nèi)存較小，網(wǎng)頁(yè)打開(kāi)速度瞬間就能起飛)所以建議最好采用JPG格式保存，也可以選擇“存儲(chǔ)為web格式”即可?？刂茍D片的大小讓網(wǎng)站打開(kāi)速度飛起來(lái)。
有些理論說(shuō)，圖片的大小應(yīng)該保持在70kb以下，不過(guò)這個(gè)大小是很難把握的，特別對(duì)于大圖片來(lái)說(shuō)，幾乎是不可能的，除非你不求清晰度。我個(gè)人倒是覺(jué)得，不要用一個(gè)標(biāo)準(zhǔn)去限制每一張圖片的大小，關(guān)鍵在于，我們有沒(méi)有去執(zhí)行，有沒(méi)有看到遨游建站這篇文章后去真正壓縮圖片，這才是關(guān)鍵。
5、用對(duì)圖片格式
目前，有三種非常流行的圖片格式，他們分別是：JPEG、GIF、PNG。讓我們來(lái)看看他們有何不同：
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)畫(huà)，gif不適合用作高顯示質(zhì)量的圖片；
PNG圖片是比gif更好的選擇，因?yàn)镻NG圖片支持的色彩要比GIF多。此外，和JPEG一樣，PNG反復(fù)保存也不會(huì)影響圖片質(zhì)量，而且對(duì)于小圖來(lái)說(shuō)，PNG占用的體積極小，PNG完美支持透明背景，所以一般logo或一般裝飾性圖案都會(huì)選擇PNG格式。
注意：“PNG-24”圖片體積會(huì)3倍的大于同樣情況下的“PNG-8”圖片，對(duì)待PNG你要十分小心，保存時(shí)看仔細(xì)了。
通過(guò)對(duì)比相同體積下（都是24kb），不同格式的圖片顯示效果，經(jīng)過(guò)測(cè)試可以看到，JPEG 是獲勝者，在同樣的體積下，GIF和PNG必須以犧牲圖片質(zhì)量為代價(jià)，不過(guò)話又說(shuō)回來(lái)，如果對(duì)于非常小的圖片來(lái)說(shuō)（比如小于5K），PNG是比較好的選擇，相比GIF，PNG可以在體積很小的情況下，依然不會(huì)讓圖片失真。
當(dāng)我們選擇圖片格式時(shí)，可下一些tips供大家參考，對(duì)于電商網(wǎng)站來(lái)說(shuō)，產(chǎn)品圖片的質(zhì)量要求極高，JPEG毫無(wú)疑問(wèn)是首選，他們有相對(duì)高質(zhì)量的圖片顯示且不會(huì)占用太大的體積。
絕對(duì)不要用GIF來(lái)當(dāng)做產(chǎn)品大圖，不然的話文件尺寸會(huì)非常大，也沒(méi)有很好的辦法去壓縮它(一壓縮就失真)，可以用GIF做動(dòng)畫(huà)或是裝飾性小圖。
PNG可以作為JPEG和GIF的替代，如果你想把產(chǎn)品圖片做成PNG格式，盡量用PNG-8而非PNG-24，PNG同時(shí)也擅長(zhǎng)處理簡(jiǎn)單地裝飾圖，而只需很小的體積，PNG將會(huì)變得越來(lái)越流行。
順便提一句，大部分的圖片編輯軟件，可以轉(zhuǎn)換以上三種形式的圖片格式。
6、正確看待縮略圖
大部分電商網(wǎng)站都有縮略圖展示，它可以讓訪客迅速的掃描到，盡可能多的商品樣式，而不需要再去點(diǎn)擊一個(gè)額外的頁(yè)面。
縮略圖很棒，但是要小心，他們可能是你網(wǎng)站的速度殺手，他們通常會(huì)出現(xiàn)在關(guān)鍵的購(gòu)物流程之中，若因此影響了購(gòu)物流程的流暢性……那你就可能又損失了一個(gè)顧客，關(guān)于縮略圖，我個(gè)人有如下兩點(diǎn)建議:
6.1、盡可能壓縮縮略圖體積，縮略圖的圖片不要過(guò)高的追求顯示質(zhì)量，當(dāng)用戶(hù)點(diǎn)擊到下一層詳情頁(yè)面的時(shí)候，再給他一張高質(zhì)量的圖片。
6.2、盡量不要為縮略圖設(shè)置alt標(biāo)簽，通常我們并不希望搜索引擎索引的是縮略圖，而應(yīng)是產(chǎn)品詳情頁(yè)的高質(zhì)量原圖。
7、使用圖片地圖
如果，你的網(wǎng)站用JS做圖片效果來(lái)更好的提升用戶(hù)體驗(yàn)，你是否擔(dān)心圖片能不能收錄問(wèn)題？當(dāng)然，通常來(lái)說(shuō)，蜘蛛是不會(huì)爬取，不顯示在源代碼里面的圖片文件的，但是，谷歌對(duì)于這點(diǎn)已經(jīng)很有經(jīng)驗(yàn)了，通過(guò)圖片地圖的提交，即把圖片地址一個(gè)個(gè)老老實(shí)實(shí)地列出來(lái)，搜索引擎就可以爬行了。
對(duì)于圖片地圖，我就不多說(shuō)了，因?yàn)?，谷歌有許多指導(dǎo)文檔來(lái)幫助你，提升圖片的搜索排名。
8、留心裝飾性圖片
非產(chǎn)品類(lèi)的圖片，比如背景圖、按鈕圖、邊框圖等都可算作裝飾圖，作為一個(gè)seo優(yōu)化者，你需要仔細(xì)去檢查這些圖片的體積，看看是否過(guò)大，是否會(huì)影響網(wǎng)站載入速度。
這里提供一些關(guān)于如何壓縮裝飾圖的建議：
8.1、如果，只是一些邊框類(lèi)或是簡(jiǎn)單的樣式圖片，使用PNG-8或者GIF，你可以創(chuàng)建非常好看的圖片，并且只占幾百bytes的體積；
8.2、如果可能的話，盡量使用css來(lái)創(chuàng)建一些特殊效果，而非圖片。
8.3、不建議為網(wǎng)站設(shè)置背景圖片，如果一定要有的話，在保證清晰度的前提下最大程度去壓縮體積。你還可以把背景圖當(dāng)中鏤空或保持透明來(lái)壓縮體積。
9、圖片與內(nèi)容的關(guān)聯(lián)性
我們于展開(kāi)圖片改進(jìn)的時(shí)，需留意的是，搜尋引擎辨別一個(gè)網(wǎng)頁(yè)與否優(yōu)質(zhì)的規(guī)范，看的是網(wǎng)頁(yè)內(nèi)容的關(guān)聯(lián)性，這里的網(wǎng)頁(yè)內(nèi)容絕不單單指的是文字，還有圖片。盡管搜尋引擎絕不能非常好的辨識(shí)照片，但是絕對(duì)不能說(shuō)圖片不關(guān)鍵，由于網(wǎng)頁(yè)的觀眾群體是用戶(hù)，假如圖片用的好，能引發(fā)用戶(hù)的愛(ài)好，增加用戶(hù)的黏性。最好的是用百度的圖片侵權(quán)風(fēng)險(xiǎn)檢測(cè)檢測(cè)圖片原創(chuàng)度。
10、使用良好的CDN進(jìn)行圖像傳輸
一旦解決了圖像的大小和加載到特定頁(yè)面上的圖像數(shù)量，下一步就是確?？焖偌虞d網(wǎng)站上加載的圖像。減少圖像加載時(shí)間不僅可以幫助您獲得更快的整體頁(yè)面加載時(shí)間，從而更好地在您的網(wǎng)站上獲得用戶(hù)體驗(yàn)，還可以幫助您在搜索引擎上排名更高。
好了，今天關(guān)于圖片優(yōu)化?方面的問(wèn)題，遨游建站就分享到這里，大家有無(wú)更好地建議？期待您的留言，咱們一起探討共同進(jìn)步。
