壓縮網頁圖片意味著降低圖片的檔案大小,讓它在網頁和應用程式中載入更快,同時在螢幕上仍保持視覺上可接受的程度。標準做法是選擇合適的格式,降低 JPG 和 WebP 等有損類型的品質設定,並移除多餘的詮釋資料,產生一個在一般顯示尺寸下仍看起來正確的較小檔案。像 Image Compressor 這類瀏覽器工具,讓你可以直接把圖片拖進去,即時看到檔案縮小,並下載結果,完全不需要將圖片上傳到伺服器,因此處理過程既快速又注重隱私。
大多數網站會為同一個視覺素材提供多種壓縮後的圖片尺寸:一種給手機、一種給平板、一種給桌機。即使有縮圖存在,大螢幕上仍會使用最大的版本,所以這些版本中的每一個都能從壓縮流程中受益。除了速度之外,較輕量的圖片檔案能降低網站擁有者的頻寬成本,並減少使用吃到飽行動網路訪客的數據使用量,這就是為什麼壓縮會被效能指南列為最優先處理的項目之一。
為何圖片壓縮對現代網站很重要
圖片通常是典型網頁中最重的項目。Google 的 Web Vitals 文件將 Largest Contentful Paint(最大內容繪製)指標——通常由首圖驅動——列為影響感知速度的三個核心訊號之一。一張在手機上載入緩慢的 3 MB JPG,所造成的損害遠大於一張在視窗尺寸下看起來幾乎相同的 200 KB 圖片。
在上線前壓縮圖片帶來三個實際好處。第一,網頁渲染更快,特別是在延遲和頻寬限制使用者看到內容速度的行動網路上。第二,搜尋排名會受到網頁速度訊號的影響,因此較輕量的圖片能間接提升曝光度。第三,在託管平台上的儲存和頻寬成本會降低,這對於經營高流量部落格、商店或圖片密集型作品集的任何人來說都很重要。
要壓縮哪種圖片格式
在調整品質滑桿之前先選擇格式,會改變壓縮的表現方式。在網路上最常遇到的三種格式是:
- JPG (JPEG): 最適合照片和具有漸層的複雜場景。使用有損壓縮,因此在中等品質下可以縮減到很小的檔案大小,幾乎看不到明顯損失。
- PNG: 最適合截圖、標誌和具有平面色彩或透明度的圖形。使用無損壓縮,因此縮減檔案大小較困難,且品質不像 JPG 那樣會下降。
- WebP: Google 推出的現代格式,可同時處理有損和無損模式,在相近的視覺品質下,通常能產生比同級 JPG 或 PNG 小 25% 到 35% 的檔案。
如果你的來源檔案已經是 PNG,但圖片實際上是照片,將其轉換為 JPG 可以大幅縮減大小。如需更深入了解哪種格式適合特定工作,請參考 JPEG vs PNG vs WebP 指南,其中涵蓋了實際的使用案例。
如何在瀏覽器中壓縮網頁圖片
最快的工作流程是使用在本地端處理壓縮的工具。Image Compressor 圍繞著三個步驟設計,符合大多數讀者實際想要的工作方式。
- 選擇或拖放一張圖片。開啟 Image Compressor 頁面,點擊區域從電腦中選擇檔案,或將 JPG、PNG 或 WebP 檔案拖放到頁面上的任何位置。檔案載入後即開始壓縮;因為所有處理都在你的瀏覽器中進行,所以沒有上傳步驟。
- 調整品質滑桿並進行比較。品質滑桿控制圖片被壓縮的強度。將滑桿調低可進一步縮減檔案大小,調高則保留更多細節。分割或並排檢視會以相同縮放比例顯示原始和壓縮後的版本,讓你在下載前能發現模糊、條帶或色彩偏移等問題。
- 下載壓縮後的檔案。當大小和品質平衡感覺合適時,點擊下載按鈕將壓縮後的版本儲存到你的裝置。由於圖片從未離開你的電腦,你可以使用同一個檔案根據需要重複調整滑桿,完全沒有伺服器成本或等待時間。
不同類型圖片應使用的設定
沒有一個單一「正確」的品質等級,因為理想的平衡取決於圖片內容以及顯示位置。下表按圖片類型和用途描述了品質滑桿的常見起點。
| 圖片類型 | 典型放置位置 | 建議格式 | 建議品質(有損) |
|---|---|---|---|
| 登陸頁面上的主視覺照片 | 首頁頂部,全寬 | JPG 或 WebP | 中高,優先保留細節 |
| 目錄中的產品照片 | 網格列表、燈箱檢視 | JPG 或 WebP | 中等,平衡細節與大小 |
| 文章中的內嵌縮圖 | 段落內或側邊欄 | JPG 或 WebP | 較低,因為小顯示尺寸會隱藏瑕疵 |
| 標誌或圖示 | 頁首、按鈕、favicon | PNG(或在支援時使用 SVG) | 僅限無損;依賴格式轉換和調色板精簡 |
| 截圖或 UI 圖形 | 教學文件、說明文件 | PNG | 僅限無損;清晰的文字很重要 |
對於個人部落格上的單一主視覺照片,中等品質的 JPG 通常已足夠小,可在手機上快速載入,同時在桌機寬度下仍看起來清晰。對於擁有數百個產品縮圖的商店,將品質再調低一級並提供較小的尺寸,可大幅減少總頁面權重。在定案前,務必同時查看工具回報的檔案大小和可見的品質。
進一步縮減檔案的額外步驟
品質滑桿處理了大部分的節省,但一些額外的習慣會在整個網站中累積效果。在壓縮之前將圖片調整為實際顯示尺寸,比起對過大的來源進行任何品質調整,效果都要顯著得多。Image Resizer 可讓你精確設定像素尺寸,當主視覺影像原始製作為 4000 像素寬,但實際僅以 1200 像素顯示時,這一點特別有用。
移除詮釋資料是另一個簡單的勝利。大多數相機會嵌入 EXIF 資料(相機型號、設定、GPS、縮圖),可能為 JPG 增加數十甚至數百 KB。在瀏覽器中執行的圖片壓縮工具可以自動移除這些詮釋資料,節省效果會立即顯示在回報的大小中。
如果為了更小的檔案而需要不同格式,在不需要透明度的情況下,PNG to JPG converter 可將截圖或平面色彩圖形轉換為更輕量的 JPG。對於現代瀏覽器而言,WebP converter 產生的檔案可由大多數最新的引擎提供,在相同可見品質下通常優於 JPG。
網頁壓縮的常見陷阱
即使使用好工具,一些錯誤也可能前功盡棄。將已經壓縮過的 JPG 以較低品質再次儲存會累積瑕疵,因此每輪壓縮最好都從原始來源檔案進行。上傳尺寸為其佔用空間兩倍的圖片會在每次瀏覽時浪費位元組,這就是為什麼在壓縮前調整尺寸與品質滑桿同樣重要。過度壓縮標誌或截圖也很有誘惑力,因為 PNG 檔案看起來很頑固,但它們需要無損處理才能保持文字和邊緣清晰;在這些情況下,格式選擇和調色板精簡比品質滑桿更有效。
最後,不要略過 Image Compressor 所顯示的並排預覽。滑桿感覺很直覺,但快速掃描壓縮結果可以發現天空中出現的條帶、文字周圍的光暈,以及膚色中的色彩偏移,這些都是純粹追逐數字所遺漏的。網頁壓縮最終是一項由大小數字輔助的視覺決策,而不是相反。
如果你正在權衡選項,如何在不損失清晰度的情況下將圖片壓縮到 100KB 有詳細說明。
如果你正在權衡選項,如何在 Photoshop 中製作 GIF:實務操作指南 有詳細說明。
如果你正在權衡選項,壓縮圖片檔案大小:一個簡單的瀏覽器方法 有詳細說明。