pulkit kathuria

In this story, we are going to be sharing the code snippets and methods used to compress your images for Laravel web applications.

For webpages, it is better to use losslessly compression techniques for faster page reloads and reduce the size of huge images. This is a good practice for SEO and good user experience as the page will load faster.

Google announced squoosh app and there are also other tools like Tinyjpg that compress images and reduce the file size. In this story, we are going to be aiming to achieve similar size reduction that we get after the compression by Tinyjpg and squoosh.app.

We are going to be using multiple image compressors, so please make sure that you have the following bins installed.

╰─$ which svgo pngquant optipng jpegoptim gifsicle convert
/usr/local/bin/svgo
/usr/local/bin/pngquant
/usr/local/bin/optipng
/usr/local/bin/jpegoptim
/usr/local/bin/gifsicle
/usr/local/bin/convert

Next, let’s install, Spatie’s Laravel image optimizer.

composer require spatie/laravel-image-optimizer

It can optimize PNGs, JPGs, SVGs and GIFs by running them through a chain of various image optimization tools.

It can optimize an image by automatically finding out the mime type and best optimizer.

use ImageOptimizer;ImageOptimizer::optimize($pathToImage, $pathToOptimizedImage);

Next, we will add an extra step that is not provided in the Spatie’s compressor. This will help us reduce the image size even further.

We are going to use the convert tool by ImageMagick. Setting quality over 65 in the convert tool, can be an overkill.

public function convert($from, $to)
{
$command = 'convert '
. $from
.' '
. '-sampling-factor 4:2:0 -strip -quality 65'
.' '
. $to;
return `$command`;
}

Let’s call convert, on the optimized image.

ImageOptimizer::optimize($pathToImage, $pathToOptimizedImage);
$this->convert($pathToOptimizedImage, $pathToOptimizedImage);

Only with Spatie/laravel-image-optimizer

╰─$ ls -lh photo*
-rw-r--r-- 1 pk 679754705 1.8M Jul 21 18:15 photo-optimized.jpg
-rw-r--r--@ 1 pk 679754705 2.7M Jul 21 15:44 photo.jpg

Only with Convert

╰─$ ls -lh photo*
-rw-r--r-- 1 pk 679754705 944K Jul 21 18:16 photo-optimized.jpg
-rw-r--r--@ 1 pk 679754705 2.7M Jul 21 15:44 photo.jpg

Spatie/laravel-image-optimizer with Convert

╰─$ ls -lh photo*
-rw-r--r-- 1 pk 679754705 874K Jul 21 18:14 photo-optimized.jpg
-rw-r--r--@ 1 pk 679754705 2.7M Jul 21 15:44 photo.jpg

Let’s compare it with the other tools squoosh app and Tinyjpg.

※ Please note that this is not a comparison and it is unfair to compare. All we want to achieve is a similar size reduction from our method and the given parameters.

Results from the squoosh.app,

Results from Tiny.jpg

Our archived size of 874K is not bad as compared to the other compression services. Images converted using this method are also Losslessly compressing the images which will also result in faster page speed.

It is good to use convert along with the other converters for maximum reduction in size and optimized images for your site with Laravel.

Bonus

You can also pass in parameters like resize etc, within the convert command for multiple sizes. http://www.imagemagick.org/Usage/resize/



SOURCE

LEAVE A REPLY

Please enter your comment!
Please enter your name here