如何使用堪稱神器的Squoosh.app為網站最佳化圖片

如果你混跡於 WordPress 領域一段時間，不可能還不知道影像最佳化。它的目的是壓縮網站上的照片，使頁面載入速度不再緩慢。

用什麼對原圖片執行壓縮呢？那不得不來說說，這個已經在筆者的實用工具清單的大殺器——Squoosh。

Squoosh 是您可以使用的最佳工具之一。它免費、開源、易用。在本教學指南中，我們將介紹如何使用 Squoosh 壓縮圖片並縮短載入時間。

如何在30秒內使用Squoosh最佳化圖片

讓我們直奔主題。

你可以很快開始為你的網站最佳化圖片。

訪問 https://squoosh.app 。

點選頁面頂部的粉紅色大圓球，選擇要壓縮的圖片。

在這裡，你可以選擇調整圖片大小、縮小調色盤、改變質量，並選擇你喜歡的輸出檔案型別。

下方的計數器會告訴你新檔案的大小。

當你選擇不同的選項時，可以移動螢幕中間的滑塊來檢視對影像質量的影響。左邊是原始影像的放大檢視；右邊是壓縮版本的預覽。

看起來不錯？點選右下方的藍色圓球下載壓縮後的圖片。這就可以新增到你的網站了。

嘭，大功告成。

提示：想加快速度製作下一張圖片嗎？點選控制面板中的小“齒輪”圖示。這將把你當前的設定儲存為預設值，以後你可以點選另一個齒輪圖示載入預設值。

進一步瞭解Squoosh

這只是一個簡短的版本，但 Squoosh 還有更多內容。

這款開源影像壓縮工具實際上是由谷歌公司開發的。它既可以作為網路應用程式，也可以作為 Chrome 瀏覽器的附加元件。

如果你覺得技術不錯，也可以從 GitHub 下載 Squoosh，並透過命令列離線執行。

Squoosh 支援 PNG、JPG、TIFF、GIF 等多種格式。每個版本都可免費使用，而且該應用可在本地進行壓縮。這對隱私保護來說是個好訊息，因為影像永遠不會離開你的機器。

學習如何像專業人士一樣使用Squoosh

Squoosh 的另一個優點是它提供了大量的控制功能。你只需要知道如何瀏覽控制面板。

讓我們快速瀏覽一下。

首次將圖片載入 Squoosh 時，你會在控制面板上看到四個選項：

調整大小

如果你打算將圖片用作縮圖，就不需要全解析度。你可以透過切換來改變圖片大小。

輸入你想要的畫素數，除非你有充分的理由，否則請保留預設選項。確保選擇了“Maintain Aspect Ratio（保持縱橫比）”，以避免翹曲！

減少調色盤

許多影像實際上並不包含那麼多顏色。此選項可讓你丟棄色調以減小檔案大小。

那個“Dithering”滑塊？它主要是建立一種噪點模式來掩蓋減少的調色盤。

注意：這種技術最好用在設計上，而不是照片上，因為照片最終看起來會像糟糕的影印件。

格式

在“Compress”標籤下，您可以為影像選擇輸出格式。選項可分為兩大類。

• 有失真壓縮Lossy（如 JPG、GIF）： 這些格式會丟棄影像的極小部分以節省空間。一般來說，你不會注意到它們的區別，除非你想要高解析度的影像。
• 無損格式Lossless （如 PNG、AVIF）： 相比之下，無損格式能在不影響影像質量的情況下減小檔案大小。

一般來說，有損格式適合簡單的圖形，而無損格式更適合清晰的圖示和細節照片。

關於有損和無失真壓縮，推薦大家進一步閱讀這篇文章。

質量

如果您選擇的是有損格式，您還會看到這個滑塊。它的範圍從 0（將影像壓扁）到 100（無變化）。

在儲存圖片之前，我們建議移動這個滑塊，在預覽區檢視效果。要得到一個漂亮的小檔案，在不產生醜陋偽影的情況下，儘量向左移動滑塊。

