網頁設計圖片優化問題

網頁里，一張圖片最好不要超過200K，若體積過大，則會導致網頁加載速度過慢，影響用戶體驗度，網站跳出率也就會有所增加。下面介紹網頁設計圖片優化問題，希望這些內容對您有幫助。

1、尺寸和大小

有很多人不知道為何搜索結果左側有的網站會有一張小圖，而有的沒有。主要原因是別人圖片尺寸符合搜索引擎的要求，建議一般尺寸寬高比例：121：75，這個比例的圖片大小比較合理，也方便搜索引擎左側顯示。

2、體積大小

一張圖片最好不要超過200K，若體積過大，則會導致網頁加載速度過慢，影響用戶體驗度，網站跳出率也就會有所增加。

3、清晰度

圖片清晰度對用戶體驗的影響不必多解釋，若不清晰，很多時候用戶看不到圖上的重要信息就把網頁關閉掉。

4、去除水印

我們大多用的圖都是在網上搜索出來的，其實很多都被人家加上水印，所以再用圖的時候，記得將水印去除。

5、圖片“原創”

搜索引擎喜歡新鮮的東西，直接去百度盜的圖，相似度太高。最好去圖片平臺搜索還未收錄的美圖，懂PS的當然也可以自己做圖。

圖片優化在網頁設計中的原則

1. 在網站設計之初，就先要做好規劃，比如背景圖片如何使用等等。

2. 編輯圖片的時候，要做好裁剪，只展示必要的、重要的、同內容相關的部分。

3. 在輸出圖片的時候，圖片大小要設置妥當，長寬像素就設成你所需要的大小，而不要輸出大圖片，然后使用的時候，再指定較小的長寬，縮小圖片。

4. 盡量組合裝飾性的圖片，以節省http請求數，在具體使用時，采用CSS sprite的方式。

5. 頁面上的邊框，背景，盡可能的使用CSS的方式來展示，而不要用圖片。

6. 圖片使用上，能用png格式的盡量用，以替代過去常用的gif和jpeg格式。在保證質量的情況下，用最小的文件。

7. 在html中明確指定圖片的大小。

8. 若使用photoshop的話，縮放圖片通常會讓圖像模糊，可以用smart sharpen來讓圖片更為出色。

9. 對于GIF和PNG文件格式，最小化顏色位數，可使文件更小。

10. 對于GIF和PNG文件，最小化dithering，可使文件更小。

11. 如果圖片上要添加文字，可能的話，就不要把文字嵌入到圖片中，而是采用透明背景圖片，或者CSS定位讓文字覆蓋在圖片上，既能獲得相等的效果，還能把圖片更大程度的壓縮。

12. 在較小的GIF和PNG圖片上，可以使用有損壓縮。

13. 可能的話，使用局部壓縮，保證前景清楚的基礎上，較大程度的壓縮背景。

14. 圖片在優化之前，若能降噪的話，可以獲得額外的20多的壓縮。

15. jpg圖片也可以模糊背景，然后壓縮的時候，可以壓縮的更多。

網頁設計中圖像優化的詳細方法

圖像優化：

一般而言，搜索引擎只識讀文本內容，對圖像是不可見的。同時，圖像文件直接延緩頁面加載時間，如果超過20秒網站還不能加載，用戶和搜索引擎極有可能離開你的網站。因此，除非你的網站內容是圖片為主，比如游戲站點或者圖片至關重要，否則盡量避免使用大圖片，更不要采用純圖像制作網頁(SPLASH PAGE)。

網站圖片優化的核心有兩點：增加搜索引擎可見的文本描述，以及在保持圖像質量的情況下盡量壓縮圖像的文件大小。

Alt屬性：

每個圖像標簽中都有ALT屬性，搜索引擎會讀取該屬性以了解圖像的信息。因此，更好在所有插圖的ALT屬性中都有文字描述，并帶上該頁關鍵字在其中。

文本說明：

