文章
為速度與 Core Web Vitals 最佳化網站媒體
圖片與影片通常佔一個網頁總容量的 60% 到 80%。把它們處理好，是你為載入速度、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 到處都能播放，但採用 VP9 的 WebM 在相同畫質下小 20% 到 40%，這對連線受限的行動使用者很重要。務實的做法是轉換一次成 WebM，把它當作 video 元素中的偏好來源，並保留 MP4 作為後備。這裡的影片轉換器使用編譯成 WebAssembly 的 FFmpeg：轉換在你的瀏覽器內執行，不上傳任何東西，且只要你的裝置有足夠記憶體，任何大小的檔案都能處理。對於頁面內嵌的背景影片，也不妨用影片裁切工具在編碼前剪掉沒用的秒數：時長是檔案大小最主要的決定因素。
內嵌資源：base64 與 SVG
把極小的圖片、圖示與網站圖示以 base64 字串的形式直接嵌入 HTML 或 CSS，可省去每個資源一次的網路往返。這對每頁都會出現、約 2 KB 以下的資源很有意義，例如標誌精靈圖或載入指示器。較大的資源則應保留為獨立檔案，因為 base64 編碼後會比二進位大 33%，而且瀏覽器會快取檔案參照，卻不會獨立快取內嵌資料。SVG 最佳化工具能移除匯出 SVG 中的編輯器多餘內容，而不動到視覺輸出。圖片轉 base64 轉換器則在你的瀏覽器中產生可直接貼上的 data URI。
本文涉及的工具
常見問題
圖片壓縮會影響我的搜尋排名嗎？
Google 把 Core Web Vitals 當作排名訊號，而 Largest Contentful Paint 幾乎總是一張圖片或一個影片預覽畫面。一個主視覺圖在一秒內載入的頁面，得分會優於要花三秒的頁面。壓縮與選對格式都直接影響這項指標，所以是的，圖片最佳化具有可衡量的 SEO 影響。這效果在行動裝置上最為顯著，因為連線較慢，沉重圖片所受的懲罰也更大。
為什麼要在本機處理媒體，而不用網路服務？
大多數線上媒體工具都要求把你的檔案上傳到遠端伺服器，這既耗時又消耗頻寬，還意味著你的檔案有一份副本存在於你無法掌控的基礎設施上。本站的工具完全在你的瀏覽器中執行：你的圖片與影片在你的裝置上處理，輸出則直接下載。沒有帳號、沒有上傳等待，而且你檔案的任何內容都絕不會被送到伺服器。