Laravel Compress Image Before Upload Example

If you wanted to compress image in laravel application then you are a right place. i will guide you how to compress image before upload using spatie in laravel. we can easily image minify or image compression in laravel. using spatie we can easily compress image of png, jpeg, jpg, gif, svg etc.

we will use spatie/image package for compress or resize image in laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11. spatie/iamge provide a resize function that will take a three parameters. three parameters are width, height and callback function. callback function is a optional.

In this example, we will install the spatie/image Composer package. spatie/image provides methods to optimize image size using the `load()` and `optimize()` methods. We will create a simple form with the file input field. You can choose an image, and then you will see a preview of the original image.

Step for How to Optimize Image Size in Laravel?

• Step 1: Install Laravel
• Step 2: Install spatie/image Package
• Step 3: Create Routes
• Step 4: Create Controller File
• Step 5: View File and Create Upload directory
• Run Laravel App

So, let's follow the below steps to generate a thumbnail image in the Laravel 11 application.

Step 1: Install Laravel

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Install spatie/image Image Package

In the second step, we will install spatie/image for compress image. So, first, fire the command below in your CMD or terminal:

composer require spatie/image

Now, we also need to install image optimization tools in your system, so let's install it to your system as well:

Install all the optimizers on Ubuntu/Debian:

sudo apt-get install jpegoptim
sudo apt-get install optipng
sudo apt-get install pngquant // For PNG Image
sudo npm install -g svgo
sudo apt-get install gifsicle
sudo apt-get install webp
sudo apt-get install libavif-bin # minimum 0.9.3

Install all the optimizers on MacOS:

brew install jpegoptim
brew install optipng
brew install pngquant
npm install -g svgo
brew install gifsicle
brew install webp
brew install libavif

Install all the optimizers on Fedora/RHEL/CentOS:

sudo dnf install epel-release
sudo dnf install jpegoptim
sudo dnf install optipng
sudo dnf install pngquant
sudo npm install -g svgo
sudo dnf install gifsicle
sudo dnf install libwebp-tools
sudo dnf install libavif-tools

Step 3: Create Routes

In this step, we will add routes and a controller file. So first, add the below route in your routes.php file.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ImageController;
  
Route::get('image-upload', [ImageController::class, 'index']);
Route::post('image-upload', [ImageController::class, 'store'])->name('image.store');

Step 4: Create Controller File

Now, it is required to create a new ImageController for image upload and compress image. So, first, run the command below:

php artisan make:controller ImageController

After this command, you can find the ImageController.php file in your app/Http/Controllers directory. Open ImageController.php file and put below code in that file.

Make sure you have created "images" folder in the public folder.

app/Http/Controllers/ImageController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
use Spatie\Image\Image;
  
class ImageController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(): View
    {
        return view('imageUpload');
    }
        
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request): RedirectResponse
    {
        $this->validate($request, [
            'image' => ['required'],
        ]);
        
        $imageName = time().'.'.$request->image->extension();  

        Image::load($request->image->path())
                ->optimize()
                ->save(public_path('images/'). $imageName);
        
        return back()->with('success', 'You have successfully upload image.')
                     ->with('image', $imageName); 
    }
}

Step 5: View File and Create Upload directory

Okay, in this last step, we will create the imageUpload.blade.php file for the photo upload form and manage error messages and also success messages. So first, create the imageUpload.blade.php file and put the code below:

resources/views/imageUpload.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Compress Image Example - ItSolutionStuff.com</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>
        
<body>
<div class="container">
  
    <div class="card mt-5">
        <h3 class="card-header p-3"><i class="fa fa-star"></i> Laravel 11 Compress Image Example - ItSolutionStuff.com</h3>
        <div class="card-body">

            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> There were some problems with your input.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
  
            @if ($message = Session::get('success'))
                <div class="alert alert-success alert-block">
                    <strong>{{ $message }}</strong>
                </div>
                <img src="images/{{ Session::get('image') }}">
            @endif
            
            <form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
        
                <div class="mb-3">
                    <label class="form-label" for="inputImage">Image:</label>
                    <input 
                        type="file" 
                        name="image" 
                        id="inputImage"
                        class="form-control @error('image') is-invalid @enderror">
        
                    @error('image')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
         
                <div class="mb-3">
                    <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Upload</button>
                </div>
             
            </form>
        </div>
    </div>
</div>
</body>
      
</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/image-upload

Output:

Original Image: 1.1 MB

Compressed Image: 260KB

I hope it can help you...