How to create progressive images in Laravel with Intervention Image

Steps to create progressive images in Laravel

1. Install Intervention Image library/package in your Laravel project.
2. Create a route.
3. Create a Controller to process the request.
4. Convert the image using interlace function and save.

I hope some of you will be wondering why we need progressive images or what is a progressive image, does it make the our website loading faster. In this tutorial we will be covering all faqs related to progressive images and also learn how we can create or generate progressive images in our web application. This process can be done in any framework where you can install and use Intervention Image package. For this tutorial we will be using Laravel Framework, Intervention Image package and convert images to progressive images while uploading to our server.

What is a progressive image?

In simple terms, a progressive image will actually show the entire image right away. The trade-off here being that it only loads some of the image data at a time. This means the image will load in at full size looking pixelated and will become more clear as it loads the entire image, which is more appealing way to deliver an image at modem connection speeds and users with faster connections are not likely to notice the difference because the complete image gets downloaded faster. On the other hand normal images render the image partially, and the browser has to wait until the entire image is finished downloading.

How to create progressive images in Laravel

I assume you have already have a Laravel project installed and running in your local machine or server. We will be creating a route to handle the request when you submit a html form or even you can customise and use while uploading images using an API, one controller to process and convert to the image into progressive image. We will also see how to install Intervention Image library/package in your Laravel project.

Installing Intervention Image library/package in Laravel project

Intervention Image is an open source PHP image handling and manipulation library. It provides an easier and expressive way to create, edit, and compose images and supports currently the two most common image processing libraries GD Library and Imagick.

The class is written to make PHP image manipulating easier and more expressive. No matter if you want to create image thumbnails, watermarks or format large image files Intervention Image helps you to manage every task in an easy way with as little lines of code as possible.

Composer Installation

To install the most recent version, run the following command in your terminal

php composer.phar require intervention/image

Integration in Laravel

Intervention Image has optional support for Laravel and comes with a Service Provider and Facades for easy integration. The vendor/autoload.php is included by Laravel, so you don't have to require or autoload manually. Just see the instructions below.

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

<!--Now the Image Class will be auto-loaded by Laravel.-->

Configuration

By default Intervention Image uses PHP's GD library extension to process all images. If you want to switch to Imagick, you can pull a configuration file into your application by running on of the following artisan command.

Publish configuration in Laravel 5

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

Route to handle the request

If you are using Laravel 5.2 or lower version, you can add these line on code in routes.php or use web.php for handling the request. You can do the same routing in your api also.

Route::post('upload/image', 'ImageController@uploadImage');

Controller to process the request

We just need to use interlace function to convert image into progressive.

Code:

<?php
namespace App\Http\Controllers;
use Image;
use Storage;
use App\Http\Requests;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\File;
class ImageController extends Controller
{
  public function uploadImage(Request $request)
  {
    $this->validate($request, [
      'image' => 'required|image|mimes:jpeg,jpg,png'
    ]);
    if ($request->hasFile('image')) {
      $image_name = 'vann-studios'. rand(0 ,99);
      $image_name = $image_name . '.' .
      $request->file('image')->getClientOriginalExtension();
      $image = $request->file('image');
      $image_name = $this->saveImage($image, $image_name, NULL);
      return '{"status":"Image uploaded successfully!"}';
    } else {
      return '{"status":"Please select image!"}';
    }
  }
  public function saveImage($image, $image_name,$oldImage = NULL)
  {
    $image_path = public_path('images/progressive-image/');
    Image::make($image->getRealPath())->interlace()->save($image_path . $image_name, 80);
    if (!is_null($oldImage)){
      File::delete($image_path . '/' . $oldImage);
    }
    return $image_name;
  }
}