網站圖片壓縮不會糊的做法，是換格式、照顯示尺寸出圖，而不是把品質一路往下調。我們拿本站作品頁正在用的 15 張作品縮圖實測：同樣 720×480 像素，原本的 JPG 合計 962 KB；改成 WebP（品質 75）是 411 KB，省 57%；改成 AVIF（品質 50）是 282 KB，省 71%，兩者與原圖的結構相似度都在 0.98 左右，肉眼看不出差別。反過來，如果只把 JPG 品質從 86 降到 75，只省 25%；把 AVIF 壓到品質 25，檔案剩 117 KB，但文字多的截圖小字已經糊到讀不出來。
這篇寫給自己管官網的企業窗口，以及正在跟網頁設計廠商討論改版的人。Core Web Vitals 那篇只用一句話帶過「改用 WebP 並依螢幕寬度提供不同尺寸」，這裡把格式怎麼選、品質設多少、srcset 怎麼寫、alt 怎麼寫一次說清楚，數字全部來自 2026 年 10 月 23 日的實測。
網站圖片壓縮實測：15 張作品縮圖，WebP 與 AVIF 各省多少
樣本是本站作品頁的 15 張作品縮圖，都是網站首頁截圖，有照片、色塊、也有很多小字，正好是企業官網最常見的圖片類型。原檔是 720×480 像素的 JPG，品質約 86、合計 962,156 位元組，單張 43 KB 到 98 KB；作品頁上的顯示尺寸是 360×240，等於已經替高解析度螢幕準備了兩倍大的圖。
我們用同一套工具把每張圖轉成不同格式與品質，再拿轉檔後的圖跟原圖比對「結構相似度」（SSIM，1 代表完全相同，數字越低差異越大）。下表的平均值是 15 張的平均，最低值是差異最大的那一張：
| 格式與設定 | 尺寸 | 15 張合計 | 與原檔相比 | SSIM 平均／最低 |
|---|---|---|---|---|
| 原檔 JPG（品質約 86） | 720×480 | 962 KB | 100% | — |
| JPG 重新壓縮，品質 85 | 720×480 | 869 KB | 90% | 0.999／0.998 |
| JPG 重新壓縮，品質 75 | 720×480 | 721 KB | 75% | 0.989／0.975 |
| WebP 品質 85 | 720×480 | 584 KB | 61% | 0.990／0.983 |
| WebP 品質 75 | 720×480 | 411 KB | 43% | 0.982／0.961 |
| AVIF 品質 60 | 720×480 | 386 KB | 40% | 0.989／0.978 |
| AVIF 品質 50 | 720×480 | 282 KB | 29% | 0.981／0.956 |
| WebP 品質 40（壓過頭） | 720×480 | 283 KB | 29% | 0.968／0.925 |
| AVIF 品質 25（壓過頭） | 720×480 | 117 KB | 12% | 0.937／0.836 |
2026-10-23 實測。工具：Pillow 12.2（libwebp 1.6.0、libavif 1.4.1，WebP method 6、AVIF speed 4）；SSIM 以灰階、8×8 區塊計算，比對對象是原本的 JPG。不同編碼器的「品質」數字刻度不同，WebP 75 不等於 JPG 75。
這張表可以讀出三件事：
- 換格式比調品質有效。JPG 從 86 降到 75 只省 25%；WebP 品質 85 的 SSIM 與它相當（0.990 對 0.989），檔案卻只有原檔的 61%，降到品質 75 更省到 57%。原本就已經壓過一次的 JPG，再用 JPG 壓一次，空間不大。
- 同樣大小，AVIF 比 WebP 清楚。AVIF 品質 50 和 WebP 品質 40 檔案幾乎一樣大（282 KB 對 283 KB），但 AVIF 的 SSIM 是 0.981，WebP 只剩 0.968，最差那張更是 0.956 對 0.925。
- 糊不糊，看文字最多的那一張。15 張裡差異最大的都是同一張：一個塞滿新聞列表小字的舊式網站首頁。AVIF 品質 25 時，它的 SSIM 掉到 0.836，實際打開來看，列表裡的日期與標題已經糊成一片；同一張圖用 WebP 品質 75，小字仍然清楚。平均值看起來還好的時候，最差那一張可能已經不能用了。
圖片格式怎麼選：JPG、PNG、WebP、AVIF、SVG 各用在哪
格式不是越新越好，而是看圖片的內容。企業官網常見的圖片可以照下表分：
| 格式 | 適合 | 不適合 | 注意 |
|---|---|---|---|
| SVG | LOGO、圖示、簡單線條圖 | 照片、截圖 | 向量格式，放大不糊；要確認伺服器有對它做 gzip 或 brotli 壓縮 |
| WebP | 照片、截圖、需要透明背景的去背圖 | — | 相容性好、轉檔工具多，是大多數網站的預設選擇 |
| AVIF | 照片、大張橫幅、作品圖 | 需要大量即時轉檔的情況 | 同畫質檔案更小，但編碼較慢，部分主機的影像工具還不支援輸出 |
| JPG | 當作 WebP、AVIF 的備援 | 文字截圖、需要透明背景 | 不支援透明；反覆存檔畫質會一直往下掉 |
| PNG | 需要逐像素精確的截圖、少量色彩的圖表 | 照片 | 照片存成 PNG 常是同畫質 JPG 的數倍大 |
本站自己的例子：首頁與頁尾的 LOGO 在 2026 年 10 月改成 SVG，原始檔 54,539 位元組，伺服器以 brotli 壓縮後實際傳輸 18,664 位元組，在高解析度手機上也不會糊。我們的 Linux 主機是 LiteSpeed，WebP 與 AVIF 的檔案類型都已經內建對應，現有的 WebP 圖片回應的是 image/webp、瀏覽器快取一年。
值得注意的是工具支援。同一台主機上的 ImageMagick 能輸出 WebP，但這個版本不能輸出 AVIF；這在虛擬主機上很常見。所以實務上有兩種做法：一是在自己電腦或設計流程裡先轉好 AVIF 再上傳；二是只在主機端自動轉 WebP。如果網站是 WordPress，主機層的快取外掛多半能自動轉 WebP，整體的速度檢查順序見WordPress 網站很慢怎麼辦。
新格式一定要留備援
較舊的瀏覽器與作業系統不支援 AVIF，少數更舊的也不支援 WebP。正確寫法是用 <picture> 依序列出 AVIF、WebP，最後用一般的 <img> 指向 JPG，瀏覽器會自己挑第一個看得懂的格式下載，不支援的就拿 JPG。直接把網站上所有 JPG 換成 AVIF、不留備援，看起來省了流量，代價是一部分訪客看到破圖。
依螢幕尺寸出圖：srcset 與 sizes 讓手機只下載需要的大小
格式解決「同一張圖多大」，尺寸解決「需不需要這麼大」。同樣 15 張作品縮圖，如果另外輸出一份 360×240 的版本給一般解析度的螢幕：
| 版本 | 720×480（兩倍圖） | 360×240（一倍圖） |
|---|---|---|
| JPG 品質 85 | 869 KB | 286 KB |
| WebP 品質 75 | 411 KB | 146 KB |
| AVIF 品質 50 | 282 KB | 95 KB |
2026-10-23 實測，同上一張表的工具與設定；一倍圖以 Lanczos 縮小。
寬高各縮一半，像素剩四分之一，檔案大約剩三分之一。從原本 962 KB 的 JPG，到一倍圖的 AVIF 只要 95 KB，差了十倍。這就是為什麼「依螢幕尺寸出圖」要跟「換格式」一起做：手機版面上一張縮圖只占半個螢幕寬，卻下載桌機用的兩倍大圖，是行動版最常見的浪費。用手機或相機直接上傳、寬度五千像素以上的原始照片更是如此。
寫法如下，以作品縮圖為例（顯示寬度 360 像素，手機上占滿版面寬度）：
<picture>
<source type="image/avif"
srcset="/works/83-360.avif 360w, /works/83-720.avif 720w"
sizes="(max-width: 560px) 100vw, 360px">
<source type="image/webp"
srcset="/works/83-360.webp 360w, /works/83-720.webp 720w"
sizes="(max-width: 560px) 100vw, 360px">
<img src="/works/83-720.jpg" alt="笠美科技股份有限公司企業網站設計作品"
width="360" height="240" loading="lazy" decoding="async">
</picture>
重點有四個：
srcset列出每個檔案的實際寬度（360w、720w），sizes告訴瀏覽器這張圖在版面上會顯示多寬，瀏覽器再依螢幕解析度自己挑檔案。只寫 srcset、不寫 sizes，瀏覽器會假設圖片占滿整個視窗，常常挑到最大那張。- 尺寸準備到顯示寬度的兩倍就夠。三倍螢幕的手機，多給三倍圖在肉眼上的差別很小，檔案卻又大一截。
- 寫上
width與height。瀏覽器在圖片下載前就能先留好位置，版面不會跳動；本站實測的頁面 CLS 都在 0 到 0.001 之間，靠的就是這一項。 - 首屏以外才加
loading="lazy"。首屏的主視覺圖如果被設成延遲載入，反而會拖慢 LCP；首屏主圖要立刻載入，必要時加上fetchpriority="high"。
圖片 alt 怎麼寫：不糊之外，還要讓搜尋引擎與 AI 看得懂
壓縮與尺寸處理的是「快」，alt 處理的是「懂」。alt 是給螢幕報讀軟體、圖片載入失敗時，以及搜尋引擎與 AI 判斷圖片內容用的文字。寫法的原則是：這張圖在這一頁要告訴讀者什麼，就寫什麼。
| 圖片類型 | 好的寫法 | 常見的錯誤 |
|---|---|---|
| 作品或案例縮圖 | 客戶名稱＋作品類型，例如「董氏基金會官方網站設計作品」 | 「作品1」「banner」或空白 |
| 產品照 | 型號＋看得出的特徵，例如顏色、規格 | 只寫「產品圖」 |
| 圖表、流程圖 | 圖表的結論，數字多的另外在內文寫出來 | 只寫「流程圖」，內容全鎖在圖裡 |
| LOGO | 公司名稱 | 「logo.png」 |
| 純裝飾的背景與花紋 | 空的 alt=""，讓報讀軟體跳過 | 硬塞關鍵字 |
本站首頁、作品頁、網頁設計服務頁與 Core Web Vitals 文章四頁，10 月 23 日抓線上 HTML 檢查，共 28 個 <img> 全部都有 alt 與寬高，首屏以外的都設了延遲載入。作品頁 15 張縮圖的 alt 都是「客戶名稱＋網站設計作品」的格式。這類檢查不需要工具，在瀏覽器裡按右鍵檢視原始碼、搜尋 <img 就看得到。
有一件事 alt 救不了：把重要文字做成圖片。價格表、服務流程、聯絡方式如果是一張圖，alt 再長也很難完整表達，搜尋引擎與 AI 也抽不出內容。這是近幾年新網站常見的問題，怎麼自我檢查見網站 AI 體檢。
上線前的 7 項圖片檢查
一、照片與截圖都有 WebP 或 AVIF 版本，並保留 JPG 備援。二、品質用文字最多的那張圖當樣本決定，小字看得清楚才算數。三、每張圖準備一倍與兩倍兩種寬度，用 srcset 與 sizes 交給瀏覽器挑。四、手機或相機原檔不直接上傳，長邊先縮到顯示寬度的兩倍以內。五、所有 img 都寫 width 與 height。六、首屏主圖不延遲載入，其餘延遲載入。七、alt 寫清楚圖要傳達的事，重要文字不要只放在圖裡。
這七項多半是改版或建站時一次做好，事後一張一張補反而費工。跟廠商談網頁設計時，可以直接問：圖片會輸出哪些格式與尺寸？後台上傳圖片時會不會自動縮圖、轉 WebP？如果網站已經交給廠商維護，網站代管合約裡也可以把「新上傳的圖片依規格處理」寫進去，否則改版時做好的規格，半年後就被新上傳的大圖打破。報價時這幾項怎麼拆，可以對照形象網站製作費用怎麼算。
瑪尼國際成立於 2004 年，深耕逾 20 年、服務逾 500 家企業。從網站設計、圖片規格、主機的壓縮與快取設定，到上線後的維護由同一組人負責，這就是我們的一條龍服務：圖片格式與尺寸在設計階段訂好，主機端的 WebP 與 AVIF 檔案類型、壓縮與快取期限也一併設定，不必在設計公司與主機商之間來回確認。
常見問題
Q：網站圖片壓縮品質要設多少才不會糊？
沒有一個數字適用所有編碼器，因為 JPG、WebP、AVIF 的品質刻度彼此不能直接比較。以我們 15 張作品縮圖的實測，WebP 品質 75 到 85、AVIF 品質 50 到 60 之間，與原圖的結構相似度平均都在 0.98 以上，肉眼不易看出差別；WebP 降到 40、AVIF 降到 25 時，文字多的截圖小字就糊到讀不出來。實務做法是挑一張文字最多、細節最密的圖當樣本，往下調到看得出差異，再退回上一級。
Q：WebP 和 AVIF 該選哪一個？
要省最多就選 AVIF，要好處理就選 WebP。同樣 15 張圖，WebP 品質 75 省下 57%，AVIF 品質 50 省下 71%，畫質相近；但 AVIF 編碼較慢，部分主機上的影像工具還不支援輸出，較舊的瀏覽器也不支援。兩者都建議用 picture 標籤保留 JPG 當備援，瀏覽器會自己挑支援的格式下載。
Q：網站圖片的 alt 要怎麼寫？
寫成「這張圖在這一頁要告訴讀者的事」，通常一句話、20 字上下。作品縮圖寫客戶名稱加作品類型，產品照寫型號與看得出的特徵，圖表寫結論；純裝飾的圖留空 alt=""，讓螢幕報讀軟體跳過。不要堆關鍵字，也不要寫「圖片」「照片」這類多餘的字。