Image Optimization in Laravel

Optimization made easy

Measuring performance are major steps need to consider in software development. To increase the performance — Optimization are important. Optimization means downsizing the media files but maintaining a satisfactory level of visual quality for delivery. So to provide a fast page load it is best to make those media files as small as they can be. The less bytes the browser needs to download the faster the page will be.

Here is where Laravel image optimizer developed by Spatie comes in handy. This package make images as small as they can be with these tools — such as jpegtran, pngquant, and gifsicle. In most cases these tools can make your images considerably smaller without you noticing, unless you have a trained eye for that.

Let’s get started

Install laravel image optimizer package by running below command in terminal

> composer require spatie/laravel-image-optimizer

This package uses a bunch of binaries to optimize images as mention. You may need to configure each of the binary and must be present in your system. Here is the list of optimizer binaries available: —

• JpegOptim
• Optipng
• Pngquant 2
• SVGO 1
• Gifsicle
• cwebp

Publish config

You can modify that configuration by publishing the config file.

> php artisan vendor:publish --provider="Spatie\LaravelImageOptimizer\ImageOptimizerServiceProvider"

How to implement?

The implementation is quite simple. You can use OptimizerChain class directly or can use facade for simple use.

If you want to optimize the image and replace the current :-

app(OptimizerChain::class)->optimize($imagePath);
// OR
ImageOptimizer::optimize($imagePath);

If you want to optimize the image and don’t want to replace the current :-

app(OptimizerChain::class)->optimize($imagePath, $newImagePath);
// OR
ImageOptimizer::optimize($imagePath, $newImagePath);

The Optimizer will automatically detect the file type and optimize accordingly using the selected binary.

For example:-

public function store(Request $request)
{
    ...
    
    ImageOptimizer::optimize($request->image->getRealPath());
    $request->image->storeAs('image');
    
    ...    
}

Optimizer Middleware

If you’re having multiple form on your current project which having image upload, it will be many changes on every form controllers. But, this package make things simpler without touching your controller by using Middleware.

\Spatie\LaravelImageOptimizer\Middlewares\OptimizeImages::class

This middleware will find all the files in each request and optimize it on the fly. BUT, if you are using Livewire, this middleware will not working. You may need to use the OptimizerChain in your component before your store the image.

Troubleshooting

1. If you encounter problems where your image unable to optimize accordingly, please check if the binaries are installed correctly
2. If all the binaries installed but still unable to optimize, you may enable the “log_optimizer_activity” in the config file. It will show any error message occurred while executing the process in your log file.
3. If you using macbook and you install the binaries using homebrew, you might want to symlink the binary path to local path like below :-

> ln -s  /opt/homebrew/bin/jpegoptim /usr/local/bin/jpegoptim

That’s all guys. Hope this helps. 😁

References