視覺樣式詞條 3-37

圖片格式Image Formats

也常叫做：圖片格式、檔案格式、Image Format

你可能會這樣說

手機拍的照片直接放上網站，一張好幾 MB，頁面開很久，手機流量的訪客更是直接跳出。

圖片格式的選擇一句話：照片用 JPG 或 WebP、圖示與截圖用 PNG 或 SVG。WebP 是現代格式，同樣畫質檔案常常只有 JPG 的一半，新一代瀏覽器都支援。

大小怎麼抓：網頁用不到相機的解析度，顯示寬度的兩倍就夠清晰（顯示 800px 就存 1600px 寬），再壓到 200KB 以內。

跟 AI 說「幫我把圖全部轉 WebP、限制寬度、壓到 200KB」，載入速度通常立刻有感。

✕ 手機原圖直上

IMG_4821.png

3.8 MB · 手機流量下載 6 秒多——訪客可能已經關掉了

✓ WebP＋限寬＋壓縮

hero.webp

180 KB · 下載 0.3 秒 · 畫質肉眼無差

照片用 WebP、存「顯示寬度的兩倍」就夠清晰、單張壓到 200KB 內；圖示與商標才用 SVG。

圖 3-37　同一張圖：格式與尺寸決定訪客等 6 秒還是 0.3 秒。

中文就可以

請幫我整理網站的圖片：
所有照片轉成 WebP，最大寬 1600px，單張壓到 200KB 以內。
商標與圖示換成 SVG 向量檔。
加上延遲載入，畫面外的圖先不抓。
最後產出一張處理前後的檔案大小對照表給我。