圖片壓縮怎麼做?WebP、JPG、PNG 差在哪+免費工具推薦 2026

網站越來越慢,十之八九是圖片惹的禍。一張沒處理過的手機照片動輒 3MB 到 5MB,放上網站等於要求每個訪客先下載一部短片才能看到你的內容。圖片壓縮是所有網站優化裡投資報酬率最高的一件事:不用改程式,不用換主機,把圖片處理對,速度立刻有感。

這篇從「為什麼要壓縮」講到「怎麼壓」:WebP、JPG、PNG 三種格式差在哪,免費壓縮工具怎麼選,以及一套照著做就能上手的網站圖片優化流程。

為什麼圖片壓縮對網站這麼重要?

圖片壓縮是「在肉眼幾乎看不出差異的前提下,把圖片檔案變小」的技術。它重要的原因有三層:

  • 速度:圖片通常佔一個網頁總下載量的一半以上,是頁面變慢的第一兇手。圖片小一半,頁面載入時間大致跟著砍半
  • SEO:頁面速度是 Google 排名訊號之一,Core Web Vitals 的 LCP(最大內容繪製)量測的常常就是你的主圖載入時間
  • 轉換:訪客等不到三秒就走人,圖片拖慢的每一秒都在流失生意

反過來說,壓縮做過頭、畫質明顯劣化,品牌形象也會跟著打折。所以重點不是「壓到最小」,而是「在看不出差異的範圍內壓到夠小」。

WebP、JPG、PNG 差在哪?一張表看懂

選對格式,壓縮就成功了一半。三種主流格式的定位完全不同:

比較項目WebPJPG(JPEG)PNG
定位網頁專用的新世代格式照片類圖片的老牌標準需要透明背景或銳利線條時用
檔案大小最小(同畫質比 JPG 小 25% 到 34%)中等最大(無損)
透明背景支援不支援支援
適合內容幾乎所有網頁圖片照片、漸層豐富的圖Logo、圖示、截圖文字
瀏覽器支援現代瀏覽器全支援全支援全支援

來源:Google WebP 官方文件(更新時間:2026-06)

實務結論很簡單:網站圖片預設用 WebP。Google 官方數據顯示 WebP 有損壓縮比同畫質的 JPEG 小 25% 到 34%,無損壓縮比 PNG 小約 26%,而且同時支援透明背景——等於一個格式吃下 JPG 跟 PNG 的主要使用情境。

什麼時候不該用 WebP?

兩種情況例外:一是圖片要給訪客下載後在其他軟體使用(部分舊軟體打不開 WebP),二是要上傳到不支援 WebP 的第三方平台。純網頁顯示的話,WebP 沒有實質缺點。

免費圖片壓縮工具推薦

不用買軟體,這幾個免費工具就能把壓縮做好:

Squoosh:壓縮品質的天花板

Squoosh 是 Google 出的瀏覽器壓縮工具,左右分割畫面即時對照壓縮前後的畫質,可以微調品質參數、轉 WebP,處理在你的瀏覽器本地完成,圖片不會上傳到別人的伺服器。適合需要精準控制單張重要圖片(首頁主視覺、產品主圖)的時候。

TinyPNG:批次處理最省事

TinyPNG 走「拖進去就好」路線,一次拖一批圖片進去自動壓縮,支援 PNG、JPG 與 WebP。免費額度對一般網站的日常更新綽綽有餘。適合不想調參數,要快速處理一批部落格配圖的情境。

作業系統內建工具:應急夠用

Mac 的「預覽程式」可以調整尺寸與另存壓縮品質,Windows 的「相片」app 也有調整大小功能。畫質控制不如專門工具精細,但臨時要縮一張圖不用開瀏覽器。

秒站用戶:後台內建 WebP 壓縮工具

秒站後台在你上傳過大圖片時會自動攔截並彈窗提醒,並提供一鍵導向內建的 WebP 圖片壓縮工具,壓完直接回到上傳流程。這個設計的用意是把「圖片太大拖慢網站」這件事擋在發生之前,而不是事後再來救。

網站圖片優化 SOP:四步驟照著做

尺寸先對,再談壓縮

常見的浪費是把 4000px 寬的原圖直接丟上網站,但版面實際只顯示 800px。先把圖片縮到「實際顯示寬度的 1.5 到 2 倍」(兼顧高解析螢幕),再進壓縮,省下的體積比任何壓縮參數都多。

選格式:預設 WebP

照片、Banner、內容配圖一律 WebP;需要給人下載的原檔才保留 JPG 或 PNG。

壓縮:單張重要圖用 Squoosh、批次用 TinyPNG

實務上的檔案大小參考:內容配圖控制在 100KB 到 300KB,首頁大圖盡量壓在 500KB 以內,超過 1MB 的圖片幾乎都還有壓縮空間。

