如果您發(fā)現(xiàn)網(wǎng)站圖片模糊，請(qǐng)按照以下五個(gè)步驟依次進(jìn)行排查：

（一）開啟了 WebP 格式轉(zhuǎn)換

為了提升網(wǎng)站加載速度，系統(tǒng)默認(rèn)開啟了 WebP 圖片格式自動(dòng)轉(zhuǎn)換功能。雖然 WebP 能大幅減小文件體積，但在某些特定顏色或線條復(fù)雜的圖片上，壓縮過程中可能會(huì)出現(xiàn)畫質(zhì)折損，導(dǎo)致肉眼可見的模糊。

解決方案：

檢查設(shè)置： 點(diǎn)擊網(wǎng)站左側(cè)設(shè)置按鈕-高級(jí)設(shè)置，關(guān)閉“webp圖片優(yōu)化”。

刷新頁(yè)面： 關(guān)閉設(shè)置后，刷新頁(yè)面即可。

（二）通過模塊控制改變了圖片尺寸（小圖拉大）

這是最常見的原因。指圖片原本的物理尺寸小于模塊在網(wǎng)頁(yè)上實(shí)際顯示的尺寸。
例如：您上傳了一張 300x400 像素的圖片，但在網(wǎng)站編輯器的模塊設(shè)置中，將其顯示大小設(shè)置為了 500x1200像素的圖片。當(dāng)小像素塊被強(qiáng)行撐大填充大區(qū)域時(shí)，圖片必然會(huì)變得模糊。

解決方案：

遵循“寧大勿小”原則： 上傳圖片的原始尺寸必須 大于或等于 模塊在網(wǎng)頁(yè)上的顯示尺寸。

檢查模塊設(shè)置： 查看該圖片的寬高設(shè)置（如圖），確保沒有將小尺寸圖片強(qiáng)行拉伸顯示。

（三）同一個(gè)模塊上傳尺寸不一樣的圖片

在橫幅、輪播圖模塊、產(chǎn)品列表或圖冊(cè)模塊中，如果上傳了一組尺寸規(guī)格不統(tǒng)一的圖片，系統(tǒng)為了保持排版整齊，通常會(huì)強(qiáng)制將所有圖片拉伸或壓縮到統(tǒng)一的顯示框架內(nèi)。這會(huì)導(dǎo)致尺寸較小的圖片被強(qiáng)行拉大，從而產(chǎn)生模糊和鋸齒

解決方案：

統(tǒng)一制圖標(biāo)準(zhǔn)： 在設(shè)計(jì)圖片前，請(qǐng)務(wù)必確定好該模塊所需的統(tǒng)一寬高比。

批量處理： 確保同一模塊內(nèi)的所有圖片物理尺寸（像素寬x高）保持一致。

錯(cuò)誤示范：第一張圖 (300px * 400px)，第二張圖 (500px * 1200px)

正確做法： 所有圖片均處理為 (500px * 1200px) 或該模塊建議的標(biāo)準(zhǔn)尺寸。

（四）圖片源本身模糊

如果以上設(shè)置都沒問題，那么問題可能出在“源頭”。圖片在上傳前本身就已經(jīng)被壓縮或質(zhì)量受損。這種情況常見于：

1、微信/QQ聊天記錄中保存的非原圖。

2、對(duì)屏幕截圖后獲得的圖片。

3、經(jīng)過多次轉(zhuǎn)發(fā)或第三方軟件壓縮過的圖片。

解決方案：

源頭溯源： 打開電腦本地的圖片文件，放大查看。如果本地看就已經(jīng)模糊、有噪點(diǎn)或鋸齒，上傳后只會(huì)更模糊。

獲取原圖： 請(qǐng)攝影師或設(shè)計(jì)師提供原始導(dǎo)出文件。

避免截圖： 盡量不要直接使用截圖作為網(wǎng)站素材，截圖的分辨率通常由屏幕分辨率決定，往往達(dá)不到印刷級(jí)或高清網(wǎng)頁(yè)展示的要求。