假如你運營線上商城又或是大型電商網站，圖片優化是你必需求把握的。不僅僅是從招引潛在顧客，仍是新增圖片查詢流量，又或是提高網站載入速度，圖片優化扮演者十分要害的人物。但說到圖片優化，許多傳統意義上的SEO人會說，圖片要加alt標籤，圖片要緊縮…這樣的粗線條顯然是不行的。今日我就和我們深化共享一下圖片優化有必要了解的8個知識點。
- 用結構化資料寫產品圖片ALT
我們很簡略運用照相機默許的圖片編號作為圖片們的命名，這樣的話關於查詢引擎來說，或許就沒有方法辨識圖片的內容，然後我們就失去了從圖片查詢那塊兒帶來的流量，這是十分惋惜的，特別是當你的產品有數以萬計的話。一般我們能夠擬定結構化資料規則讓技術人員設計程式批量替換圖片的alt特點，而無需我們手工操作。
我們要考慮一下，訪客的查詢習氣是什麼？會查詢哪些要害詞？最好能夠再看一下谷歌統計裡邊的要害詞資料，看看有無遺失。基本上來說，訪客更傾向於查詢品牌詞+產品系列的片語組合和變化，那麼alt標籤的結構化規則就出來了，能夠寫為：alt=”{品牌詞}{產品系列}-{產品型號}”。關於產品圖片的描繪來說，不主張寫過多冗餘內容，堅持資料結構化，做到要害詞辨識度高，要害詞資訊豐厚就能夠了，千萬不要做要害詞堆積。
- 圖片拍照視點問題
基本上拍照產品相片不會只拍一個視點，訪客必定不會滿足於只有一張正面照，多視點的去展現圖片才幹更好的招引訪客在你的網站上停留更多的時間，才幹夠去激發起他們的購買願望，所以天然需求拍照物體的正面，反面，旁邊面，細節等等，這個時分怎麼寫alt標籤？
最好的方法也是堅持alt標籤的結構化，承繼主圖的格局，千萬不要去給這些圖片一個全新的寫法，正確的寫法如下，
alt={品牌詞}{產品系列}-{產品型號}-正面
alt={品牌詞}{產品系列}-{產品型號}-反面
alt={品牌詞}{產品系列}-{產品型號}-旁邊面
堅持骨幹“{品牌詞}{產品系列}-{產品型號}”不變，能夠讓查詢引擎充沛承認當時圖片系列或是頁面就是關於那個要害詞，然後讓這些圖片被圖片查詢引擎查詢到的機率大大新增。孤軍獨戰必定倒下。
- 關於大圖的顯現問題
假如你期望供給更大的圖片讓使用者爽一下，這個思路很好，但要十分當心，不主張將大圖直接放在網頁上然後用css將圖片縮小，儘管你看上去圖片變小了，可是圖片的尺度仍是實真實在存在的，這會影響載入速度。相反，你能夠先放一張較小的圖片，然後供給檢視大圖功用的選項，不管是點選彈出大圖仍是別的新頁面顯現，都ok。
當然，還有一些人會把大圖切成一張張小圖做拼接，這樣做能夠讓圖片快速顯現，但一同一張圖片切成小圖之後，伺服器的請求數會新增，然後會影響網頁載入速度。所以，假如圖片的體積真實過大的話，主張為圖片專門裝備新伺服器。
- 給圖片減瘦身
先看看這些資料，
大部分桌上型電腦或是筆記本使用者不會等候超越3秒的網站載入速度
…在移動裝置上不會等候超越5秒鐘
亞馬遜發現假如他們的網站載入速度慢了1秒鐘，他們一年將丟失16億美元
查詢引擎將網站載入速度列入了排名演算法之中
假如你許多的網站圖片十分臃腫，這將嚴重影響網站載入速度，假如超越10秒鐘，那你等著和你的客戶說byebye把。
圖片檔案應該多大？
有些理論說圖片的鉅細應該堅持在70kb以下，不過這個有時分是很困難的，特別關於大圖片來說幾乎是不或許的，除非你不求清晰度。我個人卻是覺得，不要用一個規範去約束每一張圖片的鉅細，要害在於，我們有沒有去執行，有沒有看到我這篇博文後去真實緊縮圖片，這才是要害。
- 用對圖片格局
現在有三種十分盛行的圖片格局，他們是JPEG，GIF，和PNG。讓我們來看看他們有何不同，
JPEG (或許說 .jpg) 是最常用的圖片緊縮格局，支撐第一流別的緊縮。一般，關於顯現要求比較高的圖片來說，JPEG格局展現的圖片作用較GIF和PNG有顯著的優勢。
GIFs (.gif) 的圖片顯現質量要比JPEGs差勁許多，一般用作十分簡略的圖片展現，比方資料或許裝修性圖畫，gif也能夠用來製作動畫。gif不適合用作高顯現質量的圖片。
PNG圖片是比gif更好的挑選，由於PNG圖片支撐的色彩要比GIFs多。此外，和JPEG相同，PNG反覆儲存也不會影響圖片質量，而且關於小圖來說，PNG佔用的體積極小，PNG完美支撐通明佈景，所以一般logo或一般裝修性圖畫都會挑選PHG格局。留意PNG-24圖片體積要超3倍地大於相同情況下的PNG-8版別，對待PNG你要十分當心，看細心了。
經過比照相同體積下（都是24kb）不同格局的圖片顯現作用，經過測驗能夠看到，JPEG 是獲勝者，在相同的體積下，GIFs和PNGs有必要以獻身圖片質量為代價。不過話又說回來，假如關於十分小的圖片來說（比方小於5K），PNG是比較好的挑選，比較GIF，PNG能夠在體積很小的情況下仍然不會讓圖片失真。
當我們挑選圖片格局時，如下一些tips供我們參考，
關於電商網站來說，產品圖片的質量要求極高，JPEGs毫無疑問是首選，他們有相對高質量的圖片顯現且不會佔用太大的體積。
絕對不要用GIFs來作為產品大圖。否則的話檔案尺度會十分大，也沒有很好的方法去緊縮它（一緊縮就失真）。能夠用GIFs做動畫或是裝修性小圖。
PNG能夠作為JPEGs和GIFS的代替，假如你想把產品圖片做成PNG格局，儘量用PNG-8而非PNG-24。PNGs一同也拿手處理簡略地裝修圖而只需很小的體積，PNG將會變得越來越盛行。
趁便提一句，大部分的圖片修改軟體能夠轉化以上三種方式的圖片格局。
- 正確看待縮圖
大部分電商網站都有縮圖展現，它能夠讓訪客敏捷的掃描到盡或許多的產品款式而不需求再去點選一個額定的頁面。
縮圖很棒，可是要當心，他們或許是你網站的速度殺手。他們一般會出現在要害的購物流程之中，若因而影響了購物流程的流暢性，額… 那你就或許又丟失了一個顧客。關於縮圖，我個人有如下兩點主張：
盡或許緊縮縮圖體積，縮圖的圖片不要過高的追求顯現質量，當使用者點選到下一層詳情頁面的時分再給他一張高質量的圖片。
儘量不要為縮圖設定alt標籤，一般我們並不期望查詢引擎索引的是縮圖而應是產品詳情頁的高質量原圖。
- 運用圖片地圖
假如你的網站用JS做圖片作用來更好的提高使用者體驗，你是否憂慮圖片是否還能錄入？當然一般來說蜘蛛是不會爬取不顯現在原始碼裡邊的圖片檔案的，可是谷歌關於這點現已很有經驗了，經過圖片地圖的提交，即把圖片地址一個個老老實實地列出來，查詢引擎就能夠爬行了。
關於圖片地圖，我就不多說了，由於谷歌有許多輔導文件來協助你提高圖片的查詢排名，看這兒。
- 留心裝修性圖片
非產品類的圖片比方佈景圖、按鈕圖，邊框圖等都可算作裝修圖，作為一個優化者，你需求細心去檢視這些圖片的體積是否過大，是否會影響網站載入速度。
這兒有一些關於怎麼緊縮裝修圖的主張：
假如只是一些邊框類的、或是簡略的款式圖片，運用PNG-8或許GIFs，你能夠創立十分美觀的圖片而且只佔幾百bytes的體積。
假如或許的話，儘量運用css來創立一些特殊作用，而非圖片。
不主張為網站設定佈景圖片，假如必定要有的話，在確保清晰度的前提下最大程度去緊縮體積。你還能夠把佈景圖當中鏤空或堅持通明來緊縮體積。
好了，今日關於圖片優化我就共享到這兒，我們有無更好地主張？等待您的留言，我們一同討論共同進步。