圖片壓縮怎麼做？WebP 轉換與網站速度優化設定

圖片壓縮是什麼？為什麼會影響網站速度

圖片壓縮的目標，是在不明顯犧牲畫質的前提下，降低 JPG、PNG、WebP 等圖片檔案大小。如果是網站圖片，通常還要同時檢查尺寸與是否適合轉成 WebP。

網站載入圖片時，瀏覽器需要下載檔案、解碼圖片，再把它顯示在版面上。圖片容量越大，行動網路或較慢主機上的等待時間就越明顯，尤其首屏大圖很容易拖慢 LCP。

圖片壓縮會改變什麼：檔案大小、畫質、解析度

壓縮圖片時，最直接改變的是檔案大小，其次可能影響畫質與細節。若工具同時提供尺寸調整，還會改變圖片的寬度與高度。

我會先看用途再決定壓縮強度。網站文章圖不需要保留相機原始尺寸，表單照片也不需要 4000px 以上的解析度；把尺寸縮到實際需要的範圍，通常比硬把品質拉到最低更穩。

有損壓縮與無損壓縮差在哪裡

有損壓縮會捨棄部分細節，換取更小的檔案大小，適合照片、文章圖、商品圖。無損壓縮保留更多原始資訊，容量下降幅度通常較小，適合透明圖、介面截圖或文字邊緣很重要的圖片。

不要期待所有圖片都能「完全不失真」又大幅變小。實務上要做的是找到可接受的畫質底線，而不是追求零損失。

為什麼 WebP 通常比 JPG、PNG 更適合網站圖片

WebP 通常能在相近畫質下產生比 JPG 或 PNG 更小的檔案，因此很適合網站圖片最佳化。對部落格、企業網站、電商分類頁來說，WebP 轉換常是壓縮後的下一步。

但 WebP 不是所有情境都最佳。若平台只接受 JPG，或工作流程需要保留原始 PNG 透明圖，就要依限制選格式。

如何快速壓縮圖片：上傳、設定、下載

快速壓縮圖片的做法是先上傳圖片，選擇輸出格式與品質，再下載壓縮後檔案。一般照片可先用 70% 到 85% 品質測試，網站文章圖可優先評估 WebP。

單張圖片壓縮流程

單張圖片先確認用途，再上傳檔案，選擇 JPG、PNG 或 WebP，調整品質，下載後檢查容量與畫質。若只是要符合表單限制，先看平台要求的 KB、格式與長寬。

如果壓縮後文字變糊或人物邊緣破碎，代表品質太低，應稍微提高品質，或先縮尺寸再重新壓縮。

多張圖片批次壓縮流程

多張圖片批次壓縮時，先把同用途圖片放在同一批處理，例如商品主圖一批、文章封面一批、表單照片一批。設定一致的格式、寬度與品質後，再用 ZIP 下載。

批次壓縮最怕混用不同用途。商品圖和履歷照放在同一組設定裡，通常會讓其中一類圖片不是太大，就是畫質太差。

貼上圖片、拖曳上傳或輸入圖片網址的使用情境

拖曳上傳適合處理本機檔案，貼上圖片適合快速處理截圖，輸入圖片網址則適合檢查網站上既有圖片。若是私人照片、證件照或公司內部圖片，應優先選擇清楚說明本機處理或刪除規則的工具。

壓縮後檢查檔案大小與畫質

下載後先看 KB 或 MB 是否達標，再打開圖片檢查文字、臉部、商品邊緣與透明背景。網站圖片還要放進實際版面看一次，因為縮圖清楚不代表在手機首屏也清楚。

JPG、PNG、WebP、HEIC、GIF 該怎麼選

圖片格式要依用途選擇：照片多半用 JPG 或 WebP，透明背景用 PNG 或支援透明的 WebP，iPhone 的 HEIC 常需轉成 JPG 或 WebP，GIF 則適合簡短動圖但壓縮空間有限。

格式	適合用途	壓縮建議	注意事項
JPG	照片、文章圖、一般網頁圖片	品質 70% 到 85% 先測	不支援透明背景
PNG	Logo、截圖、透明背景、介面圖	優先無損或輕度壓縮	照片類 PNG 容量常偏大
WebP	網站圖片、部落格、電商圖	轉 WebP 後再檢查畫質	需確認平台或系統支援
HEIC	iPhone 拍攝來源檔	通常先轉 JPG 或 WebP	部分表單與網站後台不支援
GIF	簡短動圖	減少尺寸、幀數或改用影片格式	硬壓容易失真且容量仍大

