圖片優化須知的8個小技巧

　1. 用結構化數據寫產品圖片ALT

　　咱們很容易使用照相機默認的圖片編號當作圖片們的命名，這樣的話對於搜索引擎來講，可能就沒有辦法辨識圖片的內容，從而咱們就失去了從圖片搜索那塊兒帶來的流量，這是很是惋惜的，特別是當你的產品有數以萬計的話。一般咱們能夠制定結構化數據規則讓技術人員設計程序批量替換圖片的alt屬性，而無需咱們手工操做。

　　咱們要思考一下，訪客的搜索習慣是什麼？會搜索哪些關鍵詞？最好能夠再看一下谷歌統計裏面的關鍵詞數據，看看有無遺漏。基本上來講，訪客更傾向於搜索品牌詞+產品系列的詞組組合和變化，那麼alt標籤的結構化規則就出來了，能夠寫爲：alt=」{品牌詞}{產品系列}-{產品型號}」。對於產品圖片的描述來講，不建議寫過多冗餘內容，保持數據結構化，作到關鍵詞辨識度高，關鍵詞信息豐富就能夠了，千萬不要作關鍵詞堆積。

　　2. 圖片拍攝角度問題

　　基本上拍攝產品照片不會只拍一個角度，訪客確定不會知足於只有一張正面照，多角度的去展現圖片才能更好的吸引訪客在你的網站上停留更多的時間，才能夠去激發起他們的購買慾望，因此天然須要拍攝物體的正面，背面，側面，細節等等，這個時候如何寫alt標籤？

　　最好的方法也是保持alt標籤的結構化，繼承主圖的格式，千萬不要去給這些圖片一個全新的寫法，正確的寫法以下，

• alt={品牌詞}{產品系列}-{產品型號}-正面

• alt={品牌詞}{產品系列}-{產品型號}-背面

• alt={品牌詞}{產品系列}-{產品型號}-側面

　　保持主幹「{品牌詞}{產品系列}-{產品型號}」不變，可讓搜索引擎充分確認當前圖片系列或是頁面就是關於那個關鍵詞，從而讓這些圖片被圖片搜索引擎搜索到的概率大大增長。單槍匹馬必定倒下。

　　3. 關於大圖的顯示問題

　　若是你但願提供更大的圖片讓用戶爽一下，這個思路很好，但要很是當心，不建議將大圖直接放在網頁上而後用css將圖片縮小，雖然你看上去圖片變小了，可是圖片的尺寸仍是實實在在存在的，這會影響加載速度。相反，你能夠先放一張較小的圖片，而後提供查看大圖功能的選項，不論是點擊彈出大圖仍是另外新頁面顯示，都ok。

　　固然，還有一些人會把大圖切成一張張小圖作拼接，這樣作可讓圖片快速顯示，但同時一張圖片切成小圖以後，服務器的請求數會增長，從而會影響網頁加載速度。因此，若是圖片的體積實在過大的話，建議爲圖片專門配置新服務器。

　　4. 給圖片減減肥

　　先看看這些數據，

• 大部分臺式機或是筆記本用戶不會等待超過3秒的網站加載速度

• …在移動設備上不會等待超過5秒鐘

• 亞馬遜發現若是他們的網站加載速度慢了1秒鐘，他們一年將損失16億美圓

• 搜索引擎將網站加載速度列入了排名算法之中

　　若是你大量的網站圖片很是臃腫，這將嚴重影響網站加載速度，若是超過10秒鐘，那你等着和你的客戶說byebye把。

　　圖片文件應該多大？

　　有些理論說圖片的大小應該保持在70kb如下，不過這個有時候是很困難的，特別對於大圖片來講幾乎是不可能的，除非你不求清晰度。我我的卻是以爲，不要用一個標準去限制每一張圖片的大小，關鍵在於，咱們有沒有去執行，有沒有看到我這篇博文後去真正壓縮圖片，這纔是關鍵。

　　5. 用對圖片格式

　　目前有三種很是流行的圖片格式，他們是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將會變得愈來愈流行。

　　順便提一句，大部分的圖片編輯軟件能夠轉換以上三種形式的圖片格式。

　　6. 正確看待縮略圖

　　大部分電商網站都有縮略圖展現，它可讓訪客迅速的掃描到儘量多的商品樣式而不須要再去點擊一個額外的頁面。 

　　縮略圖很棒，可是要當心，他們多是你網站的速度殺手。他們一般會出如今關鍵的購物流程之中，若所以影響了購物流程的流暢性，額… 那你就可能又損失了一個顧客。關於縮略圖，我我的有以下兩點建議：

• 儘量壓縮縮略圖體積，縮略圖的圖片不要太高的追求顯示質量，當用戶點擊到下一層詳情頁面的時候再給他一張高質量的圖片。

• 儘可能不要爲縮略圖設置alt標籤，一般咱們並不但願搜索引擎索引的是縮略圖而應是產品詳情頁的高質量原圖。

　　7. 使用圖片地圖

　　若是你的網站用JS作圖片效果來更好的提高用戶體驗，你是否擔憂圖片是否還能收錄？固然一般來講蜘蛛是不會爬取不顯示在源代碼裏面的圖片文件的，可是谷歌對於這點已經頗有經驗了，經過圖片地圖的提交，即把圖片地址一個個老老實實地列出來，搜索引擎就能夠爬行了。 

　　對於圖片地圖，我就很少說了，由於谷歌有許多指導文檔來幫助你提高圖片的搜索排名，看這裏。

　　8. 留心裝飾性圖片

　　非產品類的圖片好比背景圖、按鈕圖，邊框圖等均可算做裝飾圖，做爲一個優化者，你須要仔細去檢查這些圖片的體積是否過大，是否會影響網站載入速度。

　　這裏有一些關於如何壓縮裝飾圖的建議：

• 若是隻是一些邊框類的、或是簡單的樣式圖片，使用PNG-8或者GIFs，你能夠建立很是好看的圖片而且只佔幾百bytes的體積。

• 若是可能的話，儘可能使用css來建立一些特殊效果，而非圖片。

• 不建議爲網站設置背景圖片，若是必定要有的話，在保證清晰度的前提下最大程度去壓縮體積。你還能夠把背景圖當中鏤空或保持透明來壓縮體積。