TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
Squoosh 圖片壓縮教學，預覽後再下載
Squoosh 圖片壓縮教學：從辨認原圖與結果、選擇格式和 Quality，到保留比例縮圖、檢查透明 PNG，再下載能交付的版本。附自製圖片的實際容量與尺寸，說明 Contain 中央裁切、離線快取的準備方式，以及官方對本機處理與分析資料的說明。
用 AI 摘要這篇文章：
Squoosh 適合在瀏覽器中逐張壓縮圖片、比較畫質，再下載需要的格式。先保留原圖，看過結果再存檔；不要只追求最小容量，也不要把相同的 Quality 數字當成相同畫質。若需要改尺寸，還要分清等比縮放與裁切，避免圖片變小了，重要內容卻不見了。
開啟圖片後，先認清原圖與結果在哪一邊
先另外保留原始圖片，再開啟 Squoosh 網頁版，把一張圖片拖進畫面，或按選檔按鈕開啟。它適合逐張比較壓縮設定，不需要先註冊帳號。圖片交付給誰、對方能接受哪些格式，最好在這時就先確認。
桌面畫面預設左側是原圖，格式欄顯示「Original Image」與檔名；右側是處理結果。左右都有下載按鈕，要下載的是設定過格式與畫質的那一側。 兩側也能各自改設定，所以操作途中要看格式欄，不能一直假定左側必定是原圖。
- 在結果側的「Compress」選擇輸出格式，例如 MozJPEG 或 WebP。
- 等檔案大小出現，不要在仍顯示省略號、尚未完成處理時把工作當作完成。
- 拖曳中央分隔線比對原圖和結果，查看小字、細線、漸層或照片中的細節；可用縮放按鈕放大觀察。
- 按結果側的下載圖示，存到與原檔分開的位置，再打開下載檔確認。
窄螢幕的排列不同：這次在 390 像素寬的瀏覽器中，預覽改成上下分隔，設定面板收在底部。可以展開結果那一列調整，並用該列的下載按鈕存檔。單張 JPEG 的下載已完成；實際手機的選檔與儲存位置，仍要依使用的瀏覽器確認。
Quality 數字相同，不代表不同格式畫質相同
「Quality」是有損壓縮的品質設定，降低數值通常能換取較小的檔案，但細節也可能減少。不要把某個數字當成每張圖都適用的標準，更不要把 MozJPEG 的 75 和 WebP 的 75 當作相同畫質。
我用一張 1,600 × 1,000、430,603 位元組的自製 JPEG 合成圖，在同一個 Chromium 瀏覽器中切換格式。圖中有漸層、文字和細線；保留各格式的預設設定，沒有縮尺寸，下載結果如下。
| 輸出選項 | Quality | 下載檔案大小 | 像素尺寸 |
|---|---|---|---|
| MozJPEG | 75 | 54,777 位元組 | 1,600 × 1,000 |
| WebP | 75 | 32,978 位元組 | 1,600 × 1,000 |
| AVIF | 50 | 11,642 位元組 | 1,600 × 1,000 |
這組結果能說明下載檔案確實變小，不能據此排出格式優劣：設定不同，也沒有做同畫質的比較，更不是各類照片的平均壓縮率。先看接收平台接受的格式，再用自己的圖片判斷細節是否足夠。
需要 JPG 檔時選 MozJPEG；要保留 PNG 與透明背景可試 OxiPNG；接收平台支援 WebP 或 AVIF 時，再把它們列入比較。選單中的實驗性格式，例如標成 beta 的 JPEG XL、unstable 的 WebP v2，不宜只因檔案小就直接交付。
若檔案仍超過附件容量限制，可回到原圖，降低 Quality 或縮小像素尺寸，再看結果。文字已經模糊時，就提高品質或換回原檔重新處理。下載後用電腦的檔案資訊查看容量與尺寸：macOS 可在 Finder 選取檔案後按 Command + I；Windows 可從檔案右鍵的「內容」查看。
要放進 WordPress，也先用一張測試圖確認媒體庫能接收、文章前台能顯示，並確認縮圖正常。Squoosh 下載成功，只完成圖片檔案這一步，不會自動把整個網站的舊圖換掉。
Resize 保留比例，Contain 則會裁掉邊緣
先查看原圖寬度；如果原本已不超過 800 像素，就保留原尺寸，避免為了套範例而放大。
若你的目標是「寬度不超過 800 像素」，在結果側啟用「Resize」，保持「Maintain aspect ratio」勾選，再把 Width 改成 800。這次原圖為 1,600 × 1,000，高度自動變成 500；下載的 WebP 也確實是 800 × 500。
寬高與檔案容量要分開看。相同的 WebP、Quality 75 設定下，這張圖縮成 800 × 500 後是 12,778 位元組；你自己的圖片仍要下載檢查，不能把這個結果套成固定的容量保證。
如果需要正方形，關掉「Maintain aspect ratio」後，會出現「Fit method」。其中「Stretch」會依指定寬高拉伸；「Contain」在 Squoosh 這個設定中會保留中央範圍、裁掉超出的邊緣，不能按名稱把它理解成加留白。
我另用一張 640 × 400 的透明合成圖，指定寬高各 400 並選 Contain。下載後是 400 × 400，透明度分布符合原圖中央 400 像素的範圍，左右各裁去 120 像素。這也與 Squoosh 尺寸處理程式碼 的中央裁切方式相符。
| 你要的結果 | 設定方向 | 下載後檢查 |
|---|---|---|
| 保留全部內容、等比縮小 | 開啟 Resize，勾選 Maintain aspect ratio | 寬高符合比例，沒有拉扁 |
| 固定寬高、接受中央裁切 | 取消比例鎖定，填寬高並選 Contain | 重要內容沒有落在被裁掉的邊緣 |
| 保留全部內容又要正方形畫布 | 先用可加留白的編輯工具完成構圖 | 畫布尺寸與留白正確，再壓縮 |
人物或文字靠近邊緣時，不要只看輸出已是正方形。需要自行指定裁切位置，就先用能調整構圖的工具處理；結果不對時，回到保留的原圖，重新設定比例與尺寸。
透明 PNG 要連同處理選項一起檢查
透明背景不能用 JPG 保留。需要繼續交付 PNG 時，可選 OxiPNG，並先關掉不需要的 Resize 與 Reduce palette；後者會減少色盤中的顏色，不能在改色盤後還期待所有顏色都保持原樣。
這次透明合成 PNG 原本為 13,040 位元組，關閉縮放與色盤調整、選 OxiPNG 後，下載為 2,562 位元組，尺寸仍是 640 × 400。透明度數值相同，但逐像素比較時，部分紅、綠、藍數值有最多 1 階的差異。
因此，無損編碼不等於整個開啟、處理、輸出流程與原始檔案逐位元組相同。這次觀察也不等於所有 PNG 都會改色；對色彩或原始資料有嚴格要求時，保留原檔，另檢查輸出是否符合交付規範。一般使用則至少把結果放到實際背景上，查看半透明邊緣、小字及圖示是否正常。
離線使用前，先用預定格式完成一次下載
Squoosh 的 離線快取程式 會保存網頁程式與所需處理資源，但第一次打開網站不等於所有資源都已準備完成。要在沒有網路的地方使用，先連網開啟、選圖，並用準備使用的格式完成一次下載，再做離線確認。
我先在 Chromium 載入工具並完成多種格式的處理，再啟用瀏覽器的離線模式。確認另一個外部網站無法連線後，於同一瀏覽器重新開啟 Squoosh，仍能載入 JPEG 並下載 MozJPEG 結果；這份下載與線上版本的位元組相同。這個結果涵蓋已完成快取的瀏覽器情境，不能保證換瀏覽器或清除網站資料後仍可直接使用。
出發前可照這個順序確認：
- 連網開啟 Squoosh，用預計使用的格式實際存出一張圖片。
- 暫時斷網，重新開啟工具，選入原圖並再次下載。
- 打開結果確認可用，再保留這個瀏覽器的網站資料。
如果離線時頁面打不開、格式切換後一直沒有結果，先恢復網路，重新載入並試存，不要在沒有成功輸出前刪掉原檔。更換裝置、瀏覽器或清掉快取後，都應重新準備與確認。
圖片在本機處理，仍要看分析資料說明
Squoosh 官方 README 表示，圖片不會送往伺服器，壓縮在本機進行；同一份說明也列出 Google Analytics 的蒐集項目，包括基本訪客資料、壓縮前後的檔案大小，以及 PWA 安裝類型與時間資訊。
所以需要分清兩件事：圖片內容的處理位置，以及網站是否傳送其他分析資料。官方的本機處理說明，不能改寫成「完全沒有資料蒐集」或「隱私零風險」。這次的操作也不能替所有瀏覽器、擴充功能或未來版本保證安全；處理受公司或客戶規範限制的素材時，仍以允許使用的工具與流程為準。
若圖片允許上傳到外部服務，又需要一次處理很多張，可接著看 iLoveIMG 批次壓縮與尺寸教學。它走的是上傳處理流程，要另外考慮額度與資料政策。只需要細調一張圖片時，就在 Squoosh 保留原檔、比較預覽，再把確定可用的版本下載出去。
