解決網站圖片模糊的問題

導致網站圖片模糊的主要原因就兩個，一是圖片的尺寸過小，二是圖片被壓縮得很厲害。

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

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

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

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

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

尤其是當我們使用大輪播圖去放大產品細節信息時，這種現象尤其明顯。

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

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

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

方案二，使用免費方案搭建一個圖床服務器，將我們要用到的圖片上傳到圖床上，生成相應的圖片鏈接，然后再將圖片鏈接嵌入到具體的網頁上。

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

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

目前我的網站項目，采取得都是這種技術方案，且使用這么久以來的反饋都很好。并且除了圖片，視頻、 PDF 文檔等等素材都可以參照這個方案進行處理。