除了ALT屬性文字，還可以考慮以下方法直接優化圖像，使之被搜索到：

1、在圖片上方或下方加上包含關鍵詞的描述文本;

2、在代碼中增加一個包含關鍵詞段的heading標題標簽，然后在圖片下方增加文字描述。

3、在圖片下方或旁邊增加如更多某某鏈接，包含關鍵詞。

4、創建一些既吸引用戶又吸引搜索引擎的文本內頁，先把流量吸引到這些頁面，再提供文本鏈接指向你的圖片頁面。

總體上，網頁應盡量減少裝飾性圖片以及大圖片。而Alt屬性中的文字對搜索引擎來說，其重要性比正文內容的文字要低。

Gif和JPGE圖像優化：

Alt屬性和文本說明都只是對圖像之外的文本環境進行優化，下面簡單談談對圖片本身的優化處理。對圖片文件優化的目的是在盡量不影響圖像畫面效果的情況下，將其文件大小降到更低，以加快頁面整體下載速度。

網頁圖片格式主要有GIF和JPGE兩種形式。一般來講，GIF適用于線圖和企業標識;JPEG適宜照片元素的格式。主要通過減少GIF顏色數量、縮小圖片尺寸和降低分辯率來縮小文件，也可以采用層疊樣式表達到優化的目的。PhotoShop的版本越高越適用于網絡圖形。此外，將大圖片切割成若干小圖片于不同的表格區間內進行拼接，也可以相對加快下載時間。

SEO網頁設計常見的錯誤

1、瀑布流的無限加載

瀑布流技術算是一個熱門的技術，主要用于改善用戶體驗，但在某些方面卻嚴重影響了SEO效果，如果你曾經認真的分析瀑布流網站，你會發現它并不能抓取AJAX加載的相關內容。

那么目前解決這個問題的最好的辦法，應該是增加側欄，保留最新內容，增加隨機內容，從而確保搜索引擎可以很好的抓取內容。

另外，一個有效的辦法就是制作站點地圖，提交給搜索引擎。

2、移動端廣告

對于用戶體驗而言，特別是在移動設備上，如果你最近關注百度熊掌號，你會發現，百度移動搜索落地頁體驗廣告白皮書3.0，嚴格的講述相關廣告展現的具體要求，如果你發現自己在移動端配置了大量廣告，需要對照手冊進行自查，并且可以利用落地頁檢測工具進行審查。

3、網址提交

對于程序員而言，經常忽略的一件事就是網址提交給搜索引擎的配置，比如：缺乏主動提交，sitemap站點地圖，從來不會進行手動提交。

為此，在網頁設計的同時，需要在系統后臺寫入自動提交網址代碼，以及自動生成站點地圖的代碼。有必要的情況下，對于大型站點，可以每隔一定時間自行審查死鏈接，并且自動提交死鏈接給百度。

4、圖像與媒體文件

提高網站加載速度，已經是2018年SEO優化的首選目標，但我們知道對于個別行業網站而言，往往充斥著大量的圖片與短視頻。

為此，我們需要對于圖片與視頻內容進行批量壓縮，如果可以的話，盡量選用商業CDN加速，比如：百度云加速。

雖然，百度識圖可以很好的識別圖像內容，但我們仍然建議給予圖片打上ALT標簽。

5、H1-H3標簽內容

你是否經常發現很多大型站點幾乎缺少H1標簽，這并不代表這個標簽不重要，而是行業大站自身的高權重，掩蓋了這個瑕疵。

合理的分配H1-H3標簽，可以有效的告知搜索引擎文章的重點，每個段落的意義，同時你也值得關注什么是“四處一詞”

6、站內結構標準化

這是一個極為重要的問題，我們需要做的是優化網站結構設計，確保同一個內容，只有一個URL與其對應，避免重復內容，值得注意的是，URL結尾的斜杠對SEO的影響。

總結：在網頁設計上線之初，合理的梳理網站結構，建立相關的文章發布模板，對提高SEO工作效率，有著重要的作用。