How to Compress Images to webp with Intervention Image in Laravel
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
⇨ Here is the table of contents for Laravel articles
I have summarized how to compress images to webp using Intervention Image in Laravel, which is the next-generation image compression format.
There is a past article on the basic usage of InterventionImage, so please refer to it and use this article as a reference only for compressing to webp.
⇨ Useful for compressing and saving images with Intervention Image in Laravel
Operating environment
Laravel6
Conclusion
Command
// $image_url is the URL of S3 or the path of Laravel's Storage
$img = Image::make($image_url);
$img->limitColors(null);
// Original webP
$img->encode('webp')->save($file_path);
Explanation
To encode to webp, simply use encode('webp').
It's quite simple.
A recommendation here is,
limitColors(null)Without this part, when compressing images with transparent backgrounds in the png format, the background turned black. So, I have added this.
I have very little knowledge about image files, so there might be better settings...
URL of the limitColors package
If you know of better settings, please contact me via Twitter DM.
Overview of the Code
Image compression takes time, so it will be executed asynchronously.
It is assumed that the original image is saved in AWS.
Please create a temporary storage directory /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()
{
// Write the URL of the image saved in AWS etc. here.
$thumbnailUrl = AWSに保存された画像のURLをここに来るように書く。
// Initialize the image
$img = Image::make($thumbnailUrl);
$img->limitColors(null);
// Define the location to place the temporary file
$file_path_image = '/temp/thumbnail'
// Define the directory of app/temp/thumbnail/ with the absolute path
$file_path = storage_path('app'.$file_path_image);
// Define the S3 bucket to save to
$disk = Storage::disk('s3');
// Specify the directory of the S3 bucket to save to
$thumbnail_upload_path = 'Thumbnail';
// Save the image as webp in Laravel's Storage temporarily
$img->encode('webp')->save($file_path);
// Save to S3
$path = $disk->putFile($thumbnail_upload_path,new File($file_path),'public');
// Just save to the desired DB
// It doesn't work just by copying, depending on the state of the database, so be careful.
$post = Post::find($post_id);
$post->thumbnail_webp_url = $path;
$post->save();
// Delete the temporary file
Storage::disk('local')->delete($file_path_image);
}
}Checklist for when it doesn't work due to errors
○ Have you created the directory for temporary files?
○ Is the URL for AWS correct?
○ Are you compressing images saved in S3?
Related articles
How to Save Images in AWS EC2 with PHP7.4 + Laravel6
Useful for compressing and saving images with Intervention Image in Laravel
Summary
That's all.
This time, I implemented the asynchronous part of the flow of saving images ⇨ asynchronously (Queue)⇨ displaying!
If you have any thoughts or opinions, please contact me via Twitter DM.
See you!
Popular articles
Deploying a PHP7.4 + Laravel6 project to AWS EC2
Implementing Breadcrumbs in Laravel with laravel-breadcrumbs
