如何使用Laravel Media Library添加WebP格式响应式图片

针对你使用Spatie MediaLibrary生成响应式图片的场景，要统一将所有图片转成WebP格式，可按以下步骤操作：

1. 修正并更新Blog模型 #

首先修正模型中$fillable的语法错误（原代码中'body' . 'user_id'会拼接成错误字符串，导致字段绑定失效），然后添加媒体转换规则，指定所有图片变体使用WebP格式：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\MediaLibrary\MediaCollections\Models\Media;

class Blog extends Model implements HasMedia
{
    use HasFactory;
    use InteractsWithMedia;

    protected $fillable = ['title', 'slug', 'body', 'user_id', 'blog_category_id'];

    public function registerMediaConversions(Media $media = null): void
    {
        // 定义默认WebP转换，可自定义质量参数
        $this->addMediaConversion('webp')
            ->format('webp')
            ->quality(80);

        // 配置响应式图片使用WebP格式
        $this->addMediaConversion('responsive')
            ->format('webp')
            ->quality(80)
            ->withResponsiveImages();
    }

    public function user()
    {
        return $this->belongsTo(User::class);
    }

    public function category()
    {
        return $this->belongsTo(BlogCategory::class, 'blog_category_id');
    }
}

2. 调整Seeder的媒体添加逻辑 #

保持原有逻辑不变即可，withResponsiveImages()会自动调用你定义的WebP格式生成响应式变体：

public function run()
{
    $seed_imgs_folder = 'http://127.0.0.1:8000/seed_imgs/';

    for ($i = 1; $i <= 4; $i++) {
        $blog = Blog::factory()->create([
            'user_id' => User::all()->random()->id,
            'blog_category_id' => BlogCategory::all()->random()->id
        ]);

        $blog->addMediaFromUrl($seed_imgs_folder . 'blog' . $i . '.jpg')
            ->withResponsiveImages()
            ->toMediaCollection();
    }
}

3. 可选：直接替换原文件为WebP格式 #

如果不需要保留原上传的JPG/PNG文件，希望直接将原文件转为WebP，可以在转换规则中添加convertOriginalImage()：

public function registerMediaConversions(Media $media = null): void
{
    // 将原文件直接转换为WebP格式
    $this->addMediaConversion('webp-original')
        ->convertOriginalImage()
        ->format('webp')
        ->quality(80);

    // 响应式变体同样使用WebP格式
    $this->addMediaConversion('responsive')
        ->format('webp')
        ->quality(80)
        ->withResponsiveImages();
}

然后在Seeder中指定执行该转换：

$blog->addMediaFromUrl($seed_imgs_folder . 'blog' . $i . '.jpg')
    ->performConversions(['webp-original', 'responsive'])
    ->toMediaCollection();

注意事项 #

• 确保服务器环境支持WebP：GD扩展需开启WebP支持，或安装支持WebP的Imagick扩展，可通过phpinfo()查看相关配置。
• 质量参数quality(80)可按需调整，数值越高图片质量越好但体积越大。

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