How to optimize images in Laravel?

Image is very important resource of our websites, sometimes the larger number of images makes our websites slower. To makes our websites run smoother with larger number of images, we have to optimize the images of our websites. So, in this article we will learn how to optimize images in laravel.

Benefits of Image Optimization

Image Optimization improves the page load time and speeds up the website.
SEO works well in Optimized Images website.
Optimized website has always better conversion rate.
The websites receives better traffic if images is optimized in website.

The elements involved in Image optimization:

Image quality – In most cases, you can significantly lower quality without a significant visual impact. Consider your image purpose and audience, and use the lowest possible quality that is acceptable for the image content, audience, and purpose.
Image format – Make sure each image is delivered in the right format for its image content. Take advantage of CDN services or other tools/logic to check which browser is making the request and deliver different formats for different browsers using the element and its srcset attribute.
Image metadata – By default, images contain a lot of metadata stored by cameras and graphics applications, but this data is completely unnecessary in delivered images. So, we can remove this meta data or EXIF data from images.
Image sizing and resizing – Even when resizing on the server-side, keep in mind that you can crop to focus on important content, and not just scale down your images.

Optimizing the images in Laravel with Intervention Image Library

Intervention Image is an Open Source PHP Image Handling and Manipulation Library. It has Laravel Facades and Service Providers which we can use in our Controllers.

Installing the Intervention Image Package in Laravel.

Intervention Image requires the following components to work correctly.

PHP >= 5.4
Fileinfo Extension
And one of the following image libraries.

GD Library (>=2.0) … or …
Imagick PHP extension (>=6.5.7)

Step 1 : Run the composer command to install Intervention Image in Laravel.

composer require intervention/image

Step 2 : After you have installed Intervention Image, open your Laravel config file config/app.php and add the following lines.

In the $providers array add the service providers for this package.

Intervention\Image\ImageServiceProvider::class

Add the facade of this package to the $aliases array.

'Image' => Intervention\Image\Facades\Image::class

By default Intervention Image uses PHP’s GD library extension to process all images. But we will switch to Imagick, because we need to remove EXIF data from images also. To dot this you can pull a configuration file into your application by running one of the following artisan command.

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravelRecent"

Through this command we have a configuration file in config/image.php file.

Now we can use the Laravel Intervention package. So, lets start…

Laravel Setting Image Quality

Use the code given below in your controller

$image = $request->file('image_file'); //image_file is the name of the file field used in the form in blade
$img = Image::make($image->path());
$img->save('public/uploads/' . time(). '.' . $image->getClientOriginalExtension(), 75); // 75 is the image quality

In save method the second argument we passed is the image quality and its value can be 1 to 100.

Laravel Resize Image

$image = $request->file('image_file'); //image_file is the name of the file field used in the form in blade
$img = Image::make($image->path());
$img->resize(300, 300, function ($constraint) {
      $constraint->aspectRatio();
}); // compression with aspectratio
$img->save('public/uploads/' . time(). '.' . $image->getClientOriginalExtension(), 75); // 75 is the image quality

In the resize method we set the width and height 300px. In callback function we use the aspectRatio method which will not break our images on resize.

Laravel Remove EXIF Data From Images

Here, we will use imagick php module. You can check your imagick module by using the phpinfo() function. If imagick is not installed then install it through CPANEL or Server Configuration.

$image = $request->file('image_file'); //image_file is the name of the file field used in the form in blade
$img = Image::make($image->path());
$profiles = $img->getImageProfiles("icc", true);

$img->stripImage();

if(!empty($profiles))
    $img->profileImage("icc", $profiles['icc']);

$img->save('public/uploads/' . time(). '.' . $image->getClientOriginalExtension(), 75); // 75 is the image quality

Laravel Convert Images to Webp Format

Here we will convert our images to webp format.

$image = $request->file('image_file'); //image_file is the name of the file field used in the form in blade
$img = Image::make($image->path());
$img = $img->encode('webp', 75);  // 75 is image quality and its value can be 1 to 100

$img->save('public/uploads/' . time(). '.webp'); // 75 is the image quality

Using CDN in Laravel

To Optimize our images more, we can use the CDN(Content Delivery Network). Because CDN provides your resources from cloud server with different data centers.