上傳前最後檢查 Alt 文字

壓縮顧速度,Alt 文字顧 SEO。每張圖上傳時順手填上描述圖片內容的 Alt 文字,Google 圖片搜尋與 AI 搜尋引擎都靠它理解你的圖。

內文精華總結

圖片壓縮是投報率最高的網站優化。

  • 圖片佔網頁下載量一半以上,速度直接影響 SEO 排名(Core Web Vitals)與轉換率
  • 重點是「看不出差異的範圍內壓到夠小」,不是壓到最小

格式選擇:網頁圖片預設 WebP。

  • Google 官方數據:WebP 同畫質比 JPEG 小 25% 到 34%,比 PNG 小約 26%,且支援透明背景
  • JPG 留給要下載的照片原檔,PNG 留給特殊相容需求

工具組合:先縮尺寸,再壓縮,最後填 Alt。

  • 單張精修用 Squoosh(Google 出品、本地處理),批次用 TinyPNG
  • 內容圖 100KB 到 300KB、大圖 500KB 內,超過 1MB 一定還有壓縮空間

圖片只是網站速度的一環,其他的呢?

圖片壓縮自己動手做不難,但主機效能、CDN、快取、SSL 這些速度拼圖,自己處理就是另一回事了。秒站把這些全部打包:全球 CDN、SSL 憑證、每日備份內建,後台上傳圖片太大還會主動攔截提醒,你只要顧好內容:

延伸閱讀

重點整理

圖片壓縮會讓畫質變差嗎?

有損壓縮(JPG、WebP 預設模式)會犧牲少量畫質換取大幅縮小的檔案,但在合理的品質設定下(例如 75% 到 85%),肉眼幾乎看不出差異。訣竅是用 Squoosh 這類有即時對照的工具,左右滑動比較壓縮前後,找到「看不出差異的最低品質」就是最佳設定點。

網站圖片應該壓到多小才合理?

實務參考值:內容配圖 100KB 到 300KB、首頁主視覺或 Banner 大圖 500KB 以內、圖示與 Logo 通常 50KB 以下。超過 1MB 的圖片放上網站幾乎都還有壓縮空間。比絕對數字更重要的是先把尺寸縮到實際顯示寬度的 1.5 到 2 倍,尺寸對了、檔案自然小。

WebP 是什麼?瀏覽器都支援嗎?

WebP 是 Google 開發的網頁圖片格式,同畫質下比 JPEG 小 25% 到 34%、比 PNG 小約 26%,同時支援透明背景與動畫。目前 Chrome、Safari、Edge、Firefox 等現代瀏覽器全數支援,網頁用途已經沒有相容性顧慮。

什麼時候該用 PNG 而不是 WebP 或 JPG?

兩種情況:一是圖片要提供給訪客下載、且對方可能用舊軟體開啟;二是要上傳到只接受 PNG 或 JPG 的第三方平台。另外螢幕截圖含大量細小文字時,PNG 的無損特性能保持文字銳利,但同樣的需求 WebP 無損模式也做得到且檔案更小。

Squoosh 跟 TinyPNG 哪個比較好?

定位不同:Squoosh 是 Google 出的單張精修工具,即時對照畫質、可微調參數、在瀏覽器本地處理不上傳伺服器,適合首頁主圖這類重要圖片。TinyPNG 是批次處理工具,一次拖一批自動壓縮,適合部落格配圖的日常處理。實務上兩個搭配用:重要圖 Squoosh、其他 TinyPNG。

圖片壓縮對 SEO 的影響有多大?

頁面速度是 Google 的排名訊號,而圖片通常佔頁面下載量一半以上。Core Web Vitals 的 LCP(最大內容繪製)指標量測的常常就是主圖的載入時間,圖片壓縮做好,LCP 立刻改善。另外每張圖的 Alt 文字是 Google 圖片搜尋與 AI 搜尋理解圖片內容的依據,壓縮跟 Alt 兩件事一起做才完整。

已經上線的網站圖片太大,要一張張重新處理嗎?

建議從影響最大的頁面開始:首頁、流量最高的幾篇文章、轉換頁。用測速工具(如 PageSpeed Insights)找出哪幾張圖被點名,優先處理那些就能拿到大部分的速度改善,不需要一次重壓整站。

秒站會自動幫我處理圖片嗎?

秒站後台在你上傳過大圖片時會自動攔截並彈窗提醒,並提供一鍵導向內建的 WebP 圖片壓縮工具,壓完直接回到上傳流程,把「圖片拖慢網站」擋在發生前。搭配方案內建的全球 CDN 加速,圖片載入速度從格式到傳輸都有人顧。