JPG 適合照片與一般網頁圖

JPG 適合色彩連續的照片，例如人物照、旅遊圖、文章配圖與一般商品照。若不需要透明背景，JPG 通常比 PNG 更容易壓到較小容量。

PNG 適合透明背景與介面圖

PNG 適合 Logo、圖示、截圖、介面圖與需要透明背景的圖片。若把透明 PNG 轉成 JPG，透明區域通常會變成白底或黑底，這是上稿時很常見的錯誤。

WebP 適合網站速度最佳化

WebP 適合用在網站圖片最佳化，特別是首頁主視覺、文章封面、商品列表與分類頁圖片。它能降低傳輸量，對行動版網站速度通常有幫助。

HEIC 常見於 iPhone，通常需轉 JPG 或 WebP

HEIC 是 iPhone 常見的照片格式，但不少政府表單、履歷系統或網站後台仍以 JPG、PNG 為主。遇到上傳失敗時，先轉 JPG 或 WebP，再做指定大小壓縮。

GIF 壓縮限制較多，動圖不一定適合硬壓

GIF 動圖容量常受尺寸、幀數與秒數影響。若動圖太大，單純降低品質不一定有效，縮小尺寸或改用其他動態格式，通常比硬壓 GIF 更合理。

圖片壓縮到指定大小：100KB、200KB、500KB、1MB 怎麼做

要把圖片壓縮到指定大小，先確認平台限制的 KB、格式與尺寸，再依序縮尺寸、調品質、必要時換格式。若 4000px 手機照片要壓到 100KB，通常不能只靠品質滑桿。

先看平台限制：KB、格式、長寬

處理履歷、報名或政府表單前，先看限制是「小於 200KB」還是「寬高不得超過某尺寸」。有些平台同時限制 JPG 格式、長寬比例與檔案大小，漏看其中一項就可能上傳失敗。

壓不下去時，先縮尺寸再降低品質

壓不下去時，先把圖片寬度縮到實際需要的範圍，再降低品質。照片若原本寬度超過 3000px，直接壓品質很容易變糊，容量卻仍不一定達標。

為什麼 4000px 手機照片很難壓到 50KB

4000px 手機照片包含大量像素與細節，要壓到 50KB 通常會犧牲明顯畫質。這種目標大小比較像表單縮圖需求，不適合保留原始解析度。

常見目標大小建議：100KB、200KB、500KB、1MB

不同目標大小要搭配不同策略。100KB、200KB 多半是表單或履歷需求，500KB 到 1MB 則常見於網站文章圖、商品圖或後台上傳限制。

目標大小	建議做法	常見用途	壓縮失敗原因
100KB	先縮尺寸，再用 JPG 中低品質測試	履歷、報名、表單照片	原圖解析度太大或細節太多
200KB	縮到平台要求尺寸，再調整品質	政府表單、會員資料照	格式不合或保留過多 EXIF
500KB	照片用 JPG 或 WebP，避免超大尺寸	部落格、商品圖、Email	尺寸未縮或 PNG 用在照片
1MB	保留較好畫質，搭配適當寬度	網站文章圖、活動圖	多張原始相機圖未處理

依使用情境選圖片壓縮設定

圖片壓縮設定要看使用情境，不是每張圖都壓到越小越好。履歷與表單重視達標，電商圖重視細節，網站文章圖則要兼顧畫質、速度與版面尺寸。

用途	建議格式	建議寬度	目標大小	注意事項
履歷、報名、政府表單	JPG	依平台限制	100KB 到 300KB 常見	先看格式、KB、長寬規定
部落格與企業網站文章圖	WebP 或 JPG	依版面寬度設定	以清楚且快速載入為準	避免上傳相機原圖
電商商品圖與分類頁圖片	WebP 或 JPG	配合商品卡與放大檢視	列表圖小，詳情圖保留細節	邊緣、材質與顏色不能糊
LINE、Email、社群傳圖	JPG	依傳送需求縮小	以傳送順暢為主	社群平台可能再次壓縮
WordPress 上稿前圖片	WebP 優先，必要時保留 JPG	符合文章內容區寬度	避免首屏圖片過大	補上寬高、替代文字與檔名

履歷、報名、政府表單

這類圖片先求符合限制，再求畫質。建議先依平台規定縮尺寸，輸出 JPG，再逐步降低品質到 100KB 或 200KB 附近。

部落格與企業網站文章圖

