建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

如何通过正确提供 WebP 图像来提高 WordPress 页面的速度?

GG网络技术分享 2025-03-18 16:05 1


提供 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 图像。

# Serve Images with correct Mime Type

AddType image/webp .webp

# Setup Cache

ExpiresActive On

ExpiresByType image/webp A2592000

如何在 Nginx 服务器中实现 WebP 支持?

另一方面,如果您使用 Nginx 服务器在您的网站上运行,那么您同样需要添加一些代码。 这是您需要为此目的编写的代码:

location ~ ^(/path/to/your/images.+).(jpe?g|png)$ {

if ( $http_accept ~* webp ) {

set $webp "A";

}

if ( $request_filename ~ (.+).(png|jpe?g)$ ) {

set $file_without_ext $1;

}

if ( -f $file_without_ext.webp ) {

set $webp "${webp}E";

}

if ( $webp = AE ) {

add_header Vary Accept;

rewrite ^(.+).(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 网站所有者都非常有用,尤其是当您正在考虑优化您的网站时。 因此,请确保添加正确的代码并使用免费插件来更改站点图像的格式并改善其整体用户体验。

相关文章:关于如何提高 WordPress 网站速度的 5 条提示

标签: WordPress op

提交需求或反馈

Demand feedback