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

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

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

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

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

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

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

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

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

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

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

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

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

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

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