文章圖要依實際版面寬度處理，不要直接上傳手機或相機原圖。若網站支援 WebP，文章封面與內文圖片可優先做 WebP 轉換。

電商商品圖與分類頁圖片

商品圖不能只追求小容量。衣料紋理、食品細節、3C 邊角與色差都會影響購買判斷，因此列表圖可壓小，商品詳情圖要保留足夠清晰度。

LINE、Email、社群傳圖

傳訊息或寄 Email 時，重點是讓檔案好傳、好開。若對方只需查看內容，縮尺寸加中等品質 JPG 就夠；若要印刷或二次設計，應保留原始檔另外傳送。

WordPress 上稿前的圖片壓縮建議

WordPress 上稿前先壓縮圖片、調整尺寸，再視主題與外掛支援情況轉成 WebP。首頁大圖與文章第一張圖要特別小心，因為它們常是影響 LCP 的主要元素。

圖片壓縮與 WebP 轉換如何改善 Core Web Vitals

圖片壓縮與 WebP 轉換能減少圖片傳輸量，常見改善位置是 LCP、行動版載入速度與頻寬使用。但圖片速度不只看 KB，還要看尺寸、載入順序與版面穩定性。

圖片過大會拖慢 LCP

LCP 常受到首屏大圖、首頁橫幅、文章封面影響。若這些圖片容量過大，使用者會先看到空白或慢慢載入的畫面，PageSpeed Insights 也可能提示圖片最佳化。

只壓縮不設定圖片尺寸，仍可能造成 CLS

壓縮只能降低檔案大小，不能自動解決版面跳動。網站圖片若沒有設定寬高，瀏覽器載入前不知道要預留多少空間，仍可能造成 CLS 問題。

網站圖片建議同時做壓縮、尺寸、WebP、lazy loading

比較完整的網站圖片流程，是先依版面調整尺寸，再壓縮，接著轉 WebP，最後設定適當的 lazy loading。首屏主圖通常不適合延後載入，內文較下方圖片才適合。

壓縮後如何用 PageSpeed Insights 檢查改善幅度

壓縮後可用 PageSpeed Insights 檢查 LCP、圖片傳輸量與未適當調整大小的圖片。若問題仍在，下一步可檢查 Core Web Vitals、CLS 修正，以及 主機速度與快取設定。

隱私與檔案安全：圖片會不會被上傳或保存

圖片壓縮工具的隱私差異很大，有些在瀏覽器本機處理，有些會上傳到伺服器。私人照片、證件照、公司商品圖，應先確認處理方式、保存時間與是否移除 EXIF。

本機處理和上傳處理有什麼差別

本機處理通常是在你的瀏覽器內完成壓縮，檔案不一定會傳到外部伺服器。上傳處理則會把圖片送到服務端壓縮，速度可能穩定，但要看清楚保存與刪除規則。

如果會上傳，應清楚說明保存與刪除時間

若工具需要上傳圖片，頁面應清楚說明檔案會保存多久、是否自動刪除、是否用於其他用途。處理證件照或未公開商品照時，我會避開說明模糊的工具。

壓縮後是否保留 EXIF、檔名與透明背景

EXIF 可能包含拍攝時間、裝置與位置資訊，壓縮時可視需求移除。檔名則建議改成可辨識的英文或數字名稱，網站上稿也較不容易出錯。透明背景圖片要確認輸出格式仍支援透明。

壓縮前後檢查清單

壓縮前後要檢查四件事：畫質是否可用、透明背景是否保留、尺寸與 KB 是否達標、上稿後是否仍清楚。這些檢查能避免圖片變小了，卻不能實際使用。

檢查文字是否變糊

含有文字的圖片，例如活動 Banner、表單截圖、商品規格圖，壓縮後要放大看字邊是否糊掉。文字圖通常不適合過度有損壓縮。

檢查透明背景是否消失

Logo、圖示、商品去背圖要確認透明背景還在。若轉成 JPG 後出現白底，代表格式選錯，應改用 PNG 或支援透明的 WebP。

檢查尺寸與 KB 是否符合平台限制

表單上傳前，請同時檢查檔案大小、格式與長寬。很多人只看 KB，卻忽略平台限制寬高，最後仍然無法上傳。

檢查網站上稿後是否仍清楚

網站圖片要在桌機與手機各看一次。後台縮圖清楚，不代表前台版面清楚；尤其是首頁大圖、商品圖與文章首圖，要用實際頁面判斷。

圖片壓縮後，下一步可以做什麼

