How to Compress Image Size in Laravel 11

Websolutionstuff | Aug-19-2024 | Categories : Laravel

Hello, laravel web developers! In this article, we'll see how to compress image size in laravel 11. In laravel 11, we'll compress image size using the composer package. Here, we'll use spatie/image composer package.

Spatie/image allows users to resize, crop, and apply filters to images easily. Also, supports various formats like JPEG, PNG, and GIF. 

Laravel 11 Compress Image Size using Spatie/image

laravel 11 compress image size

 

Step 1: Install Laravel 11 Application

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel laravel-11-example

 

Step 2: Install spatie/image Package

Next, we'll install spatie/image composer package using the following command.

composer require spatie/image

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: Define Routes

Then, we'll define the routes to the web.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

Next, we'll create a controller file using the following command.

php artisan make:controller ImageController

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('image-upload');
    }
        
    /**
     * 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); 
    }
}

Note: Create an images folder in the public directory.

 

Step 5: Create a Blade File

Then, we'll create a blade file for the image upload.

resources/views/image-upload.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How to Compress Image Size in Laravel 11 - Websolutionstuff</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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> How to Compress Image Size in Laravel 11 - Websolutionstuff</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>

 

Step 6: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.

php artisan serve

 


You might also like:

Recommended Post
Featured Post
Laravel whereMonth and whereYear Example
Laravel whereMonth and whereYe...

In this article, we will show you laravel whereMonth and whereYear examples. whereMonth and whereYear are...

Read More

Jan-25-2021

How To Validate Upload File Type Using Javascript
How To Validate Upload File Ty...

This article will show us how to validate upload file type using javascript. Using this post we can easily check the sel...

Read More

Aug-03-2020

How to Display Validation Error Message in Laravel Vue JS
How to Display Validation Erro...

Hey folks, are you ready to make your Laravel Vue.js application even more user-friendly by implementing validation erro...

Read More

Mar-08-2024

How To Validate 10 Digit Mobile Number Using Regular Expression
How To Validate 10 Digit Mobil...

In This small tutorial, I will explain to you how to validate a 10-digit mobile number using regular expressions in...

Read More

Jun-15-2020