Silverstripe实现自动生成WebP缩略图的方案探讨

问题适配说明 #

你提到的扩展Image.php无效、不想修改模板调用语法（比如不想把$Image.setWidth(200)改成自定义方法）的痛点，我们可以通过继承GD后端类的方式完美解决——完全兼容原有模板写法，同时自动生成WebP版本。

步骤1：创建自定义GD后端类 #

新建WebPGDBackend.php文件，继承原生GDBackend并重写writeTo方法，在生成原图缩略图后自动生成对应WebP文件：

<?php
class WebPGDBackend extends GDBackend {
    public function writeTo($filename) {
        parent::writeTo($filename);
        // 先检查GD是否支持WebP生成
        if (function_exists('imagewebp')) {
            $picname = pathinfo($filename, PATHINFO_FILENAME);
            $directory = pathinfo($filename, PATHINFO_DIRNAME);
            list($width, $height, $type, $attr) = getimagesize($filename);

            // 根据原图类型生成WebP（保留透明通道等特性）
            switch ($type) {
                // JPG/JPEG类型处理
                case 2:
                    if (function_exists('imagecreatefromjpeg')) {
                        $img = imagecreatefromjpeg($filename);
                        imagewebp($img, $directory.'/'.$picname.'.webp');
                        // 可选：额外生成GIF版本（按需保留）
                        imagegif($img, $directory.'/'.$picname.'.gif');
                    }
                    break;
                // PNG类型处理（必须保留透明通道设置）
                case 3:
                    if (function_exists('imagecreatefrompng')) {
                        $img = imagecreatefrompng($filename);
                        imagesavealpha($img, true);
                        imagewebp($img, $directory.'/'.$picname.'.webp');
                    }
            }
        }
    }
}

步骤2：配置Silverstripe启用自定义后端 #

在项目的config.php中添加以下代码，让Image类使用我们的自定义GD后端：

Image::set_backend("WebPGDBackend");

⚠️ 注意：这个配置仅对新生成的缩略图生效，已有的旧缩略图需要重新生成（比如后台重新上传、或通过代码触发刷新）才会生成对应的WebP版本。

步骤3：配置.htaccess实现浏览器自动适配 #

修改项目根目录的.htaccess，添加以下规则，让支持WebP的浏览器自动加载WebP图片：

<IfModule mod_rewrite.c>
RewriteEngine On
# 检查浏览器是否支持WebP格式
RewriteCond %{HTTP_ACCEPT} image/webp
# 验证对应WebP文件是否存在
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
# 转发请求到WebP版本
RewriteRule (assets.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
# 添加Vary头，确保缓存服务器根据Accept头区分缓存版本
Header append Vary Accept env=REDIRECT_accept
</IfModule>

<IfModule mod_mime.c>
# 注册WebP的MIME类型，确保服务器正确识别
AddType image/webp .webp
</IfModule>

验证要点 #

• 用phpinfo()确认服务器GD库已编译WebP支持（存在imagewebp函数）
• 生成新缩略图后，检查assets目录是否同时存在原图和.webp文件
• 用Chrome等支持WebP的浏览器访问图片，查看网络请求是否加载WebP版本

内容的提问来源于stack exchange，提问作者AEden