您现在的位置是：首页 > WordPress教程WordPress教程

WordPress怎么使用WebP图片格式？

WP集市 2025-08-21 【WordPress教程】 455人已围观

嘿，兄弟！还在用JPG/PNG堆你那WordPress网站呢？加载速度慢得像蜗牛爬？听我一句劝，赶紧把图片换成WebP格式，体积直接砍一半，加载速度嗖嗖快，SEO都得给你点赞！今天咱就掰开揉碎了讲，WordPress咋用WebP格式，保证小白也能看懂。

为啥非要用WebP？

你想啊，一张1MB的JPG图，转成WebP可能就300KB，画质还差不多，这不香吗？用户打开你网站不用干等着，服务器带宽也省了，简直双赢。Google早就推荐这个格式了，现在主流浏览器（Chrome、Firefox、Edge啥的）都支持，放心用！

开整！WordPress用WebP的N种姿势

姿势一：插件大法（懒人首选）

这玩意儿最简单，找个靠谱插件一键搞定。我常用的有俩：

Smush：名气大，免费版就支持WebP转换。
- 装完插件，进「Smush」→「Dashboard」，找到「WebP Conversion」，点「Activate」。
- 然后选转换模式，一般选「Lossless」（无损）或者「Lossy」（有损，压缩率更高），看你图片重要程度。
- 它会自动把你库里的老图慢慢转，新上传的图也会自动转。
ShortPixel Image Optimizer：这个也贼好用，压缩效果杠杠的。
- 装好后去「Settings」→「ShortPixel」，勾选「WebP/AVIF」选项，选「Create and serve WebP versions of the images」。
- 下面还有个「WebP delivery method」，新手选「Use tags」基本没啥问题，兼容性好。

小提示：插件设置里一般都有「替换原图」或「保留原图生成WebP」选项，建议先保留原图，万一出问题还有得救。对了，有些插件可能需要你先注册个账号拿API key，免费额度一般够用了。

姿势二：手动转换 + 主题支持（稍微折腾点）

如果你不想用插件，或者想更灵活，那就手动来。

先把图片转成WebP：用Photoshop（另存为的时候选WebP格式），或者免费的在线工具比如Squoosh.app，拖进去调调参数就能转。
让WordPress认识WebP：默认WordPress媒体库可能不让上传WebP，得加点代码。
- 打开你主题的「functions.php」文件（外观→主题文件编辑器→functions.php），或者用Code Snippets插件加代码，别直接改核心文件啊！
- 复制这段代码扔进去：
```
// 允许上传WebP格式图片
function allow_webp_upload($mimes) {
$mimes['webp'] = 'image/webp';
return $mimes;
}
add_filter('upload_mimes', 'allow_webp_upload');
```
// 在媒体库显示WebP图片缩略图 function fix_webp_thumbnails() { echo ''; } add_action('admin_head', 'fix_webp_thumbnails');
```
*   这段代码啥意思呢？就是告诉WordPress：“兄弟，WebP这玩意儿是图片，可以上传！” 后面那段是修复媒体库里WebP缩略图可能显示不正常的问题。
```
前端显示：上传WebP图片后，在文章里直接插就行。但为了兼容那些极少数不支持WebP的浏览器（比如远古IE），可以用<picture>标签：
```
<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="描述" />
</picture>
```
这样浏览器支持WebP就显示.webp，不支持就显示.jpg，完美！

姿势三：服务器配置（.htaccess大法，高手向）

这个就得动服务器配置了，适合用Apache服务器的兄弟。原理是用户请求.jpg/.png时，服务器偷偷给它返回对应的.webp文件（如果存在且浏览器支持）。

先确保你服务器支持mod_rewrite模块。

在你网站根目录找到.htaccess文件（没有就新建一个），加这么一段：

<IfModule mod_rewrite.c>
    RewriteEngine On
    # 检查浏览器是否支持WebP
    RewriteCond %{HTTP_ACCEPT} image/webp
    # 检查对应的WebP文件是否存在
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    # 如果都满足，就返回WebP文件
    RewriteRule ^(wp-content/uploads/.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
    # 给WebP文件加上正确的Content-Type头
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

这个方法比较底层，不依赖插件，效率高。但改.htaccess要小心，改错了网站可能打不开，先备份！