How to Compress Images Before Upload in Laravel

14 mins0
How to Compress Images Before Upload in Laravel

When building any web application in the last decade, it’s hard to avoid a common issue: large images causing the website to load in slow motion. By understanding techniques to shrink pictures prior to uploading to Laravel, this issue will no longer be an issue for you. In this tutorial, you will learn how to use the highly popular Intervention Image package to Compress Image in Laravel.

Compress and resize images before you store them, and you will enjoy fast pages, low storage, and happy users. In this topic, we will go through a simple and practical tutorial on Laravel image compression. The complete image upload and compression process will be demonstrated in this topic.

What is image compression in Laravel?

Image compression means reducing the file size of an image while keeping it looking good enough for your users. In Laravel, you usually compress images during upload, before you save them to disk. When you compress and resize image in Laravel, you deliver pages faster and save bandwidth for both your server and your visitors.

If you ignore image sizes, your app starts to feel slow. Browsers take longer to load pages, mobile users burn data, and search engines can push your pages down in the rankings. With image compression site can benifit faster page loads, better Core Web Vitals, Less storage used on your server.

Common real-life Use Cases

  • E‑commerce product galleries
  • User profile photos and avatars
  • Blog post feature images
  • Real estate listings with many photos
  • Portfolio or photography sites
  • Social apps where users upload memes and screenshots
  • SaaS dashboards with user-generated content
  • Multi-tenant apps where storage costs grow quickly

Using Intervention Image to compress image in Laravel

To Laravel optimise image before upload to server, the easiest route is the Intervention Image package. It wraps GD or Imagick in a friendly API and works beautifully inside Laravel.

Before moving to further image compression, you need to install package using composer command inside root directory of your Laravel application:

composer require intervention/image

Then publish the config file:

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

You now have an image.php config file where you can choose the driver (gd or imagick). You need to install these extension before setting it for local development.

Image compression examples with Intervention Image

Let’s take few example before moving to actual example like resize image, compress image and more.

Simple resize and compress before saving

Let’s take an example case, where user uploads image it automatically compress and resize before saving.

use Intervention\Image\Facades\Image;

$file = $request->file('image');
$path = storage_path('app/public/uploads/resized.jpg');

$image = Image::make($file->getRealPath());

$image->resize(1200, null, function ($constraint) {
    $constraint->aspectRatio();
    $constraint->upsize();
});

$image->save($path, 70);

The script will take request’s file and resize it to max width to 1200px, and upsize image if required. At last it will compress it to 70 for smaller size.

Convert to WebP with compression

Same works for WebP image types too. Just like png files it will take file from upload and compress and save it as webP.

use Intervention\Image\Facades\Image;

$file = $request->file('image');
$path = storage_path('app/public/uploads/image.webp');

$image = Image::make($file->getRealPath());

$image->resize(1200, null, function ($constraint) {
    $constraint->aspectRatio();
    $constraint->upsize();
});

$image->encode('webp', 70)->save($path);

Creating Compressed Thumbnail

The image thumbnails suits for profile pictures, avatars, or product thumbnails where a square preview works well. Let’s take another example to create thumbnail image.

use Intervention\Image\Facades\Image;

$file = $request->file('image');
$path = storage_path('app/public/uploads/thumb.jpg');

$image = Image::make($file->getRealPath());

$image->fit(300, 300);

$image->save($path, 60);

It will take uploaded file and create new file with 300px * 300px with reduced size.

Example of Compress Uploaded Image Before Saving in Laravel

Now let’s build tiny feature that can be implemented to any Laravel application. In this example, we will take image input from user and then as a request it will validate, compress and stores file to server.

Let’s start with routes. Open routes/web.php and modify as below:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageUploadController;

Route::get('/image-upload', [ImageUploadController::class, 'create'])->name('image.upload');
Route::post('/image-upload', [ImageUploadController::class, 'store'])->name('image.upload.store');

Here, we have created two routes. First route will show user an image upload form while second route will handle upload logic.

Next, thing we need to handle logic is controller. Let’s create new controller which will handle image upload logic. Create new controller and modify as below:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Intervention\Image\Facades\Image;

class ImageUploadController extends Controller
{
    public function create()
    {
        return view('image-upload');
    }

    public function store(Request $request)
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,jpg,png,webp|max:5120',
        ]);

        $file = $request->file('image');

        $fileName = time() . '_' . preg_replace('/\s+/', '_', $file->getClientOriginalName());

        $image = Image::make($file->getRealPath());

        $image->orientate();

        $image->resize(1200, null, function ($constraint) {
            $constraint->aspectRatio();
            $constraint->upsize();
        });

        $directory = storage_path('app/public/uploads');

        if (!is_dir($directory)) {
            mkdir($directory, 0755, true);
        }

        $path = $directory . '/' . $fileName;

        $image->save($path, 70);

        $publicPath = 'storage/uploads/' . $fileName;

        return redirect()
            ->route('image.upload')
            ->with('success', 'Image uploaded and compressed successfully.')
            ->with('image', $publicPath);
    }
}

The controller first checks that the uploaded file is a valid image and smaller than 5MB. Then it opens the image with Intervention Image, corrects its orientation so photos from phones do not appear rotated, and shrinks the width to a maximum of 1200 pixels. After that, it saves the image at 70% quality to make the file size smaller, and finally sends you back to the upload page with a success message and the path to the compressed image.

The last thing to make this functionality working is view file. Create resources/views/image-upload.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>How to Compress Images Before Upload in Laravel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: #f3f4f6;">

<div style="max-width: 600px; margin: 40px auto; background-color: #ffffff; padding: 24px; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);">
    <h1 style="font-size: 24px; margin-bottom: 16px;">How to Compress Images Before Upload in Laravel</h1>

    @if(session('success'))
        <div style="margin-bottom: 16px; padding: 12px; background-color: #dcfce7; color: #166534; border-radius: 4px;">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div style="margin-bottom: 16px; padding: 12px; background-color: #fee2e2; color: #991b1b; border-radius: 4px;">
            <ul style="margin: 0; padding-left: 18px;">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('image.upload.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div style="margin-bottom: 16px;">
            <label for="image" style="display: block; margin-bottom: 8px; font-weight: 600;">Choose an image</label>
            <input id="image" type="file" name="image" required style="display: block; width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #d1d5db;">
        </div>

        <button type="submit" style="padding: 10px 18px; background-color: #2563eb; color: #ffffff; border-radius: 4px; border: none; cursor: pointer;">
            Upload and Compress
        </button>
    </form>

    @if(session('image'))
        <div style="margin-top: 24px;">
            <p style="margin-bottom: 8px; font-weight: 600;">Compressed image preview</p>
            <img src="{{ asset(session('image')) }}" alt="Compressed image" style="max-width: 100%; height: auto; border-radius: 4px; border: 1px solid #e5e7eb;">
        </div>
    @endif
</div>

</body>
</html>

It will show form to the user and show image preview once user submits.

Summary

You now see how easily it is to Compress Image within the Laravel application by using the Intervention Image package. By resizing and compressing the uploaded image, it will prevent your application from being too heavy or too expensive for your server.

Leverage image compression to enable faster-loading pages and better SEO results. Reduce image resolution and convert to lower-quality formats to achieve enormous compression ratios. Smaller blog sites or full-scale software businesses, start-ups, or enterprises, an effective image compression system in Laravel helps your application remain compact, speedy, and scalable.