8個(gè)圖像優化技(jì)巧讓你(nǐ)的網站(zhàn)打開(kāi)快一步

研究表明(míng)，如果電(diàn)子商務網站(zhàn)的加載速度低(dī)于預期，會(huì)有(yǒu)超過45%的訪問者放棄購買。而圖片是否進行(xíng)過優化，決定了網站(zhàn)打開(kāi)速度的快慢，這裏我們介紹了8種圖像優化技(jì)巧，來(lái)幫助提升你(nǐ)網站(zhàn)的用戶體(tǐ)驗。

1、使用簡潔直接的圖像名稱

創建描述性的、關鍵字豐富的文件名，對于圖像優化來(lái)說至關重要，因為(wèi)搜索引擎不僅會(huì)抓取你(nǐ)網頁上(shàng)的文本，還(hái)會(huì)抓取你(nǐ)的圖片文件名。

在給圖片命名時(shí)，除了讓名稱準确描述圖片內(nèi)容外，還(hái)要考慮消費者的搜索習慣，他們如果想找到這個(gè)産品的話(huà)，會(huì)使用哪些(xiē)常用詞進行(xíng)搜索？

2、設置合理(lǐ)的alt屬性

當浏覽器(qì)無法正确呈現圖像時(shí)，Alt屬性将發揮作(zuò)用，它将用已設置好的文本內(nèi)容來(lái)替代空(kōng)缺的圖片。并且Alt屬性還(hái)為(wèi)網站(zhàn)SEO增加了價值，有(yǒu)助于搜索排名的提高(gāo)。

填寫Alt屬性時(shí)，應該遵循這些(xiē)原則：

①用簡單的語言來(lái)描述圖像，就如同給圖像文件命名那(nà)樣。

②将商品型号或序列号添加到Alt屬性中。

③不要在Alt屬性中堆砌關鍵字。

④不要對無實質意義的圖像添加Alt屬性（如裝飾元素圖）。

3、多(duō)角度展示商品

多(duō)個(gè)角度展示的商品圖，往往能提高(gāo)消費者需求點的命中率。但(dàn)不要将這些(xiē)多(duō)角度的圖片都設置為(wèi)大(dà)圖，因為(wèi)它将增加頁面的加載時(shí)間(jiān)。但(dàn)你(nǐ)可(kě)以為(wèi)這些(xiē)小(xiǎo)圖都設置一個(gè)鏈接或彈出窗口，用以展示對應的大(dà)圖。

4、優化圖像大(dà)小(xiǎo)

亞馬遜發現，如果它的頁面加載速度慢下一秒(miǎo)，就會(huì)損失16億美元。谷歌(gē)也将頁面加載時(shí)間(jiān)作(zuò)為(wèi)排名因素。

減小(xiǎo)圖像文件大(dà)小(xiǎo)的常用方法是，使用Photoshop中的“另存為(wèi)Web”的命令，然後調整參數(shù)，以将圖片盡可(kě)能壓縮。當然，在調整大(dà)小(xiǎo)時(shí)，注意保持圖像質量。

參數(shù)設置包括，降低(dī)右上(shàng)角的圖片品質，設置文件格式為(wèi)JPEG，勾選“優化”，勾選“轉化為(wèi)sRGB”，在右下角降低(dī)圖像大(dà)小(xiǎo)百分比，最後查看左下角的文件大(dà)小(xiǎo)是否達到預期（如，商品圖一般為(wèi)100k以內(nèi)）。

5、選擇正确的圖像格式

常見的圖像格式有(yǒu)JPEG、GIF和(hé)PNG。這其中，JPEG在有(yǒu)限的大(dà)小(xiǎo)下，可(kě)以展示最清晰的圖像；GIF可(kě)以提供動态變化的圖像；而PNG可(kě)以呈現出最高(gāo)質量的圖片，不過高(gāo)質量的圖像也對應了較大(dà)的內(nèi)存占用。

所以，多(duō)數(shù)賣家(jiā)會(huì)選擇JPEG（或.jpg）格式的圖像作(zuò)為(wèi)其商品圖，因為(wèi)它可(kě)以用最小(xiǎo)的文件大(dà)小(xiǎo)，呈現出最佳質量的圖片。

當你(nǐ)使用PNG格式的圖像時(shí)，還(hái)要注意使用PNG-8，而非PNG-24，因為(wèi)對于同樣質量的圖像來(lái)說，後者的文件大(dà)小(xiǎo)是前者的三倍之多(duō)。

6、優化縮略圖

對于産品豐富的網站(zhàn)頁面，往往會(huì)使用到很(hěn)多(duō)縮略圖，以減小(xiǎo)整個(gè)頁面的內(nèi)存大(dà)小(xiǎo)。而我們要做(zuò)的優化主要涉及到兩個(gè)方面，一個(gè)是盡可(kě)能壓縮圖像大(dà)小(xiǎo)，另一個(gè)是設置合理(lǐ)的Alt屬性，來(lái)增加同一産品中對應不同圖片之間(jiān)的區(qū)分度。

7、使用圖片站(zhàn)點地圖

網絡爬蟲無法爬取網頁源代碼中沒有(yǒu)特殊标注的圖片，所以，為(wèi)了讓爬蟲識别你(nǐ)的圖像，你(nǐ)需要在圖像中站(zhàn)點中列出他們的位置。你(nǐ)可(kě)以通(tōng)過2Cshop的後台，将站(zhàn)點地圖上(shàng)傳到網站(zhàn)，也可(kě)以使用SearchConsole将站(zhàn)點地圖提交給Google。這些(xiē)都有(yǒu)助于Google抓取你(nǐ)的網站(zhàn)圖片，優化網頁質量和(hé)排名。

8、優化裝飾圖像

網站(zhàn)除了必要的産品圖和(hé)Logo外，還(hái)有(yǒu)一些(xiē)裝飾元素圖。這些(xiē)圖片如果占用內(nèi)存過大(dà)，也會(huì)使網頁加載速度變慢。那(nà)麽如何對它們進行(xíng)優化呢？

①将構成邊框的簡單圖案設置為(wèi)PNG-8格式。

②盡可(kě)能多(duō)地使用CSS樣式代碼來(lái)代替背景或裝飾圖。

③查看所有(yǒu)背景圖片，在不破壞質量的前提下盡可(kě)能壓縮它們。

圖像是整個(gè)頁面文件的最大(dà)貢獻者，據統計(jì)，未優化的圖像平均占據網站(zhàn)總大(dà)小(xiǎo)的75%，這使得(de)頁面加載很(hěn)緩慢。并且，如果頁面速度延遲2秒(miǎo)，跳(tiào)出率就會(huì)提高(gāo)103%。了解到這些(xiē)，你(nǐ)現在就可(kě)以根據這8個(gè)技(jì)巧，去逐一排查并優化網站(zhàn)圖片了。