如何配置 Typecho 支持 WebP 格式图片上传与显示

Typecho 官方版本默认不支持 WebP 格式图片的上传与识别，需要修改核心代码或安装图像处理插件才能实现。推荐优先使用插件方案以避免升级覆盖，手动修改代码适合熟悉 PHP 且需深度控制的用户。

先说结论：Typecho 原生不支持 WebP，需修改代码或插件。

适合希望减少图片体积且服务器带宽有限的博客场景。
先看是否愿意承担修改核心代码后的维护成本。
建议优先测试插件方案，手动修改需备份原文件。

快速处理思路

如果不希望修改核心代码，可安装支持自动转换图片格式的插件，通过钩住上传流程实现 WebP 转换。若选择手动修改，需定位到 Typecho 核心目录下的三个关键文件，将 WebP 扩展名加入白名单数组，并在后台设置中允许上传该格式。

为什么会这样

Typecho 在上传和显示图片时，会通过 PHP 代码检查文件扩展名和 MIME 类型，默认白名单中未包含 WebP。系统会将未知的 WebP 文件视为普通附件而非图片，导致前台无法直接显示或触发浏览器下载行为。修改代码的本质是将 WebP 加入系统的图片识别列表和 MIME 类型映射表中。

分步处理

操作前务必备份整个网站文件及数据库，以下修改基于 Typecho 常见版本结构，不同版本行号可能存在差异。

步骤 1：修改附件类型判断

打开文件 var/Widget/Abstract/Contents.php，查找约 686 行附近的代码。找到判断图片类型的数组，将 'webp' 加入其中。

// 修改前
$value['attachment']->isImage=in_array($content['type'],array('jpg','jpeg','gif','png','tiff','bmp'));
// 修改后
$value['attachment']->isImage=in_array($content['type'],array('jpg','jpeg','gif','png','tiff','bmp','webp'));

步骤 2：添加 MIME 类型支持

打开文件 var/Typecho/Common.php，查找约 1399 行附近。在 MIME 类型定义数组中增加 WebP 的映射。

// 新增一行
'webp'=>'image/webp',

步骤 3：修改主题截图识别（可选）

部分主题或后台列表需要识别缩略图格式。打开 var/Widget/Themes/List.php，查找约 70 行附近，修改正则匹配规则。

// 修改前
return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg)/i", $path);
// 修改后
return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg|webp)/i", $path);

步骤 4：后台设置允许上传

怎么验证是否生效

完成修改后，清除浏览器缓存和 Typecho 缓存。在写文章页面尝试上传一张 WebP 格式图片，若上传成功且在前台文章中能直接显示而非显示为下载链接，即表示配置生效。检查页面源代码，确认图片标签 <img> 的 src 地址后缀为 .webp 且能正常加载。

常见坑

手动修改核心代码后，Typecho 升级时会覆盖修改后的文件，导致 WebP 支持失效，需重新修改或记录差异。部分老旧浏览器可能不支持 WebP 格式，建议配合插件实现自动兼容或提供降级方案。若使用阿里云 OSS 等云存储，需确认云存储端是否支持 WebP 格式的回调处理或直传。

常见问题

修改代码后上传图片还是报错怎么办？

检查服务器 PHP 是否开启了 GD 或 ImageMagick 扩展，并确认后台「基本设置」中已手动添加 webp 到允许上传类型列表。

使用插件转换 WebP 会影响原图吗？

多数图像处理插件提供原图备份选项，可在设置中选择是否保留原始图片，建议开启备份以防格式转换后画质不满足需求。

WebP 格式对 SEO 有影响吗？

公开资料中没有看到可靠的量化数据表明 WebP 直接影响搜索排名，但图片加载速度提升有助于用户体验，间接利于 SEO。

参考来源

让 typecho 支持 webp 格式的图片，告别阿里云 oss 和腾讯云 cos 被恶意刷流量的风险
Typecho 添加 webp 图片格式解析 - 腾讯云开发者社区 - 腾讯云
网站图片过于太大影响整体加载响应速度怎么办？Typecho 高级图像处理插件