網(wǎng)頁設(shè)計圖片優(yōu)化問題 ?

網(wǎng)頁里，一張圖片*不要超過200K，若體積過大，則會導(dǎo)致網(wǎng)頁加載速度過慢，影響用戶體驗度，網(wǎng)站跳出率也就會有所增加。下面介紹網(wǎng)頁設(shè)計圖片優(yōu)化問題，希望這些內(nèi)容對您有幫助。 ?

1、尺寸和大小 ?

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

2、體積大小 ?

一張圖片*不要超過200K，若體積過大，則會導(dǎo)致網(wǎng)頁加載速度過慢，影響用戶體驗度，網(wǎng)站跳出率也就會有所增加。 ?

3、清晰度 ?

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

4、去除水印 ?

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

5、圖片“原創(chuàng)” ?

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

圖片優(yōu)化在網(wǎng)頁設(shè)計中的原則 ?

1. 在網(wǎng)站設(shè)計之初，就先要做好規(guī)劃，比如背景圖片如何使用等等。 ?

2. 編輯圖片的時候，要做好裁剪，只展示必要的、重要的、同內(nèi)容相關(guān)的部分。 ?

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

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

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

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

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

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

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

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

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

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

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

14. 圖片在優(yōu)化之前，若能降噪的話，可以獲得額外的20%多的壓縮。 ?

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

網(wǎng)頁設(shè)計中圖像優(yōu)化的詳細(xì)方法 ?

圖像優(yōu)化： ?

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

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

Alt屬性： ?

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

?

文本說明： ?

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

1、在圖片上方或下方加上包含關(guān)鍵詞的描述文本; ?

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

3、在圖片下方或旁邊增加如"更多某某"鏈接，包含關(guān)鍵詞。 ?

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

總體上，網(wǎng)頁應(yīng)盡量減少裝飾性圖片以及大圖片。而Alt屬性中的文字對搜索引擎來說，其重要性比正文內(nèi)容的文字要低。 ?

Gif和JPGE圖像優(yōu)化： ?

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

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

SEO網(wǎng)頁設(shè)計常見的錯誤 ?

1、瀑布流的無限加載 ?

瀑布流技術(shù)算是一個熱門的技術(shù)，主要用于改善用戶體驗，但在某些方面卻嚴(yán)重影響了SEO效果，如果你曾經(jīng)認(rèn)真的分析瀑布流網(wǎng)站，你會發(fā)現(xiàn)它并不能抓取AJAX加載的相關(guān)內(nèi)容。 ?

那么目前解決這個問題的*的辦法，應(yīng)該是增加側(cè)欄，保留*內(nèi)容，增加隨機內(nèi)容，從而確保搜索引擎可以很好的抓取內(nèi)容。 ?

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

2、移動端廣告 ?

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

3、網(wǎng)址提交 ?

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

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

4、圖像與媒體文件 ?

提高網(wǎng)站加載速度，已經(jīng)是2018年SEO優(yōu)化的*目標(biāo)，但我們知道對于個別行業(yè)網(wǎng)站而言，往往充斥著大量的圖片與短視頻。 ?

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

雖然，百度識圖可以很好的識別圖像內(nèi)容，但我們?nèi)匀唤ㄗh給予圖片打上ALT標(biāo)簽。 ?

5、H1-H3標(biāo)簽內(nèi)容 ?

你是否經(jīng)常發(fā)現(xiàn)很多大型站點幾乎缺少H1標(biāo)簽，這并不代表這個標(biāo)簽不重要，而是行業(yè)大站自身的高權(quán)重，掩蓋了這個瑕疵。 ?

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

6、站內(nèi)結(jié)構(gòu)標(biāo)準(zhǔn)化 ?

這是一個極為重要的問題，我們需要做的是優(yōu)化網(wǎng)站結(jié)構(gòu)設(shè)計，確保同一個內(nèi)容，只有一個URL與其對應(yīng)，避免重復(fù)內(nèi)容，值得注意的是，URL結(jié)尾的斜杠對SEO的影響。 ?

總結(jié)：在網(wǎng)頁設(shè)計上線之初，合理的梳理網(wǎng)站結(jié)構(gòu)，建立相關(guān)的文章發(fā)布模板，對提高SEO工作效率，有著重要的作用。 ?