希望您的圖像載入更快？
GTmetrix和PageSpeed Insights顯示了一些圖像優化，但不是全部。本教程可幫助您優化WordPress中的圖像以使其儘快載入。它包括從WebP到ShortPixel的所有內容，自適應圖像，通過CDN提供服務以及正確調整圖像大小。
許多圖像編輯程序（Photoshop和GIMP）可以在上傳圖像之前對其進行優化。例如，它們使您可以將圖像裁剪/調整為適當的尺寸，對其進行壓縮並刪除EXIF數據。利用圖像編輯程序完成的這些優化。
如果您的網站使用高解析度圖像（攝影網站），則可能不希望調整其大小並進行壓縮（步驟2 + 5），因為即使少量也可能降低質量。
優化WordPress圖像以提高速度
1.在GTmetrix + PSI中查找未優化的圖像
自GTmetrix更新以來，GTmetrix和PageSpeed Insights顯示了相同的圖像優化。
- 適當 調整圖像尺寸–調整大圖像尺寸以校正尺寸。
- 延遲屏幕外圖像 –延遲載入圖像和背景圖像。
- 提供下一代格式的圖像-將JPEG / PNG轉換為WebP。
- 高效編碼圖像–使用插件無損壓縮圖像。
- 使用CSS Sprite合併圖像–將許多小圖像合併為1個文件。
2.使用GTmetrix舊版報告查看更多圖像優化
我還喜歡使用GTmetrix舊式報告，因為它們顯示指定的圖像尺寸錯誤以及使用正確的尺寸正確調整圖像錯誤的大小，而新報告則沒有。對於那些特定的優化，請使用GTmetrix舊版報告。您將需要創建一個免費的GTmetrix帳戶，然後轉到帳戶>分析選項>默認為舊版報告。
- 指定圖片尺寸：在圖片的HTML或CSS中添加寬度/高度。
- 最小化重定向–提供來自正確的www和http（s）版本的圖像。
- 使用內容傳送網路–提供CDN中的圖像。
- 利用瀏覽器緩存–確保正在緩存圖像。
- 縮小圖標的大小並使其可緩存–使用16x16px的圖標並對其進行緩存。
3.適當大小的圖像
只要您遵循網站的正確尺寸（全形博客圖像，徽標，邊欄，頁腳，滑塊等），就不會看到錯誤。如果您已經上傳了大圖像，則需要手動調整其大小或使用插件。然而，大多數圖像優化插件只有一個選項，可以將調整到一個單一的維度集合，人工手動調整往往是唯一的選擇。
如何正確調整圖像尺寸
- 通過GTmetrix舊版報告運行頁面。
- 在PageSpeed標籤中展開按比例縮放的圖片。
- 查找過大的圖像及其正確尺寸（由GTmetrix提供）。
- 將圖像調整為尺寸，然後將舊圖像替換為新圖像。
提示採取截圖
的縮放Chrome擴展可以讓你採取截圖在精確的縮放級別。由於我的全幅博客圖片為680px，因此我使用Zoom（以及計算機的縮放級別）來獲得接近完美的680px截圖。然後，我使用GIMP裁剪邊緣。我剩下的高質量680px屏幕截圖非常適合該博客。對於屏幕截圖，我使用Awesome Screenshot。
創建圖像尺寸
備忘單了解站點的不同區域並創建備忘單。這樣，您就知道每個圖像的確切尺寸，並且可以避免調整大圖像的尺寸，這可能會導致質量下降。
- 網站圖示：16x16px
- 小工具圖片：414（w）
- 輪播圖片：115（h）
- 滑塊圖像：1900（w）x 400（h）
- 特色圖片：250（w）x 250（h）
- 全形博客文章圖片：680（w）
- Twitter OG圖片1024（寬）x 512（高）
- Facebook OG圖片：1200（w）x 628（h）
確保使用自適應圖像為移動設備正確調整圖像大小（步驟11）。
4.延遲屏幕外圖像
延遲屏幕外圖像意味著您需要延遲載入它們。
延遲載入內置於WordPress 5.5中，因此無需在另一個插件中啟用它。大部分延遲載入錯誤是因為背景圖像（在CSS中）沒有被延遲載入。在這種情況下，您可以搜索WordPress的存儲庫或嘗試使用Elementor延遲載入背景圖片插件。
如何修復延遲離屏圖像
- 延遲載入圖像。
- 延遲載入背景圖片。
- 了解您的緩存插件（例如WP Rocket）如何延遲載入圖像。
摺疊後的圖像應被排除在延遲載入之外，因為用戶會立即看到它們。
5.提供下一代格式的圖像
以下一代格式提供圖像意味著您需要將圖像轉換為WebP。
大多數圖像優化插件都可以這樣做（例如ShortPixel）。否則，請使用WebP插件，例如WebP Converter For Media。如果您使用的是WP Rocket，則幾乎應始終禁用WebP緩存，除非您的WebP插件不提供WebP圖像（通常這樣做）。如果您正在使用Cloudflare或使用<picture>元素或.htaccess方法，也應該禁用它。
如何修復下一代格式的圖像
- 通過圖像優化插件啟用WebP。
- 選擇<P>最常見的WebP轉換方法。
- 或者，您可以使用WordPres存儲庫中的指定WebP插件。
6.有效編碼圖像
有效地編碼圖像意味著您需要壓縮圖像。
通常通過圖像優化插件或圖像編輯程序（Photoshop，GIMP等）完成此操作。Lighthouse以85％的壓縮率測試您的圖像，並將其與原始版本進行比較。如果節省的是4KiB或更多，Lighthouse將標記圖像。因此，如果您希望通過此建議，請將圖像壓縮級別設置為85％左右。
如何修復有效編碼的圖像
- 選擇一個圖像優化插件（我建議使用ShortPixel）。
- 將壓縮級別設置為85％（與Lighthouse使用的級別相同）。
- 批量壓縮現有圖像，並選擇在上傳時優化圖像。
7.指定圖像尺寸
指定圖像尺寸意味著向圖像的HTML或CSS添加寬度/高度。
這是GTmetrix舊版報告中建議的優化，但仍然有用。不具有height屬性的圖像可能會導致PageSpeed Insights中的CLS更高。可視化編輯器和大多數頁面構建器會自動添加width / height屬性，因此您通常不必擔心。但是以HTML / CSS硬編碼的圖像需要手動完成。
如何修復指定圖像尺寸
- 通過GTmetrix舊版報告運行頁面。
- 了解哪些圖像指定了圖像尺寸錯誤。
- 注意GTmetrix提供的圖像尺寸。
- 編輯頁面，找到圖像，然後查看它的HTML或CSS。
- 向圖像添加width和height屬性（以下屏幕截圖）。
8.從CDN提供圖像
從CDN提供圖像意味著您需要啟用CDN重寫。
設置CDN時，默認情況下，它們不會更改您的URL。您將需要啟用CDN重寫，這可以在Perfmatters或WP CDN Rewrite插件中完成。這會從您的CDN（而不只是伺服器）中提供圖像。一些圖像優化插件（例如Flying Images）將提供來自免費CDN的圖像，例如Static。Cloudflare不使用CDN URL。這會將您的圖片網址更改為包括CDN URL，以確保它們是由CDN提供的。
如何從CDN提供圖像
舊圖片網址（不重寫CDN）： https: //onlinemediamasters.com /wp-content/uploads/2021/01/Tom-Dupuis-Widget.png
新圖片網址（帶有CDN重寫）：https :
9.避免圖片URL重定向
最小化重定向可能是由錯誤網址提供的圖片引起的。
如果更改為HTTPS或WWW版本，則應批量更新所有圖像（和鏈接），以便它們使用正確的版本。否則，您會在整個網站上看到錯誤，以最大程度地減少重定向。
使用Better Search Replace插件可以批量更新圖像URL。
10.使用CSS Sprite合併圖像
我在舊首頁上使用了CSS Sprite 。您可能會認為您看到了21個圖標，但實際上是1張單個圖片。這是CSS精靈，可將多個圖像（通常是較小的裝飾性圖像，如徽標或圖標）組合成一個圖像。這減少了圖像以及請求的數量。它無需載入21張圖像，而是載入1。您可以使用CSS Sprite Generator來執行此操作。
人們可能會說：「嗯，很容易在0.5秒內載入369MB的頁面大小！」 但老實說，刪除繁重的元素並使您的網站更輕便，就像其他優化一樣。
11.將自適應圖像用於移動
自適應圖像將較小的圖像提供給移動設備。
如果您在Android的GTmetrix舊版報告（高級功能）中測試您的網站，則可能會在移動設備上看到按比例縮放的圖片錯誤。那是因為沒有為移動設備調整圖像大小。有很多自適應圖像插件（其中ShortPixel自適應圖像最受歡迎）。
如何創建自適應圖像
- 安裝自適應圖像插件。
- 在您的網站上進行重新測試，以確認移動設備上圖像尺寸的正確大小。
12.禁用圖像熱鏈接
禁用熱鏈接可以防止人們將您的圖像複製/粘貼到他們的網站。
如果他們這樣做，該映像仍將託管在您的伺服器上並佔用您的帶寬。WP Rocket（禁用嵌入），Cloudflare和許多主機都有用于禁用圖像熱鏈接的選項。
13.刪除EXIF數據
刪除EXIF數據會 從圖像中刪除無用的信息。
刪除它會使圖像變小。您可能不需要圖像中的光圈，快門速度，ISO，焦距，相機型號，拍攝的日期照片以及其他無用的數據。大多數圖像優化插件都有刪除EXIF數據的選項（以下是ShortPixel）。
14.在連接緩慢的情況下為用戶提供質量較低的圖像
該Optimole插件和CloudFlare的幻影下調對低速連接的用戶的圖像質量。這是一個折衷，但是如果大多數訪問者都在移動設備上，請考慮一下。
15.緩存圖像
緩存圖像通常是通過您的緩存插件完成的。
WP Rocket（我使用的是什麼）和LiteSpeed Cache是黃金標準。
16.緩存墓碑
如果您的文章中有很多評論，請考慮優化Gravatars。
我使用WP User Avatar在本地託管Gravatar（該插件可讓我上傳自定義的紫色Gravatar圖標）。然後，我使用WP Rocket延遲了我的評論和Gravatar的JavaScript（wpDiscuz和gravatar）。由於我的評論被延遲和優化，因此它幾乎使博客的初始載入時間為零。我嘗試了Gravatar緩存插件，但對我不起作用。
17.調整GIF大小
就像將圖像調整為正確的尺寸一樣，GIF也應調整大小（使用GIF GIF）。
步驟1：上傳GIF並調整其大小。
步驟2：壓縮。
將其嵌入您的網站並大笑。
18.避免嵌入圖像
始終將圖片上傳到您的網站，切勿從其他網站複製/粘貼它們。否則，您將有額外的請求，因為它不是託管在伺服器上，而是從其他地方提取。
19.圖像優化工具
只是提醒; 避免將多個插件用於同一功能！
主要圖像優化工具
- ShortPixel –無損壓縮，去除EXIF，調整大小。
- ShortPixel自適應圖像–為移動設備提供較小的圖像。
- BunnyCDN – CDN我建議用於提供圖像和其他資產。
- WebP媒體轉換器–將JPEG / PNG轉換為WebP圖像。
- Elementor延遲載入背景圖像–延遲載入背景圖像。
- GTmetrix舊版報告–顯示新報告中未顯示的圖像錯誤。
- 性能–啟用CDN重寫以提供CDN中的圖像。具有其他速度優化功能，可消除特定頁面上的膨脹和卸載資產。
其他圖像優化工具
- 真棒屏幕截圖 – Chrome擴展程序，用於截屏。
- 更好的搜索替換-批量更新需要優化的圖像。
- Cloudflare –包括圖像優化，例如熱鏈接保護，海市rage樓，拋光。
- CSS Sprite Generator –將多個裝飾圖像組合成1個CSS Sprite。
- 飛行圖像–優化插件，可提供來自靜態CDN的圖像。
- WP User Avatar –上傳本地託管的Gravatar圖像（請參閱我的評論）。
- WP Rocket –多數Facebook民意測驗中的＃1緩存插件，均具有圖像優化功能。
- 縮放 – Chrome擴展程序，可在截圖期間獲得完美的縮放級別。
經常問的問題
如何在WordPress中優化圖像？
圖像優化插件通常可以處理壓縮，WebP和刪除EXIF數據。否則，請確保圖像大小合適且延遲載入，這是圖像優化的兩個關鍵部分。
如何在WordPress中正確調整圖片大小？
將圖像調整為正確的尺寸。GTmetrix舊式報告會告訴您應調整大小的正確尺寸。這以前稱為服務縮放圖像。
如何在WordPress中創建WebP圖像？
大多數圖像優化插件都具有將JPEG和PNG轉換為WebP圖像的設置。否則，請在WordPress資源庫中搜索WebP插件。
如何推遲屏幕外圖像？
這意味著您需要延遲載入圖像。如果您在PageSpeed Insights中遇到此錯誤，則最有可能是由於CSS中的背景圖片難以延遲載入。
如何有效編碼圖像？
壓縮圖像可以解決此問題。PageSpeed Insights使用85％的壓縮率來檢查節省的空間是4KiB還是更大，因此請嘗試將圖像壓縮到85％左右。