想一想您上次將圖片上傳到網(wǎng)站時，您很可能是從圖庫網(wǎng)站下載了該圖片，然后將其上傳到了網(wǎng)站的后臺，然后將其插入了頁面。這樣做對嗎？當(dāng)然不對。您無形之中給網(wǎng)站增加了巨大的文件，這降低了頁面速度。而且，搜索引擎如果沒有alt文本就無法讀取您的圖片。

現(xiàn)在讓我們改變它。有數(shù)據(jù)顯示，所有的網(wǎng)絡(luò)搜索中有20％以上是通過圖片搜索進行的。SEO業(yè)余愛好者和專業(yè)人士都知道，為您的網(wǎng)站優(yōu)化圖像非常值得。沒有適當(dāng)?shù)膱D像優(yōu)化，您將浪費寶貴的SEO資源。

圖像優(yōu)化具有許多優(yōu)勢，例如，更好的用戶體驗，更快的頁面加載時間以及其他排名機會。而且，它正在變得越來越重要。但是，哪些因素對確保您的圖片可找到且不會降低網(wǎng)站速度最重要？這是您需要了解的11個重要的圖像優(yōu)化技巧。

1.選擇正確的格式

解碼所有各種圖像格式就像您第一次在淘寶上購物一樣。但是，在開始將圖像添加到站點之前，您需要確保已選擇最佳的文件類型。

盡管有許多圖像格式可供選擇，但PNG和JPEG是網(wǎng)絡(luò)上最常見的格式。

• PNG：產(chǎn)生質(zhì)量更好的圖像，但文件較大。
• JPEG：您可能會失去圖像質(zhì)量，但是可以調(diào)整質(zhì)量等級以找到良好的平衡。
• WebP：使用這種選擇無損或有損壓縮，這是Chrome和Firefox支持的圖像格式，IE目前并不支持。

對我們來說，PNG是常用的圖像格式。通常，我們只將JPEG用于由真正的攝影師拍攝得更大，更可視的圖像。但是，對于我們的日常使用，PNG是必經(jīng)之路。

2.壓縮圖像

是的，在上傳未壓縮的圖像后，您的網(wǎng)頁訪問速度將急速下降。根據(jù)HTTP Archive的數(shù)據(jù)，圖像平均占整個網(wǎng)頁重量的21％。

這就是為什么我們強烈建議您在上載到您的網(wǎng)站之前壓縮圖像。您可以在Photoshop中執(zhí)行此**作，也可以使用TinyPNG之類的工具。TingPNG也有一個WordPress插件，您也可以使用。

或者，更進一步，并使用圖像CDN來檢測設(shè)備并在交付之前優(yōu)化圖像。Cloudinary和Imgix是嘗試的兩種選擇。

Increasingly.com通過壓縮圖像將網(wǎng)站速度提高了33％/ 2秒。

我們的意思是，壓縮圖像后，更快的頁面速度提升用戶體驗。

如果不確定圖像如何影響頁面速度，建議您使用Google的PageSpeed Insights工具。

3.創(chuàng)建獨特的圖像

您希望您的照片在您的網(wǎng)站上彈出。如果您用庫存圖像填充網(wǎng)站，您將看起來像原始的–就像其他數(shù)千個脫穎而出的網(wǎng)站一樣。太多的網(wǎng)站到處都是相同的通用圖片。

考慮一個外貿(mào)網(wǎng)站、一家財務(wù)公司網(wǎng)站和一家網(wǎng)絡(luò)公司網(wǎng)站所有這些網(wǎng)站實際上都使用商人微笑的相同圖片，那么這些網(wǎng)站都無法從圖片搜索獲得任何好處。

盡管您可能已對庫存圖像進行了完美的優(yōu)化，但不會產(chǎn)生與原始高質(zhì)量圖像相同的影響或潛在的SEO收益。

您擁有的原始圖片越多，用戶獲得的體驗就越好，相關(guān)搜索排名的幾率就越高。

4.編寫SEO友好的替代文本

當(dāng)瀏覽器無**確呈現(xiàn)圖像時，Alt標(biāo)簽是圖像的替代文本。與標(biāo)題類似，alt屬性用于描述圖像文件的內(nèi)容。

當(dāng)圖片無法加載時，您會在左上角看到一個帶有alt標(biāo)簽的圖片框。確保它們適合圖像并確保圖片相關(guān)。

注意alt標(biāo)簽也有利于整體頁面SEO策略。您想確保所有其他優(yōu)化區(qū)域都在適當(dāng)?shù)奈恢茫侨绻麍D像由于任何原因無法加載，則用戶將看到該圖像應(yīng)該是什么。

另外，在網(wǎng)站上的圖像上添加適當(dāng)?shù)腶lt標(biāo)簽可以通過將關(guān)鍵詞與圖像相關(guān)聯(lián)來幫助您的網(wǎng)站在搜索引擎中獲得更好的排名。

