導(dǎo)致網(wǎng)站圖片模糊的主要原因就兩個(gè)，一是圖片的尺寸過小，二是圖片被壓縮得很厲害。

像我們現(xiàn)在做網(wǎng)站，在圖片的處理上基本不會犯尺寸的問題，都是裁剪剛剛好。那導(dǎo)致圖片模糊的主要原因可能只剩下壓縮的問題了。

像我平時(shí)處理圖片，第一步便是將圖片按照要求處理好，預(yù)處理完成后便使用「圖片壓縮軟件」盡可能將圖片的壓縮一下，力求圖片的存儲大小盡可能小。

但是在壓縮過程中，肯定會不可避免導(dǎo)致圖片失真，也就是沒有原圖那么清晰了。

第一步的壓縮完成后，再集中將圖片上傳到 WordPress 后臺使用。由于 WP 后臺我有設(shè)置圖片緩存，比如我用的 SG 主機(jī)便可以自動將圖片再次壓縮一遍，同時(shí)開啟 WEBP 圖片，等等操作便進(jìn)一步加劇了圖片的失真。

雖然這一系列操作能很大程度上解決圖片加載性能的瓶頸，但是新問題也接踵而至，那就是我們在前端頁面上再看這些圖片時(shí)，會發(fā)現(xiàn)圖片整體都是模糊的。

尤其是當(dāng)我們使用大輪播圖去放大產(chǎn)品細(xì)節(jié)信息時(shí)，這種現(xiàn)象尤其明顯。

都知道做電商網(wǎng)站，賣產(chǎn)品主要靠的便是圖片等視覺效果很強(qiáng)的多媒體素材，所以怎么解決圖片清晰度的問題就顯得非常重要。

這里提供兩種解決方案，僅供參考。

方案一，花錢去提高服務(wù)器的性能配置（可以的話買付費(fèi) CDN），然后將圖片緩存這些設(shè)置盡可能關(guān)閉掉。這樣一番操作下來基本能解決圖片比較模糊的問題，但是這種方案的缺點(diǎn)就是比較費(fèi)錢。

方案二，使用免費(fèi)方案搭建一個(gè)圖床服務(wù)器，將我們要用到的圖片上傳到圖床上，生成相應(yīng)的圖片鏈接，然后再將圖片鏈接嵌入到具體的網(wǎng)頁上。

目前市面上的圖床方案很多，這里建議有動手能力的話，盡可能搭建一個(gè)專屬于項(xiàng)目的圖床服務(wù)，并盡可能做到項(xiàng)目環(huán)境隔離。如果實(shí)在不想折騰，那使用第三方的服務(wù)也可以，比如 Drive，DropBox 做得都不錯。

至于網(wǎng)站前端頁面「異步加載」這些技術(shù)原理，這里我不展開了。只需要大家明確，這種將文案內(nèi)容與圖片素材相互獨(dú)立的技術(shù)方案，不僅能很好解決網(wǎng)站圖片模糊的問題，而且能極大節(jié)省服務(wù)器空間，降低程序自身的消耗。

目前我的網(wǎng)站項(xiàng)目，采取得都是這種技術(shù)方案，且使用這么久以來的反饋都很好。并且除了圖片，視頻、 PDF 文檔等等素材都可以參照這個(gè)方案進(jìn)行處理。