最近在搭建的這個(gè)詢盤站點(diǎn)，有碰到一些問(wèn)題，其中圖片的優(yōu)化這塊處理起來(lái)比較棘手。那這篇文章就簡(jiǎn)單記錄一下，對(duì)于圖片的一些優(yōu)化經(jīng)驗(yàn)。

其實(shí)一般網(wǎng)站上的圖片，出現(xiàn)的最大問(wèn)題便是圖片展示不清晰。尤其是當(dāng)網(wǎng)站上有大量圖片展示，且又有大幅的頁(yè)首輪博圖時(shí)，展示不清晰的問(wèn)題會(huì)更加明顯。

究其原因，除了 WordPress 對(duì)圖片的預(yù)處理外，還有便是我們?cè)谧鏊俣葍?yōu)化時(shí)，開啟了圖片壓縮，這也某種程度上導(dǎo)致圖片在視覺效果上很模糊。

可能你會(huì)好奇，既然圖片展示這么模糊，為什么不直接將圖片壓縮關(guān)閉掉，然后上傳更加高清的圖片，或者是矢量圖呢。

這就又涉及到網(wǎng)站的速度優(yōu)化問(wèn)題了。

我做過(guò)實(shí)驗(yàn)，在頁(yè)首上布局一張全寬的輪播圖片，不開啟壓縮的話，在速度測(cè)試時(shí)普遍會(huì)將網(wǎng)站的加載速度拖垮 1.2 秒左右。也就是說(shuō)，當(dāng)我們對(duì)這些多媒體資源置之不理時(shí)，頁(yè)面上的素材越多，網(wǎng)站的整體速度便會(huì)越慢。

所以，這便陷入一個(gè)“即要又要”悖論。一邊想頁(yè)面上的圖片展示清晰度更高，一邊想要網(wǎng)站頁(yè)面的加載速度更快，但自己還不想投入更多資金去升級(jí)服務(wù)器配置。

為了解決這個(gè)問(wèn)題，我嘗試了幾種方法，簡(jiǎn)單分享一下。

因?yàn)閱渭兩蟼鞲咔鍒D片，然后再輕微壓縮的這種方法，并不能解決速度加載的痛點(diǎn)，所以我在一開始就放棄了這種方法。相反，我使用的是搭建一個(gè)獨(dú)立圖床服務(wù)，將需要用到的圖片先上傳到圖床上生成圖片鏈接，然后再將圖片插入到需要使用的地方。

但這種方法體驗(yàn)下來(lái)很麻煩，因?yàn)?WordPress 很多地方，并不支持直接的 html 代碼編輯。比如博客文章的封面圖就沒有辦法使用“置入 html”的方式來(lái)添加圖片。

且這種方案還有一點(diǎn)極大的不好，就是做不了圖片 SEO。通過(guò)這種方式在頁(yè)面上添加的圖片，不會(huì)體現(xiàn)在 Sitemap 文件中，更不會(huì)被搜索引擎收錄索引。

正是基于這些弊端，只能最后放棄這種方法，轉(zhuǎn)而去修改自己的頁(yè)面設(shè)計(jì)。索性放棄之前那種大開大合的全寬型圖片設(shè)計(jì)，而去使用一些小清新的圖片布局。

比如上圖，便是我使用的一種圖片布局樣式，采用文字加圖片的展現(xiàn)形式來(lái)盡可能縮小圖片大小。相較于過(guò)去那種寬度 1920px 的大幅圖片，這種展現(xiàn)樣式只需要上傳一張寬度為 500px 的小幅圖片即可。自認(rèn)為這樣的方案，很巧妙的在圖片清晰度、加載速度與有限資金之間實(shí)現(xiàn)了平衡。

當(dāng)然，網(wǎng)站上僅僅只有一個(gè)這樣的布局肯定不行。可以的話多看看優(yōu)秀的設(shè)計(jì)案例，然后收集一些放在自己的案例庫(kù)中，以方便后續(xù)的網(wǎng)站優(yōu)化。

至于從哪里收集，其實(shí)并不難。多看看 Canva 上的優(yōu)秀設(shè)計(jì)，有事沒事的時(shí)候多看看 Themeforest 上的那些熱銷模板，看到好的記得記錄下來(lái)。