它為搜索引擎提供了有關(guān)圖像主題的有用信息。我們使用此信息來幫助確定最佳圖像，以返回用戶查詢。

描述性替代文字可以準(zhǔn)確地描述用戶照片中的內(nèi)容。例如，假設(shè)您的網(wǎng)站上有一張巧克力圖片。

替代文字可以顯示為：

<img src ="chocolate-1.jpg" alt ="巧克力" />

但是，描述該圖像的更好的替代文本應(yīng)為：

<img src ="chocolate-1.jpg" alt ="咖啡味黑巧克力棒" />

在頁面的緩存文本版本中可以查看替代文本，從而有助于用戶和搜索引擎收益。為了獲得更多SEO值，當(dāng)圖像鏈接到網(wǎng)站上的其他頁面時，替代文本可以用作內(nèi)部鏈接的**文本。

5.考慮映像文件的結(jié)構(gòu)

通常搜索引擎會使用文件路徑和文件名對圖像進行排名。重復(fù)：文件路徑和文件名是實際的排名因素。

例如，如果您是一個擁有多個產(chǎn)品的電子商務(wù)品牌，則建議您將子文件夾結(jié)構(gòu)化為更多與類別相關(guān)的主題，例如/shorts/或/denim/，而不是將所有產(chǎn)品圖像都放置在通用的/media/文件夾中。

6.使頁面標(biāo)題和描述

搜索引擎使用您的頁面標(biāo)題和描述作為圖像搜索算法的一部分。

您所有基本的頁面SEO因素（例如元數(shù)據(jù)，標(biāo)題標(biāo)簽，頁面上的副本，結(jié)構(gòu)化數(shù)據(jù)等）都會影響搜索引擎對圖片進行排名的方式。

7.定義尺寸

您需要在源代碼中定義圖像尺寸。但是，如果您都不使用它們，則定義寬度和高度仍然是最佳做法。它提供了更好的用戶體驗。

另外，它允許瀏覽器在加載CSS之前調(diào)整圖像大小。這將阻止頁面在加載時跳轉(zhuǎn)。

圖像尺寸屬性對于防止累積布局偏移（CLS）問題也很重要。確保為每個圖像和視頻元素包含width和height屬性是關(guān)鍵。

這可以告訴瀏覽器為資源分配多少空間，并防止煩人的內(nèi)容偏移降低您的網(wǎng)站評分。

8.使圖像移動友好

圖片的移動SEO也非常重要。最糟糕的情況是，它可以為您帶來較高的跳出率和較低的轉(zhuǎn)化率。但是，最好的是，它可以為您提供更多的排名功能和更好的用戶參與度。

問題是，如何針對移動優(yōu)先索引優(yōu)化圖像？

您創(chuàng)建響應(yīng)圖像。這意味著無論用戶使用臺式機還是移動設(shè)備，圖像都將根據(jù)屏幕的大小進行縮放。

Mozilla提供了全面的使用srcset和sizes屬性來向瀏覽器提供其他源圖像，從而可以顯示為設(shè)備調(diào)整大小的相同圖像內(nèi)容。

重要的是，在每一行上使用屬性值的不同部分來格式化它，如本示例中從其資源中所示：

<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">

想了解有關(guān)使用srcset生成響應(yīng)圖像的更多信息請**的客服。

9.將圖像添加到您的站點地圖

無論是將圖像添加到站點地圖中還是為圖像創(chuàng)建新的站點地圖，都需要在站點地圖中的某個位置放置圖像。

將圖片放在站點地圖中會大大增加搜索引擎對圖片進行爬網(wǎng)和建立索引的機會。因此，導(dǎo)致更多的網(wǎng)站流量。

圖像優(yōu)化關(guān)鍵要點

因此，在開始將圖像上傳到您的站點之前，請確保遵循上面的圖像優(yōu)化規(guī)則。

最重要的是確保圖像和替代文本與頁面相關(guān)。其他要點：

• 選擇正確的文件格式。PNG是我們最喜歡的文件格式。
• 減小文件大小以加快頁面加載速度。
• 確保頁面上的SEO元素（元數(shù)據(jù)，結(jié)構(gòu)化數(shù)據(jù)等）與圖像配對。
• 為了實現(xiàn)可爬網(wǎng)性，請創(chuàng)建圖像站點地圖，或確保您的圖像在站點地圖中具有特色。

優(yōu)化圖像不是開玩笑。隨著搜索技術(shù)的進步，多媒體變得越來越重要，而您的整個站點將從上述步驟中受益。

本文原作者為陳學(xué)龍，轉(zhuǎn)載請注明：出處！如該文有不妥之處，請聯(lián)系站長刪除，謝謝合作~