Apps Artificial Intelligence CSS DevOps Go JavaScript Laravel Linux MongoDB MySQL PHP Python Rust Svelte Vue

Managing Image Uploads and Resizing with Laravel and Intervention Image

2 min read .
Managing Image Uploads and Resizing with Laravel and Intervention Image

Image handling is a common requirement in web applications. Uploading original files, creating thumbnails, converting formats, and cleaning up old files all need to be handled consistently. Laravel’s filesystem abstraction works well with image-processing libraries such as Intervention Image.

The code in this article uses the classic Intervention Image v2-style API (Image::make, fit, and encode). Intervention Image v3 uses a different API, so check the package version installed in your project before copying the example directly.

1. Install Intervention Image

Install the package with Composer:

composer require intervention/image

If you are using a Laravel-specific integration package or a newer major version, follow that version’s installation instructions as well.

2. Upload and Resize an Image

The following v2-style helper creates a WebP original and a resized version:

use Image;
use Illuminate\Support\Facades\Storage;

public function uploadImage($image, $resize, $quality)
{
    $filename = uniqid() . '.webp';
    $fileImage = Image::make($image)->encode('webp', (int)$quality);

    if ((int)$resize[0] && (int)$resize[1]) {
        $imageResize = Image::make($image)
            ->fit((int)$resize[0], (int)$resize[1])
            ->encode('webp', (int)$quality);
    } else {
        $imageResize = Image::make($image)->resize(
            (int)$resize[0] ?: null,
            (int)$resize[1] ?: null,
            function ($constraint) {
                $constraint->aspectRatio();
            }
        )->encode('webp', (int)$quality);
    }

    Storage::disk(env('DRIVER_FILE_SYSTEM'))
        ->put(env('PATH_IMAGE') . $filename, $fileImage);

    Storage::disk(env('DRIVER_FILE_SYSTEM'))
        ->put(env('PATH_THUMBNAIL') . $filename, $imageResize);

    return ['file_name' => $filename];
}

The main ideas are:

  • Unique file name: uniqid() reduces simple name collisions. For public uploads, a random UUID or random string is often preferable when filenames should be difficult to guess.
  • WebP conversion: the example stores processed images as WebP.
  • Resize behavior: when both width and height are supplied, fit() crops to the requested dimensions. When only one dimension is supplied, resize() preserves the aspect ratio.
  • Filesystem abstraction: Storage::disk() keeps file storage independent from the local filesystem and can also target configured remote disks.

For a production application, move disk names and directory paths into Laravel configuration rather than calling env() throughout application code.

3. Remove Stored Images

A corresponding delete helper can remove both versions:

public function removeImage($file)
{
    $disk = Storage::disk(config('filesystems.default'));

    $imagePath = 'images/' . $file;
    $thumbnailPath = 'thumbnails/' . $file;

    if ($disk->exists($imagePath)) {
        $disk->delete($imagePath);
    }

    if ($disk->exists($thumbnailPath)) {
        $disk->delete($thumbnailPath);
    }
}

Checking for existence first can be useful when you want explicit behavior, although many filesystem drivers also allow deletion requests for missing files without treating them as fatal.

4. Example Calls

With the original helper signature:

$this->uploadImage($request->image, [600, 360], 75);
$this->uploadImage($request->image, [350, null], 75);
$this->uploadImage($request->file('image'), [350, null], 75);

Before processing any upload, validate that it is actually an allowed image and enforce limits on file size and dimensions. Do not rely only on the original filename or extension supplied by the client.

Conclusion

Laravel’s storage API and Intervention Image can provide a clean image-processing workflow for uploads, thumbnails, and format conversion. Keep the image-library version in mind, validate uploads before decoding them, configure storage centrally, and make deletion part of the same lifecycle as the database record that references the image.

chevron-up