文章
為速度與 Core Web Vitals 最佳化網站媒體
圖片通常佔一個網頁總容量的約 40%，比任何其他資源類型都多，而在媒體內容較多的頁面上，影片還會額外增加不少。把它們處理好，是你為載入速度、Core Web Vitals 分數與搜尋排名所能做的最具槓桿效益的單一件事。好消息是：這一切都不需要專業軟體或伺服器，而你的檔案也從不需要離開你的裝置。
在做任何事之前，先選對格式
格式抉擇比任何畫質滑桿都更重要。對於網頁上的照片，WebP 是正確的預設：在相同視覺畫質下它比 JPEG 小 25% 到 35%，且每一款現代瀏覽器都支援。AVIF 的壓縮還能更進一步，比 JPEG 好上多達 50%，代價是編碼較慢。對於你只壓縮一次的主視覺圖與產品照，請用 AVIF；對於任何你需要批次處理或快速產出的東西，請用 WebP。PNG 只屬於你需要無損精準度或透明背景的場合。對於標誌、圖示與插畫，SVG 是唯一合理的選擇：它能縮放到任何尺寸，而且往往只有幾 KB，相較於點陣化的對應檔案動輒數百 KB。
壓縮圖片而不損失肉眼可見的畫質
先從縮放到實際顯示尺寸著手：一張以 1280 像素寬顯示的主視覺圖，並不需要 4000 像素的資料量。先縮放，再壓縮。對於照片，WebP 或 JPEG 中的畫質 80 是務實的下限，低於此值一般觀看者就會開始察覺，因此目標訂在 75 到 85，並在發布前以全尺寸縮放檢視輸出。對於帶有文字與大面積純色的圖形，PNG 無損或 SVG 能保留有損格式會抹糊掉的銳利度。本站的圖片壓縮器可處理所有這些格式，完全在你的瀏覽器中執行，並套用與專用桌面工具相同的演算法。
為網頁轉換影片，而不必上傳它
背景循環與內嵌影片往往是網頁媒體最佳化做得不夠的地方。採用 H.264 的 MP4 到處都能播放，而 WebM 是每個現代瀏覽器都支援的免版稅替代方案。這個網站的影片轉換器用 VP8 編碼 WebM，VP8 和 H.264 屬於同一個壓縮等級：單純更換容器並不會讓檔案變小，真正的好處在於完全免版稅的編解碼鏈以及對 alpha 色版的原生支援。務實的做法是轉換一次成 WebM，把它當作 video 元素中的偏好來源，並為較舊的瀏覽器保留 MP4 作為後備。轉換透過編譯成 WebAssembly 的 FFmpeg 在你的瀏覽器內執行：不上傳任何東西，且最大 500 MB 的檔案無需排隊即可轉換。對於頁面內嵌的背景影片，也不妨用影片裁切工具在編碼前剪掉沒用的秒數：時長是檔案大小最主要的決定因素。
內嵌資源：base64 與 SVG
把極小的圖片、圖示與網站圖示以 base64 字串的形式直接嵌入 HTML 或 CSS，可省去每個資源一次的網路往返。這對每頁都會出現、約 2 KB 以下的資源很有意義，例如標誌精靈圖或載入指示器。較大的資源則應保留為獨立檔案，因為 base64 編碼後會比二進位大 33%，而且瀏覽器會快取檔案參照，卻不會獨立快取內嵌資料。SVG 最佳化工具能移除匯出 SVG 中的編輯器多餘內容，而不動到視覺輸出。圖片轉 base64 轉換器則在你的瀏覽器中產生可直接貼上的 data URI。
提供適當尺寸並優先載入
兩個傳輸細節與檔案本身同樣重要。第一是響應式尺寸。透過含寬度描述符的 srcset 清單（例如 image-400.webp 400w、image-800.webp 800w 等），瀏覽器會選擇仍能覆蓋螢幕的最小檔案，在發出請求前先將 CSS 寬度乘以裝置像素比（device pixel ratio，即裝置的物理像素與 CSS 像素的比例）。一支版面寬 390px、螢幕為 3x 的手機需要約 1170 像素，因此會下載 1200w 版本，並略過桌面原始尺寸。第二是優先順序。瀏覽器的預載掃描器（preload scanner，一種在主解析器處理前提前讀取並開始下載資源的機制）會預先讀取頁面並開始下載圖片；對首屏（above-the-fold，即不需捲動即可看見的區域）中最大的圖片加入 fetchpriority="high"，可告知瀏覽器優先下載該圖片，這通常也是決定 Largest Contentful Paint 的關鍵因素。
本文涉及的工具
常見問題
圖片壓縮會影響我的搜尋排名嗎？
Google 把 Core Web Vitals 當作排名訊號，而 Largest Contentful Paint 幾乎總是一張圖片或一個影片預覽畫面。一個主視覺圖在一秒內載入的頁面，得分會優於要花三秒的頁面。壓縮與選對格式都直接影響這項指標，所以是的，圖片最佳化具有可衡量的 SEO 影響。這效果在行動裝置上最為顯著，因為連線較慢，沉重圖片所受的懲罰也更大。
為什麼要在本機處理媒體，而不用網路服務？
大多數線上媒體工具都要求把你的檔案上傳到遠端伺服器，這既耗時又消耗頻寬，還意味著你的檔案有一份副本存在於你無法掌控的基礎設施上。本站的工具完全在你的瀏覽器中執行：你的圖片與影片在你的裝置上處理，輸出則直接下載。沒有帳號、沒有上傳等待，而且你檔案的任何內容都絕不會被送到伺服器。