內容目錄
歡迎回到鵠學苑— WordPress 網頁設計超詳細攻略 – Google Chrome Labs 推出了一款名為 Squoosh 的線上壓縮圖片工具，可以在不破壞畫質的狀況下減少圖片大小，他的自訂性非常高，包括調整壓縮品質、畫素、重設圖片大小，設定後在網頁上預覽，利用拖拉、放大縮小圖片進行更清楚對比照。當然線上壓縮工具有很多種，之前鵠學苑也有寫過 TinyPNG 線上網頁圖片壓縮 – 照片壓縮不失真 – png 壓縮工具 這一篇線上圖片壓縮軟體，如果說想要為 WordPress 網站縮小圖片尺寸，加快網站載入速度，則可以參考這一篇：WordPress 圖片縮小外掛，批次圖檔壓縮 – 網頁加速必學技能 。接下來跟著鵠學苑的腳步，讓我們開始學習吧！
Squoosh 圖片壓縮工具網址
https://squoosh.app/
Github Google Chrome Labs 討論區
https://github.com/GoogleChromeLabs/squoosh/
第一步：進入 Squoosh 網站後直接將要壓縮的圖片拖曳進去或選擇 Select an image 選擇檔案，若你想試用 Squoosh 功能，底下也有提供不同類型大小的範例圖。
第二步：選擇好圖片後就會進入設定的介面中，中軸線將原來的圖以及壓縮後的圖分開，在預設的情況下，線的左邊為原圖而右邊則是壓縮後的圖片，左右調動即可看出兩者間的差異。可以在下圖中的左下角和右下角分別有兩張圖片的檔案大小，右邊經過壓縮後檔案容量顯示少了 50%，從原本的 676KB 降為339 KB。
第三步：圖片中下方可調整圖片大小，右邊工具列可選擇不同的壓縮工具，Squoosh 支援 OptiPNG 、 MozJPEG 、 WebP 和直接轉為 PNG 、 JPEG 或 WebP 格式。如果想要調整圖片大小，可以勾選 Resize 後設定不同的圖片長寬數值。
第四步：前面有說過左邊的預設是原始檔案，也可以把它調整為其他壓縮演算法處理過的圖片，再利用中軸線拖曳比較不同的效果。設定好後右下及左下皆有下載按鈕，點選即可下載你所選擇壓縮後的照片。
Squoosh的好處是他已經整合各種強大的圖片編碼解碼器，不需要下載、安裝任何軟體，重要的是在網頁載入後即可離線使用，且無論是在手機、平板還是電腦上都能輕鬆使用。
今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～
如何使用 Elementor 建立 WooCommerce 單一商品頁？圖文步驟教學
Elementor 選單小工具 – 客製化 Menu Widget 功能與樣式操作教學
Site Kit For WordPress – 網站後台顯示 Google 分析數據外掛教學