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

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

1、尺寸和大小 ?

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

2、體積大小 ?

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

3、清晰度 ?

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

4、去除水印 ?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖像優(yōu)化： ?

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

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

Alt屬性： ?

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

?

文本說(shuō)明： ?

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

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

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

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

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

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

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

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

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

SEO網(wǎng)頁(yè)設(shè)計(jì)常見(jiàn)的錯(cuò)誤 ?

1、瀑布流的無(wú)限加載 ?

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

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

另外，一個(gè)有效的辦法就是制作站點(diǎn)地圖，提交給搜索引擎。 ?

2、移動(dòng)端廣告 ?

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

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

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

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

4、圖像與媒體文件 ?

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

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

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

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

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

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

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

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

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