Squoosh：網站圖像優化工具

？索引

1. 簡介
2. Squoosh 是什麼？
3. 延遲載入
4. 參考文獻
5. 結論

---

1. 簡介

網路通常以影像的使用為特徵。您是否造訪過沒有圖像的網站？我向你保證，事實並非如此。圖像是網路中最出色的多媒體內容，因此學習管理圖像對於提供具有良好用戶體驗的最佳網站非常重要。

2. Squoosh 是什麼？

Squoosh 是一款安全且易於使用的開源工具，由 Google Chrome 開發團隊創建和維護，可透過減輕圖像重量來優化圖像，但不會損失最終用戶的演示品質。

我們可以訪問其官方網站，您可以在其中上傳圖像，並根據您的使用案例，調整它們的重量和品質。

例如，我們載入一張.png格式的圖片，大小為1.62Mb，經過優化後，我們可以得到同樣大小為154Kb的圖片，僅使用工具就可以優化90%：

我們可以看範例的demo來檢查一下。

3. 延遲載入

管理映像最佳化的另一種簡單方法是對未立即加載到使用者視窗中的映像使用延遲加載，這意味著透過避免請求可能不需要使用的映像來節省客戶端的頻寬。

讓我們來看一個簡單的例子：

範例中的最後一張圖片預設不會加載，因為它有屬性loading="lazy"，這只會在用戶滾動時加載它，這將向瀏覽器表明用戶需要該圖片，所以負擔。

如您所見，這是一種非常簡單的節省頻寬的方法，而且本身就是純 HTML。

4. 參考文獻

Squoosh 官方儲存庫如下：

谷歌Chrome實驗室 / 壓扁

直接在瀏覽器中使用一流的編解碼器縮小圖像。

噗噗！

Squoosh 是一款圖像壓縮 Web 應用程序，可透過多種格式減小圖像大小。

隱私權

Squoosh 不會將您的影像傳送到伺服器。所有影像壓縮均在本地處理。

但是，Squoosh 利用 Google Analytics 收集以下資訊：

• 基本訪客資料。
• 前後影像尺寸值。
• 如果是 Squoosh PWA，則為 Squoosh 安裝的類型。
• 如果是 Squoosh PWA，安裝時間和日期。

開發中

為 Squoosh 開發：

1. 克隆儲存庫
2. 要安裝節點包，請執行：

   npm install
3. 然後透過執行以下命令來建立應用程式：

   npm run build
4. 建置後，透過執行以下命令啟動開發伺服器：

   npm run dev

貢獻

Squoosh 是一個開源項目，感謝所有社區的參與。要為該專案做出貢獻，請遵循貢獻指南。

在 GitHub 上查看

5. 結論

使用開源工具優化網站的圖像對於提高網站的效能非常重要，與延遲加載等原生 HTML 功能相結合，可以帶來顯著且極其簡單的效能提升。

---

您可能感興趣的我的作者的其他帖子：

HTML5 中獨有的原生手風琴？

克里斯蒂安費爾南多1 月 10 日

#webdev #html #css ＃前端

快速指南：在 Git 中製作良好提交訊息的技巧？

克里斯蒂安費爾南多 ・2024 年 12 月 20 日

#git #github ＃GitLab ＃西班牙語

如何在 Windows 上建立 SSH 金鑰並將其連接到 Github？ ？

克里斯蒂安費爾南多 ・24 年 12 月 13 日

#github #git ＃西班牙語 ＃GitLab

以上是Squoosh：網站圖像優化工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！