如何通過正確提供 WebP 圖像來提高 WordPress 頁面的速度？

已發表: 2022-02-11

提供 WebP 圖像
我們都知道以適當的方式使用圖像可以非常有效地改善您網站的外觀。但是，您知道它們可以增加您網頁的權重嗎？

好吧，信不信由你，這是真的。因此，如果您的網站上有很多圖片，有時您可能會遇到滯後問題。此外，您網站的頁面也可能開始緩慢加載。總而言之，這些問題可能會造成很大的問題，並嚴重影響您網站的整體用戶體驗。

那麼，你怎麼能解決這個問題呢？這個問題的答案很簡單，把照片的格式改成WebP。

使用這種格式，您可以減小圖像的大小，同時保持其質量不變。因此，在這裡，我們將稍微討論一下這種格式，並讓您了解在您的網站或服務器上提供 WebP 圖像的方法。因此，請務必保持關注。

WebP 實際上是什麼？

如前所述，WebP 實際上是一種圖像文件格式。它是由谷歌專門為幫助網站所有者優化他們的網站而製作的。是的，你做對了。 WebP 的工作方式與其他流行的文件格式一樣，例如 JPG、PNG、JPEG、BMP 等。

但是，唯一的區別是它比它們更簡單，更輕巧。
因此，如果您在 WordPress 網站上使用它們而不是使用其他格式，那麼它將大大減輕網站的重量。因此，您網頁的加載速度也會提高一英里。

但是，許多瀏覽器，例如 iOS Safari 瀏覽器，不支持這種格式。因此，如果您開始在您的網站上大量提供 WebP 圖片，使用 iPhone 的用戶將只能看到空白圖片。

哪些瀏覽器支持 WebP 格式？

跨瀏覽器兼容性
目前，一些最流行的瀏覽器，如 Google Chrome、Opera 和 Edge 都支持 WebP 圖像格式。

Firefox 最近宣布他們正在努力讓他們的瀏覽器在不久的將來支持這種格式。但是，老式的 Internet Explorer 無論如何都不支持 WebP 格式。

JPEG 和 WebP：圖像大小的比較

如前所述，WebP 格式的圖像不像其他流行格式那麼重，尤其是 JPEG。此外，它們也比普通文件小得多。

例如，WebP 格式的照片比 JPEG 圖像小 25% 到 35%。另一方面，它們比 PNG 照片小約 26%。

僅僅因為這個原因，現在大多數 WordPress 網站所有者在他們的頁面上提供 WebP 圖像，而不是使用傳統的圖像。

如何通過 .htaccess 在 Apache 服務器中實現 WebP 支持？

大多數情況下，您的網絡託管服務器不知道 WebP 圖像格式。因此，如果您想在您的網站上添加一些 WebP 圖像，那麼您首先必須在 .htaccess 文件夾中聲明它。

如果您當前正在使用 Apache 服務器或 cPanel，那麼您可以通過添加一些代碼在其上實現 WebP 支持。

為此，首先，您必須打開名為 public_html 的文件夾中的 .htaccess 文件。之後，您可以在其中添加以下代碼以在您的網站上提供 WebP 圖像。

# 提供具有正確 Mime 類型的圖像
AddType 圖像/webp .webp

# 設置緩存
過期活動在
ExpiresByType 圖像/webp A2592000

如何在 Nginx 服務器中實現 WebP 支持？

另一方面，如果您使用 Nginx 服務器在您的網站上運行，那麼您同樣需要添加一些代碼。這是您需要為此目的編寫的代碼：

位置 ~ ^(/path/to/your/images.+)\.(jpe?g|png)$ {
    if ( $http_accept ~* webp ) {
        設置 $webp "A";
    }

    if ( $request_filename ~ (.+)\.(png|jpe?g)$ ) {
        設置 $file_without_ext $1;
    }

    如果（-f $file_without_ext.webp）{
        設置 $webp "${webp}E";
    }

    如果（$webp = AE）{
        add_header 變化接受；
        重寫 ^(.+)\.(png|jpe?g)$ $1.webp break;
    }
}

因此，這是唯一可以幫助您讓位於 Nginx 服務器中的 WordPress 網站了解 WebP 格式的方法。

什麼是最好的 WebP 插件？

有幾個插件可以幫助您在 WordPress 網站上提供 WebP 圖像並使其更加用戶友好。以下是其中的一些。

1. Cache Enabler 和 Optimus Image Optimizer

擎天柱

Cache Enabler 可能是市場上最易於使用的 WebP 插件之一。它有一個非常簡單的用戶界面，而且運行速度也很快。

因此，如果您是新手並且對高級編碼知之甚少，那麼選擇 Cache Enabler 對您來說將是一個完美的主意。它將為您啟用緩存。因此，您可以完美地使用任何其他圖像編輯插件來完成您的工作。你想知道關於它的另一個驚人的事情嗎？它完全免費下載。

如前所述，Cache Enabler 只會幫助您在您的網站上添加額外的緩存，這一點非常重要。但是，它不能幫助您完全優化圖像並更改其格式。

因此，為此，您需要 Optimus Image Optimizer 的幫助。它是一個自動插件，這意味著它可以自動更改照片的格式。因此，如果您擁有該程序，則無需手動執行任何操作。

2. WebP Express 插件

webp快遞

還有另一個出色的插件可以用於相同的目的。它被稱為 WebP Express 插件。它可以在支持這種格式的瀏覽器上自動生成 WebP 圖像。

以前，您使用兩個不同的插件執行相同的格式更改任務。但是，如果您確實選擇了這個，那麼您不必下載任何額外的東西。

這個插件也很容易使用，可以通過自動更改圖像格式來幫助您提供 WebP 圖像。安裝後，您將在第一頁看到一個名為“開始對話”的選項。那麼，您所要做的就是單擊它並觀看插件的魔力。

WebP 格式對於任何 WordPress 網站所有者都非常有用，尤其是當您正在考慮優化您的網站時。因此，請確保添加正確的代碼並使用免費插件來更改站點圖像的格式並改善其整體用戶體驗。