Laravel

LaravelでIntervention Imageを使ってwebpに圧縮する方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

⇨ Laravel 記事の目次はこちら

Laravel で Intervention Image を使って webp に圧縮する方法についてまとめました。webp は次世代の画像圧縮形式です。

InterventionImage の基本的な使い方については、過去に記事がありますのでこちらを参考の上、webp に圧縮するところだけ、当記事を参考にしていただければと思います。

⇨【Laravel】Intervention Image で画像を加工して保存画像圧縮に便利

動作環境

Laravel6

結論

コマンド

        //$image_urlにはS3のURLまたはLaravelのStorageのパス
        $img = Image::make($image_url);
        $img->limitColors(null);
        //一覧オリジナルwebP
        $img->encode('webp')->save($file_path);

解説

webp にエンコードするのは、encode(‘webp’)とするだけで良いです。

だいぶ簡単です。

ここでオススメなのが、

limitColors(null)

の部分です。

ここの記述がないと、png 形式の背景が透明なものを圧縮した時、背景が黒くなってしまいました。なので、これを追記しています。

画像ファイルに関する知識が全然ないのでもっと良い設定があるかもしれませんが。。

パッケージの limitColors の URL

もし、もっと良い設定をご存知の方がいれば、ぜひ Twitter の DM などでご連絡いただければと思います。

コードの全貌

画像圧縮は時間がかかるので、非同期で実行します。

オリジナル(元画像)は AWS に保存された前提となります。

一時保存用のディレクトリ/app/storage/temp/thumbnail を作成してください

php artisan make:job Compress
<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;

use Image;
use Storage;
use Illuminate\Http\File;

class Compress implements ShouldQueue
{
  use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

  public function __construct()
    {

    }

  public function handle()
    {
      //AWSなどのURL
        $thumbnailUrl = AWSに保存された画像のURLをここに来るように書く。

        //画像の初期化
        $img = Image::make($thumbnailUrl);
        $img->limitColors(null);

        //一時ファイルを置く場所を定義する
        $file_path_image = '/temp/thumbnail'
        //絶対パスでapp/temp/thumbnail/のディレクトリを定義
        $file_path = storage_path('app'.$file_path_image);
        //保存する先のS3バケットを定義
        $disk = Storage::disk('s3');
        //保存するS3バケットのディレクトリ指定
        $thumbnail_upload_path = 'Thumbnail';

        //画像をwebpでLaravelのStorageに一時保存
        $img->encode('webp')->save($file_path);
        //S3に保存
        $path = $disk->putFile($thumbnail_upload_path,new File($file_path),'public');
        //あとは保存したいDBに保存するだけ
        //データベースの状態によるので、コピーでは動かないので注意。
        $post = Post::find($post_id);
        $post->thumbnail_webp_url = $path;
        $post->save();

        //一時ファイルの削除
        Storage::disk('local')->delete($file_path_image);
    }
}

エラーで動かない時のチェック項目

○ 一時ファイル置き場のディレクトリを作成しているか?

○AWS の URL の指定は間違い無いか?

○S3 に保存された画像を圧縮しているか?

関連記事

Laravel + Vue + S3 で画像の保存をする方法

【Laravel】Intervention Image で画像を加工して保存画像圧縮に便利

まとめ

以上です。

今回は、画像保存 ⇨ 非同期(Queue)⇨ 表示。の流れのうちの非同期のところを実装しました!

感想や意見ありましたら Twitter の DM からご連絡ください。

それでは!

人気記事

PHP7.4 + Laravel6 のプロジェクトを AWS EC2 にデプロイする

【laravel-breadcrumbs】Laravel でパンくずリストを実装する