如果要轉換為 WebP，你還會看到一個“Effort”滑塊。它控制著 Squoosh 在決定如何壓縮之前對影像進行分析的徹底程度。如果你有想要保留的細節，請選擇較高的數值。

高階設定

根據您選擇的輸出格式，您可以在“Advanced settings”選項卡下訪問更多選項。

除非你是影像編輯方面的專家，否則最好不要使用這些設定。

從Squoosh中獲取更多資訊的快速技巧

總的來說，Squoosh 超級易用。老實說，上面的部分包含了你真正需要瞭解的關於這款應用的一切。

但是我們看到了你，讀者。你想成為影像壓縮之神，是嗎？

好吧，這裡有一些專業技巧，可以幫你達到不朽的境界。

• 拖放：不用管檔案選單。只需將圖片直接拖入 Squoosh 即可。
• 瞭解格式：現代瀏覽器使用 WebP，照片使用 MozJPEG，圖形使用 OptiPNG。請記住，AVIF 是新出現的格式（閃電博已經全面採用該格式）；檢查哪些瀏覽器可以處理它。推薦閱讀：深入探討15種主流圖片格式及其優缺點
• 大小很重要：壓縮是為了保證質量，而不僅僅是檔案大小。如果你的圖片從看起來像傑作變成了幼兒園的藝術作品，請退一步調整這些設定。
• Effort 很重要：調大 PNG 和 WebP 的 Effort 滑塊，在不嚴重影響質量的前提下壓縮檔案大小。
• Reduce Palette： 你的圖片包含多少種顏色？如果很簡單，向左移動 Reduce Palette 滑塊就能節省很多空間。

請記住，每節省 1 MB 就意味著減少使用者的等待時間！

如何管理網站圖片以提高效能

雖然Squoosh可以將圖片縮小到更易於管理的大小，但它並不是萬能的。

請遵循以下指導原則，確保壓縮後的圖片達到您所期望的效能提升效果！

• 使用 CDN： 內容分發網路（CDN）針對媒體進行了最佳化，可以減輕主機伺服器的壓力。
• 仔細考慮檔案型別：讓所有圖片都一樣很容易。但您選擇的檔案應符合網站上每張圖片的要求。
• 刪除不需要的後設資料：您的圖片需要隨身攜帶位置和相機資訊嗎？也許不需要。
• 嘗試使用 sprite：與其使用一張重複圖案的大圖片，不如多次使用一個小型單圖。這確實可以加快速度！注：此 sprite 非 CSS Sprite 技術。

如果你對實現影像最佳化的所有方法感到好奇，我們的部落格中絕對有大量有用的教程。以下是其中的一些亮點：

• 如何為現代網路最佳化圖片（WebP、SVG 等）
• 如何解決 WordPress 中的 16 個常見圖片問題
• 如何修復 WordPress 圖片上傳問題

Squoosh平替：最佳影像壓縮工具

Squoosh 是壓縮和最佳化網站圖片的最佳起點。不過，還有其他選擇：

• TinyPNG：這款網路應用程式可立即壓縮圖片，同時保留令人印象深刻的圖片質量。批次上傳 20 張或更少的圖片是免費的；每月 39 美元即可解鎖更多圖片。
• ShortPixel：如果你擁有 WordPress 網站，這款外掛可讓你在管理區直接壓縮圖片。每月最多可免費壓縮 100 張圖片。
• ImageOptim：專為 Mac 使用者設計。這款開源應用程式可讓你壓縮電腦上的成批圖片。而且完全免費！
• Kraken.io：這款功能強大的影像壓縮工具工作原理與 Squoosh 相似，只是沒有漂亮的預覽顯示。而且，它只免費提供 1MB 大小的檔案。
• JPEGmini：處理大量高質量照片？只需快速拖放，這款桌面應用程式就能讓你將 JPG 檔案大小縮小 80%。

小結

最佳化圖片是件苦差事。但當你的網頁以閃電般的速度載入時，這樣的努力是值得的。而且，有了像 Squoosh 這樣的工具，就不會太費勁了。

當然，圖片並不是網頁載入速度慢的唯一原因。你的託管計劃也可能是罪魁禍首。