LaravelでIntervention Imageを使ってwebpに圧縮する方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
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 形式の背景が透明な ものを圧縮した時、背景が黒くなってしまいました。なので、これを追記しています。
画像ファイルに関する知識が全然ないのでもっと良い設定があるかもしれませんが。。
もし、もっと良い設定をご存知の方がいれば、ぜひ 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 からご連絡ください。
それでは!
人気記事