了解有損壓縮以及何時使用它

快速載入時間對您網站的成功至關重要。 一個緩慢的網站可能會讓讀者望而卻步並傷害您的網站 搜索引擎排名. 幸運的是,有多種方法可以提高站點的速度,例如對圖像使用有損壓縮。

在這篇文章中,我們將仔細研究有損壓縮以及它如何提高您網站的性能。 我們還將向您展示如何對圖像應用有損壓縮,並討論這種技術的優缺點。

讓我們開始吧!

什麼是有損壓縮?

壓縮會減小文件的大小。 壓縮圖像時,實際上是在使文件變小。 有不同類型的壓縮,其中一種稱為「有損」。

使用有損壓縮,您可以顯著減少文件大小。 但是,此過程會導致圖像質量變差。 這是因為壓縮刪除了組成圖像的一些像素。

正如您可能會說的那樣,壓縮後的圖片看起來不如原始圖片。 根據您使用的壓縮級別,您可能會注意到圖像質量有所下降。

讓我們看一些例子。 這是原始圖像,文件大小為 2MB:

了解有損壓縮和何時使用它了解有損壓縮以及何時使用它

這是壓縮 50% 後的相同圖像:

了解有損壓縮和何時使用它-1 了解有損壓縮以及何時使用它

文件大小已降至 806KB。 但是,質量沒有明顯差異。

最後,我們將圖像壓縮到 10%,這導致文件大小為 329KB:

了解有損壓縮和何時使用它-2 了解有損壓縮以及何時使用它

如您所見,質量的下降現在很明顯。 這是因為我們從圖像中刪除了大量數據。

正如我們之前提到的,壓縮圖像可以 幫助加速您的網站. 為了說明這一點,我們使用不同的圖像大小運行了頁面速度測試 燈塔.

Lighthouse 測試採用顏色編碼,任何綠色數字都可以用於載入性能。 這是我們使用原始圖片時頁面的性能得分:

了解有損壓縮和何時使用它-3 了解有損壓縮以及何時使用它

然後我們將圖像壓縮到 50% 重新進行速度測試:

了解有損壓縮和何時使用它-4 了解有損壓縮以及何時使用它

如您所見,性能有所提高。 最後,我們使用壓縮到 10% 的照片測試了同一頁面:

了解有損壓縮和何時使用它-5 了解有損壓縮以及何時使用它

如您所見,該頁面現在獲得了滿分。 此測試表明小圖像文件可以顯著提高您網站的性能。

雖然高度壓縮的圖形可以為您的網站速度創造奇蹟,但它們較低的質量可能會影響您的品牌。 因此,除非絕對必要,否則我們建議不要將圖像縮小到 50% 以上。

為什麼要使用有損壓縮?

您網站上的數據越多,頁面載入所需的時間就越長。 插件、圖像、音頻和視頻等文件會增加網站載入時間的壓力。

有損壓縮可以幫助您加快網站速度,尤其是在您擁有大量圖像的內容時。 您可以在各種文件格式上使用此壓縮類型,包括 聯合圖像專家組 (JPEG)圖形交換格式 (GIF). 您還可以對視頻和音頻文件應用有損壓縮。

如前所述,有損壓縮的工作原理是從圖像中刪除數據,從而降低尺寸和質量。 這種方法與無損壓縮形成對比,無損壓縮使圖像文件更小而不影響其質量。

但是,有損壓縮比無損壓縮更有效。 這是因為它可以從您的圖像中刪除大量數據。 因此,它可以釋放一些存儲空間並提高站點速度。

如果您擁有大量圖像的網站,例如在線商店或大型博客,您可能需要考慮使用有損壓縮。 這種壓縮方法可以幫助您優化您的 產品圖片、縮略圖、橫幅和您網站上的其他 JPEG 文件。 因此,您的頁面可能會為您的用戶載入得更快,從而幫助您降低跳出率並推動更多轉化。

有損壓縮還可以讓您對圖像的質量和大小進行一些控制。 事實上,許多圖像優化工具使您可以選擇文件的壓縮級別。 這樣,您就可以採用一種平衡的方法來幫助您提高站點的性能,而不會影響圖形的質量。

如何對圖像應用有損壓縮

需要注意的是 WordPress 會自動壓縮 JPEG 文件 高達 82%. 因此,每次您將圖像上傳到您的網站時,它都會經歷一個有損壓縮過程。

您可以通過編輯來調整此自動壓縮級別 你的functions.php文件. 但是,這種方法可能很棘手,它不會壓縮您已經上傳到您網站的圖片。

