LaravelでWebP形式の画像変換や配信に対応する

<picture>
  <source type="image/webp" srcset="/path/to/file.webp" />
  <img src="/path/to/file.png" alt="file name" class="mx-auto h-32 w-auto object-contain" width="300" height="180" />
</picture>

composer require intervention/image

    'providers' => ServiceProvider::defaultProviders()->merge([
        Intervention\Image\ImageServiceProvider::class,
    ])->toArray(),

    'aliases' => Facade::defaultAliases()->merge([
        'Image' => Intervention\Image\Facades\Image::class,
    ])->toArray(),

        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->string('url');
            $table->string('webp_url');
            $table->text('original_url');
            $table->string('label'); // 1モデルに複数画像の場合に対応できるように
            $table->integer('width');
            $table->integer('height');
            $table->string('imageable_id'); // 対応先がULIDでの保存なのでstring
            $table->string('imageable_type');
            $table->timestamps();

            $table->unique(['imageable_id', 'imageable_type', 'label']);
        });

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\MorphOne;

class Post extends Model
{

    public function image(): MorphOne
    {
        return $this->morphOne(Image::class, 'imageable')
            ->where('label', 'thumbnail');
    }
}

use App\Models\Post;
use Illuminate\Support\Facades\Storage;
use Intervention\Image\Facades\Image;

$width = 300;
$height = null;

$post = Post::with(['image'])->find(1);
$url = $post->thumbnail;

$value = [
    'label' => 'image',
    'original_url' => $url,
];

foreach (['png', 'webp'] as $type) {
    $filename = 'thumbnail.' . $type;
    $filepath = 'post/' . $post->id . '/' . $filename;
    $image = Image::make($url)
        ->resize($width, $height, function ($constraint) {
            $constraint->aspectRatio(); // アスペクト比維持
        });
    Storage::disk('public')
        ->put($filepath, (string)$image->encode($type));
    $imageUrl = Storage::disk('public')->url($filepath);

    if ($type === 'png') {
        $value['url'] = $imageUrl;
        $value['width'] = $image->width();
        $value['height'] = $image->height();
    }
    if ($type === 'webp') {
        $value['webp_url'] = $imageUrl;
    }
}

($post->image)
    ? $post->image->save($value)
    : $post->image()->create($value);

<picture>
    <source
        type="image/webp"
        :srcset="post.image?.webp_url"
    />
    <img
        :src="post.image?.url ?? post.thumbnail"
        :alt="post.title"
        :height="post.image?.height"
        :width="post.image?.width"
        class="mx-auto h-32 w-auto object-contain"
    />
</picture>

Post::with(['image']);

or

$post->load(['image']);