如何優化 Web 圖像：提高站點性能的分步指南
已發表: 2023-02-12毫無疑問，圖像是萬維網的寶貴資產。 從可視化數據到拆分文本段落，再到展示您的作品集，照片和圖形是大多數網站設計的重要組成部分，可幫助用戶獲得出色的在線體驗。
然而，擁有出色的視覺效果會對您的網站造成影響。 分辨率越高，文件越大，這也意味著加載時間越慢。 又名，圖像通常是網站性能不佳的原因。 請記住，將圖片添加到您的網站的全部目的是為您的用戶創造更好的體驗（或者甚至可能增加銷售和轉化！），這對於速度慢的網站來說很難做到。
那麼，您如何平衡網站性能與視覺設計？
通過優化圖像。
在整個圖像創建過程中，您可以做很多小事來優化文件大小，特別是考慮到您的網站。
在這個圖像優化分步指南中，我將介紹：
- 什麼是圖像優化？
- 為什麼圖像優化很重要？
- 為網絡優化圖像的 7 種方法
什麼是圖像優化？
一般來說，圖像優化是在不降低質量的情況下減小文件大小的行為。 您可以在創建階段優化您的圖像（通過使用 Photoshop 中正確的“導出”選項）或直接在您的網站上（通過使用延遲加載在您的網站上顯示媒體）。 目標是減少用戶必須下載的數據量，這樣他們就可以在不犧牲質量的情況下更快地獲得他們正在尋找的內容。
為什麼圖像優化很重要？
人們對網絡的注意力持續時間很短，這就是為什麼讓您的網站在兩秒或更短時間內加載很重要。 使您的網站變慢的最常見因素之一是您的圖片。 （即使您的網站運行在最好的服務器上，就像您使用託管 WordPress 主機一樣，圖像也可能會降低性能。）
通過利用圖像優化最佳實踐，您將保持較小的文件大小和較快的加載時間，從而為您的站點訪問者創造更好的體驗。
圖像優化很重要的另一個原因是，它直接關係到您的業務底線。 除了減慢您的網站速度之外，圖像還會佔用為您的網站提供支持的服務器上的磁盤空間。 大多數託管服務提供商對每個計劃實施帶寬限制，這意味著您沒有無限的資源——您的圖像將很快佔用該空間。
雖然如果您超過該限制還不是世界末日，但您可能會被收取超額費用，或者更糟糕的是，您的網站將被關閉。
通過優化您的圖像，您將能夠充分利用您的站點存儲並避免帶寬限制。
現在您知道圖像優化的重要性，讓我們談談如何去做吧！ 本分步指南將涵蓋從 Photoshop 技巧到開發實踐的所有內容。
如何為網絡優化圖像
本分步指南將涵蓋您可以為優化圖像所做的一切，從 Photoshop 開始到您的網站結束。
請按照以下步驟優化圖像以獲得更好的網站性能：
- 對您當前的站點速度進行基準測試。
- 了解如何選擇最佳圖像文件類型。
- 導出前調整圖像大小。
- 壓縮圖像以減小文件大小。
- 使用 WordPress 插件自動優化圖像。
- 使用“模糊”技術首先加載較低質量的圖像。
- 使用延遲加載。
1. 對您當前的站點速度進行基準測試
在你做所有這些工作來優化你的圖像之前，首先在你的網站上運行速度測試！ 到最後，您將能夠看到您所產生的影響（此外，您還可以與您的團隊或老闆分享，以獲得額外的榮譽）。 一些流行的速度測試工具是：
- 谷歌 PageSpeed 洞察力
- Pingdom 工具
- GTMetrix
- 網頁測試
這些基於瀏覽器的工具彼此之間的工作方式非常相似：打開鏈接，然後輸入您的 URL 以獲得有關您網站速度和性能的快速報告。
2.知道如何選擇最佳圖像文件類型
創建完圖像後（從相機保存或從 Photoshop 等工具導出），您可以選擇指定文件類型。 Web 上最常用的文件類型是 JPEG、PNG 和 GIF。 而且我相信您可以猜到，將它們放在您的網站上時，它們都有自己的優點、缺點和最佳實踐。
JPEG文件
JPEG 圖像最適合在您的網站上展示複雜的彩色照片，因為它們允許以較小的文件大小獲得更高質量的圖像。 這種文件類型可能適用於您要在網站上使用的大多數圖像，但有一個主要例外：具有透明背景的圖像。 （對於那些，請參閱下一節關於 PNG 的內容！）
當您的網站使用 JPEG 圖像時，請考慮將其導出為“Progressive”。 這允許瀏覽器在將完整分辨率完全加載到站點之前立即加載圖像的簡單版本。
如果您在 Photoshop 中工作，您會在導出為“存儲為 Web 格式”時找到此設置。
PNG
如果您的圖像中沒有大量顏色（如平面插圖或圖標），或者希望它具有透明背景，我建議導出為 PNG。 確保您的圖像尺寸正確，並尋找另存為 PNG-24（或 8，如果沒有質量損失）的選項。
動圖
第三種最常見的網絡圖像格式是 GIF。 它們僅支持 256 色，因此您必須對這種文件類型有所選擇！
要為您的網站優化 GIF，請認真考慮它們的持續時間、是否需要循環以及您在給定頁面或網站上真正需要多少。
3.上傳前調整圖片大小
為網絡優化圖像的最簡單方法之一是在將圖像上傳到您的站點之前調整它們的大小。 尤其是當您處理來自 DSLR 相機的原始圖像時，尺寸通常比您實際需要的要大得多。
例如，假設您要將圖像添加到您網站上的博客文章中。 如果您的 WordPress 主題以 500 x 500 顯示圖像，但您上傳的圖像分辨率為 1024 x 1024，那麼所有這些額外的像素只會增加文件大小並降低站點速度，而不會提供真正的好處。
通過在上傳前裁剪或調整圖像大小，您將減小文件大小，這將有助於您的網站加載速度稍微快一點，並節省磁盤空間以容納更多圖像。
要調整圖像大小，只需打開您選擇的圖像編輯軟件即可。 Photoshop 效果很好，或者您也可以使用更簡單的工具，例如 Preview（適用於 Mac）、Paint（適用於 Windows）或 Canva（一種瀏覽器工具）。
4.壓縮圖像以減小文件大小
一旦您獲得最終圖像，以正確的格式保存並裁剪為合適的尺寸，在上傳到您的網站之前您還可以採取一個步驟來優化它：壓縮它。
此過程將幫助您縮小文件大小而不會明顯降低圖像質量。 有兩種主要的壓縮類型：有損和無損。
無損壓縮將在壓縮前後保持相同的質量水平。 有損壓縮會丟棄照片的某些元素，但通常是以人眼不會注意到的方式。 要了解有關這些壓縮類型的更多信息，我推薦 Imagify 的本指南。
如果您在站點上看到特定圖像加載並慢慢進入視野，這可能表明它需要壓縮、調整大小或兩者兼而有之。
要壓縮圖像，您只需要一個圖像壓縮工具。 我的最愛包括：
- TinyPNG：一種基於瀏覽器的免費工具，用於壓縮 PNG 和 JPEG 圖像。
- ImageOptim：用於壓縮圖像的免費開源應用程序。
- JPEGmini：適用於 Mac 和 Windows 的照片再壓縮應用程序。
- RIOT：用於優化圖像的免費 Windows 應用程序。
- Image Optimizer：一個免費的 Local 插件。
小PNG
這個基於瀏覽器的工具使用智能有損壓縮優化圖像，通過減少使用的顏色數量來減小文件大小。 （但別擔心，您甚至不會注意到！）它免費且快速用於 PNG 和 JPEG。
圖像優化
這是一款免費的 Mac 應用程序，可通過消除不必要的膨脹來壓縮圖像，同時盡可能保持圖像質量。
JPEG迷你
JPEGmini 是一個功能強大的付費選項，可幫助您減小文件大小，同時保持質量和格式。 它確實有免費試用版，因此您可以在購買前試運行。
暴動
Radical Image Optimization Tool (RIOT) 是一款免費的 Windows 應用程序，用於減小圖像文件的大小。 它具有並排視圖，因此您可以比較壓縮前後的圖像質量。
Image Optimizer，一個免費的 Local 插件
如果您使用 Local 作為您的本地開發環境，您可以使用 Image Optimizer Add-on 自動離線壓縮圖像。 它會掃描您的站點以查找所有圖像文件，從而節省您單獨壓縮它們並在此過程中加快站點速度的時間。
5. 使用 WordPress 插件自動優化圖像
在這一點上，您可能會開始認為圖像優化是一項繁重的工作——而且確實如此！ 但也有一種簡化其中一些步驟的簡單方法，那就是在您的 WordPress 網站上安裝圖像優化插件。
我有一些建議，它們各有特色。 但通常，圖像優化插件會在您上傳到 WordPress 網站時壓縮圖像並調整其大小。 這意味著您可以跳過這些步驟而不是手動執行它們，從而節省大量時間。
如果您正在為客戶構建站點，這種方法也很不錯。 嘗試記住圖像優化過程的每一步對於最終用戶和內容創建者來說壓力很大。 通過安裝一個將為他們完成大部分工作的插件，您將有助於確保您所構建網站的速度和性能，一旦您將其移交。
要優化 WordPress 網站上的圖像，我推薦這些插件：
- EWWW 圖像優化雲
- 小PNG
- 克拉肯.io
- 想像
EWWW 圖像優化雲
當您將圖片上傳到您的網站時，此 WordPress 插件會自動優化您的圖片，或者它還可以優化您過去上傳的圖片。 如果您正在使用具有未優化圖像的現有站點，這將非常有用。
小PNG
TinyPNG 團隊的這個 WordPress 插件可以在上傳時優化 JPEG 和 PNG 圖像。 如果您是基於瀏覽器的工具的粉絲，可以使用他們的免費插件簡化流程！
克拉肯.io
Kracken.io 插件可以優化 WordPress 網站上的新圖片和現有圖片。 它還支持無損和有損壓縮模式，讓您可以充分控制最終結果。
想像
這個 WordPress 插件將幫助優化您的圖像而不會降低質量。 如果您使用的是 WooCommerce 和 NextGen Gallery，它也與這些插件兼容。
注意：在選擇插件之前，一定要看看它們是如何運作的。 一些使用服務器徵稅操作可能會導致您的站點出現問題，而另一些則使用 FTP 選項來減輕您的 Web 服務器上的負載。
6.使用“模糊”技術首先加載質量較低的圖像
即使在前面的所有優化步驟之後，在某些情況下，您仍然可能在頁面上處理大文件或大量圖像，從而降低您的網站速度。 在這些情況下，有時不僅可以優化圖像，還可以優化加載體驗，這樣網站訪問者就會認為您的媒體文件加載速度比實際速度要快。
這就是接下來兩個步驟的全部內容——提供更快加載圖像的外觀，這樣用戶就不會在加載文件時盯著空白頁面。
一種方法是先加載低質量圖像 (LQI)。 通過在加載全尺寸圖像之前加載較小版本的圖像，它可以讓用戶在等待所有細節時看到一些東西。 這給人一種加載時間更快的感覺，即使從技術上講，所有內容都以相同的速度加載。
一種流行的方法是“模糊”技術，您可以通過本 CSS-Tricks 教程了解如何實施。
7.延遲加載您的網站圖片
與“模糊”技術類似，還有一個技巧可以幫助您呈現加載速度更快的圖像外觀：延遲加載。
當有人登陸您的網站時，他們會從頁面頂部開始。 滾動整個頁面可能會花費他們一些時間，尤其是當他們參與其中時。 延遲加載不是嘗試一次加載所有圖像，而是假設用戶最關心他們可以看到的內容。 因此，他們的瀏覽器視圖中的圖像首先完全加載，而其他圖像首先加載佔位符，直到用戶滾動到頁面的該部分。
延遲加載本身就是一項很棒的技術，與這些圖像優化技巧的其餘部分搭配使用時會更加強大！ 而且，由於 Smush 插件，在 WordPress 網站上做起來非常容易。
我們通過優化圖像獲得更好網站性能的分步指南到此結束！ 要查看這對您的站點產生的影響，請運行另一個速度測試。 你好嗎？
使用正確的圖像優化工具，您將能夠立即看到更好的網站速度和性能！