架站資源

Google Chrome Labs Squoosh 高品質線上圖片壓縮工具介紹

歡迎回到鵠學苑— WordPress 網頁設計超詳細攻略 – Google Chrome Labs 推出了一款名為 Squoosh 的線上壓縮圖片工具,可以在不破壞畫質的狀況下減少圖片大小,他的自訂性非常高,包括調整壓縮品質、畫素、重設圖片大小,設定後在網頁上預覽,利用拖拉、放大縮小圖片進行更清楚對比照。當然線上壓縮工具有很多種,之前鵠學苑也有寫過 TinyPNG 線上網頁圖片壓縮 – 照片壓縮不失真 – png 壓縮工具 這一篇線上圖片壓縮軟體,如果說想要為 WordPress 網站縮小圖片尺寸,加快網站載入速度,則可以參考這一篇:WordPress 圖片縮小外掛,批次圖檔壓縮 – 網頁加速必學技能 。接下來跟著鵠學苑的腳步,讓我們開始學習吧!

Squoosh 圖片壓縮工具網址
https://squoosh.app/
Github Google Chrome Labs  討論區
https://github.com/GoogleChromeLabs/squoosh/

Labs 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 分析數據外掛教學

Share
Published by
鵠學苑