此外,還有更簡單(更有效)的方法來優化您的圖像。 讓我們看看一些選擇!

1. 使用照片編輯器壓縮圖像

您可以使用首選的照片編輯軟體輕鬆壓縮圖片。 流行的工具,例如 Adobe PhotoshopGIMP 使您能夠對圖像應用質量級別:

了解有損壓縮和何時使用它-6 了解有損壓縮以及何時使用它

或者,您可以使用計算機操作系統中的內置照片編輯器。 如果您是 Windows 用戶,請在 Microsoft 照片中打開您的圖像。 然後,單擊右上角的三個點並從下拉菜單中選擇調整大小:

了解有損壓縮和何時使用它-7 了解有損壓縮以及何時使用它

在下一個彈出窗口中,選擇定義自定義維度:

了解有損壓縮和何時使用它-8 了解有損壓縮以及何時使用它

然後,您可以使用滑塊設置圖像質量:

了解有損壓縮和何時使用它-9 了解有損壓縮以及何時使用它

準備好後,單擊保存調整大小的副本。 我們建議將此壓縮圖像保存為單獨的文件。 這是因為有損壓縮是不可逆的——如果覆蓋原始圖形,則無法撤消更改。

2. 使用 WordPress 插件壓縮圖像

壓縮圖像的另一種方法是使用 一個圖像優化插件. 這種方法可以節省您的時間,因為該插件會自動優化您上傳到您網站的任何圖片。

您可以使用的一個強大的優化插件是 想像

了解有損壓縮和何時使用它-10 了解有損壓縮以及何時使用它

在您的網站上安裝並激活插件後,系統會要求您創建一個免費帳戶並輸入您的 API 密鑰。 完成後,您可以轉到「設置」>「Imagify」來設置您的壓縮首選項。

如您所見,有三個選項可用:

了解有損壓縮和何時使用它-11 了解有損壓縮以及何時使用它

如果您選擇 Normal,該插件將對您的圖像執行無損壓縮。 這種方法可能不會加速您的網站。

同時,Aggressive 類型會導致有損壓縮。 但是,質量不會有任何明顯差異。

最後,我們有 Ultra,這是最強的有損壓縮級別。 此設置可能會導致圖像質量發生重大變化。

為了獲得最佳壓縮結果,我們建議選擇 Aggressive。 Imagify 將自動優化您上傳到 WordPress 的任何圖像的原始大小。

如果向下滾動,您將看到用於選擇要壓縮的其他圖像大小的選項,例如縮略圖:

了解有損壓縮和何時使用它-12 了解有損壓縮以及何時使用它

準備好後,單擊「保存更改」。 您上傳到您網站的任何圖像現在都將自動壓縮到您喜歡的級別。

有損壓縮的好處

正如我們所見,有損壓縮可以提高您網站的性能和頁面載入時間。 反過來,這種提高的性能將帶來更好的用戶體驗。 它還可能有助於改善您網站的 搜索引擎優化 (SEO).

如果您對磁碟空間和帶寬有限制,則有損壓縮也很有用。 它減少了存儲在您網站上的數據量。

幸運的是,壓縮圖形不需要太多努力。 您可以簡單地安裝一個免費插件,它會自動減小您上傳的所有圖像的大小。 因此,使用有損壓縮是提高網站整體性能的一種快速簡便的方法。

有損壓縮的缺點

不幸的是,使用有損壓縮有一些缺點。 首先,您無法將壓縮圖像恢復到原始狀態。 優化圖形時,您需要確保不會覆蓋原始文件。

正如我們已經討論過的,有損壓縮也會對圖像質量產生負面影響。 這是因為它消除了文件中的數據。 因此,您需要選擇適中的壓縮級別以確保質量沒有明顯差異。

結論

在您的圖像上使用有損壓縮可以有效地加速您的 WordPress 網站。 這種技術減少了圖像文件的大小,從而使頁面載入速度更快。 反過來,這種壓縮有助於改善您的用戶體驗和 SEO。

您可以使用您喜歡的照片編輯軟體或圖像優化插件輕鬆壓縮圖像,例如 想像. 但是,我們建議避免使用大量壓縮,因為它可能會導致圖像質量明顯下降。

您對有損壓縮有任何疑問嗎? 在下面的評論部分讓我們知道!

圖片來自 Jaroslaw Slodkiewicz/unsplash.com,精選圖片來自 PureSolution/shutterstock.com

來源

相關文章