圖片壓縮只是網站圖片優化流程的一部分。壓縮後可再做 WebP 轉換、尺寸調整、CDN 與快取設定，讓圖片在網站上真正載入得更快、更穩。

轉 WebP

若網站系統支援 WebP，壓縮後可把文章圖、商品圖與分類頁圖片轉成 WebP。轉檔後仍要檢查畫質，避免人臉、文字或商品邊緣出現壓縮痕跡。

調整圖片尺寸

圖片尺寸應配合實際顯示寬度。網站內容區如果只顯示 900px 寬，就沒有必要上傳 4000px 原圖，這會增加傳輸量，也讓後台管理變慢。

搭配 CDN 與快取

圖片壓縮能降低單張圖片大小，CDN 與快取則能改善傳送效率。圖片量大的網站，例如電商、部落格、作品集，通常需要把圖片處理和快取策略一起看。

延伸閱讀：Core Web Vitals、CLS 修正、主機速度

若圖片已壓縮但網站仍慢，可接著檢查 Core Web Vitals、Cumulative Layout Shift 修正 與 雲端主機選擇。圖片只是速度問題的一部分，主機回應、快取與前端載入也會影響結果。

常見問題

圖片壓縮常見問題多半集中在畫質、指定大小、WebP、透明背景與隱私。先確認用途，再決定格式、尺寸和品質，會比反覆拉低品質更容易成功。

圖片壓縮會影響畫質嗎？

會，尤其是有損壓縮。品質設定越低，容量通常越小，但細節、邊緣與文字可能變糊。照片可先用中等品質測試，含文字或商品細節的圖片則不要壓得太重。

JPG 和 PNG 哪一種壓縮後比較小？

照片通常 JPG 壓縮後比較小，PNG 則適合透明背景、Logo、截圖與介面圖。若把照片存成 PNG，容量常會偏大；若把透明圖轉成 JPG，透明背景可能消失。

WebP 適合所有網站圖片嗎？

WebP 很適合多數網站圖片，因為通常能在相近畫質下降低容量。但如果後台、舊版系統或第三方平台不支援 WebP，就要保留 JPG 或 PNG 作為替代格式。

圖片怎麼壓縮到 100KB 或 200KB？

先依平台要求縮小尺寸，再用 JPG 輸出並逐步降低品質。若原圖是手機高解析照片，不建議只拉低品質，因為容易變糊卻仍達不到 100KB 或 200KB。

為什麼圖片壓不進指定大小？

常見原因是解析度太大、目標 KB 太低、格式不適合，或圖片細節太多。照片若用 PNG，容量也可能偏大。先縮尺寸、換成合適格式，再調品質，成功率較高。

手機拍的照片可以直接壓縮嗎？

可以，但手機照片常有很高解析度，建議先縮尺寸再壓縮。iPhone 的 HEIC 若平台不支援，可先轉成 JPG 或 WebP，再依用途調整品質與檔案大小。

PNG 透明背景壓縮後會不會消失？

如果仍輸出 PNG 或支援透明的 WebP，透明背景通常可以保留。若轉成 JPG，透明區域多半會變成實色背景，因此 Logo、去背商品圖不要隨便轉成 JPG。

圖片壓縮後會不會被上傳到伺服器？

要看工具設計。有些工具在瀏覽器本機處理，有些會把圖片上傳到伺服器壓縮。處理證件照、私人照片或未公開素材時，應先確認保存時間與刪除規則。

壓縮圖片真的會改善網站速度嗎？

通常會，尤其是首屏大圖、商品列表圖與文章封面原本過大的情況。圖片壓縮能減少傳輸量，但仍要搭配尺寸設定、WebP、快取與正確載入順序。

已經轉 WebP，還需要壓縮圖片嗎？

需要視情況判斷。WebP 是格式轉換，不代表圖片尺寸與品質一定合理。若 WebP 檔案仍很大，應檢查寬度、高度與品質設定，再做進一步壓縮。

壓縮圖片和調整圖片尺寸有什麼不同？

壓縮圖片主要是降低檔案大小，調整尺寸則是改變寬度與高度。實務上兩者常一起做，先把尺寸縮到用途需要的範圍，再壓縮品質，效果通常較好。

Squoosh 這類工具可以離線使用嗎？

Squoosh 這類瀏覽器工具在載入後，部分功能可在本機環境處理圖片。是否能完整離線使用仍取決於工具版本、瀏覽器快取與功能設計，使用前可先測試一次。