如何優(yōu)化網(wǎng)站產(chǎn)品圖片？

Why|為什么要優(yōu)化圖片？

1、圖像是網(wǎng)頁的重要組成部分

根據(jù)號(hào)稱“人類數(shù)字圖書館”的Internet Archive統(tǒng)計(jì)，圖片占網(wǎng)頁上需要加載總數(shù)據(jù)的比例達(dá)60％以上,也就是說，圖像是任何網(wǎng)站的重要組成部分。

2、內(nèi)容營(yíng)銷需要圖文并茂

文字：雖然占用空間小，易讀易懂，但純文字枯燥乏味、缺乏吸引力。

圖片：雖然直觀形象，沖擊視覺，有感染力，但占用空間大，且搜索引擎目前無法直接識(shí)別圖片內(nèi)容。

只有兩者結(jié)合，才能充分發(fā)揮內(nèi)容營(yíng)銷的價(jià)值，二者缺一不可！

How|怎樣優(yōu)化圖片

1、圖片的數(shù)量

就是說一個(gè)網(wǎng)站我們應(yīng)該選擇多少?gòu)垐D片呢？沒有固定的標(biāo)準(zhǔn)，正確的方式是根據(jù)網(wǎng)站頁面位置的不同，結(jié)合實(shí)際情況來進(jìn)行搭配，好的設(shè)計(jì)總是圖文結(jié)合讓人易懂，印象深刻。

2、圖片的大小

體積：

需要說明，這里指的是一張圖片有多少KB，而不是指像素/尺寸（就是圖片的長(zhǎng)寬度），從各種用戶體驗(yàn)角度而言，在保證實(shí)際需求的情況下，應(yīng)該選擇體積小一點(diǎn)的圖片，利于加載。

清晰度：

為了網(wǎng)站的整體美觀度，圖片的清晰度和色彩飽和度也需要注意。

格式：

常見的有jpg、png、gif、webp等，搜索引擎喜愛高質(zhì)量而且加載速度快的圖片，從這一點(diǎn)來說，我們首選jpg。

調(diào)整：

我們對(duì)圖片的調(diào)整可以使用PS、美圖秀秀、Windows畫圖工具等。

【https://www.photopea.com/】—在線PS工具網(wǎng)址

【Image Optimizer】圖片壓縮工具、網(wǎng)頁插件可以對(duì)圖片大小進(jìn)一步無損壓縮。

3、可讀性

文件的命名：

×錯(cuò)誤命名：【IMG _65jpg】

【QQ圖片20171011154803.jpg】

√正確命名:【steel tube.jpg】

HTML標(biāo)簽:

Alt、Title、Src的使用，可以幫助搜索引擎蜘蛛更好的理解圖片含義，提升用戶閱讀體驗(yàn)。

如Alt標(biāo)簽的使用：如果在圖片加載不出來的情況下，如果使用了，仍可以顯示文字內(nèi)容，如下圖所示：

如果不使用，就會(huì)出現(xiàn)下圖這種尷尬的情況。

where|圖片在哪里使用？

favicon:

如果我們?cè)O(shè)置了favicon，用戶收藏網(wǎng)頁的時(shí)候，會(huì)顯示我們?cè)O(shè)定的圖標(biāo)，有利于品牌形象的建設(shè)，如果沒有，就會(huì)出現(xiàn)下面紅框中的空白。