DEV Community

Devops Makeit-run
Devops Makeit-run

Posted on • Originally published at make-it.run

Ultra-fast image uploads and on-the-fly display optimization in Laravel and PHP

Creating ultra-fast image uploads and on-the-fly display in Laravel/PHP starts with aggressive optimization.

Even a few megabytes of raw image data can kill page performance.

Users expect sites to load within seconds, and studies show nearly 40% will abandon a page if it takes longer than 3 seconds.

In practice that means an original 5 MB photo must be shrunk drastically (often down to a few dozen kilobytes) before web use.

The first step is resizing. If a website only needs, say, an 800px-wide version of a photo, you should never serve the full-size upload.

Libraries like Intervention Image (widely used in Laravel) wrap GD or Imagick and make resizing simple.

For example, you might do something like

Image::make($file)->resize(800, null)
Enter fullscreen mode Exit fullscreen mode


to cap the width. This discards excess pixels and can collapse a multi-megabyte image to a few tens or hundreds of kilobytes.

After resizing, you should also compress the image.

With PHP’s built-in GD functions, you can call:

imagejpeg($resource, $outputPath, $quality)
Enter fullscreen mode Exit fullscreen mode

to re-encode a JPEG at a lower quality setting (e.g. 75%). That alone can cut file size dramatically.

Laravel’s Intervention Image save(\$path, \$quality) method does the same under the hood.

For more automated compression, the Spatie image-optimizer package is a popular choice in Laravel.

It runs each image through well-known command-line optimizers without losing visual quality.

Under the hood, it uses tools like
jpegoptim (for JPGs)pngquant (for PNGs)svgo (for SVGs).

In Laravel you can invoke it simply with:

use ImageOptimizer;
ImageOptimizer::optimize($pathToImage);
Enter fullscreen mode Exit fullscreen mode

Just call optimize() on the saved file path and it will be overwritten with a smaller version.

These tools automatically detect what’s installed and adjust per format, running PNGs through pngquant followed by optipng, for instance.

Spatie’s Laravel-optimized package links into Intervention’s fluent API as well, so you can even write 

$image->optimize()->save(...)
Enter fullscreen mode Exit fullscreen mode

if you prefer to chain it.

Quality vs. Size tradeoff: Squeezing a 5 MB photo into ~50 KB almost always requires downsizing or quality loss.

At web resolutions, the quality loss can be negligible.

Spatie’s defaults (85% quality for JPEG, plus stripping EXIF) are tuned for performance while keeping images sharp.

If you must keep dimensions fixed, you can still lower quality settings for smaller files.

A combination approach works best: set a reasonable long side (e.g. max width 1920px or less), moderate quality (75–85%), and let optimizer tools finalize it.

Another key strategy is format conversion.

Modern formats like WebP or AVIF can be far more efficient than JPEG/PNG.

For photos, converting to WebP typically shaves 25–35% off the file size vs. JPEG at equivalent quality. AVIF goes even further – it can be roughly 50% smaller than JPEG at the same quality level.

In Laravel, you can automate conversions to WebP/AVIF during the upload process.

Intervention Image (with the Imagick driver) supports converting formats, e.g. using 

$image->encode('webp');
Enter fullscreen mode Exit fullscreen mode

Alternatively, you could integrate an external tool like cwebp or use Spatie’s pipeline.

Generate both the normal JPEG/PNG and a WebP copy, and then adjust your HTML to serve WebP where supported.

Laravel packages like the MediaLibrary can automatically create multiple formats and apply optimizers under the hood.

Converted images can be automatically run through the same CLI optimizers to save space without touching the original file.

Implementation in PHP/Laravel: In a Laravel controller or listener handling the upload, you’d typically do something like:

$uploaded = $request->file('photo');
$pathInfo = $uploaded->store('temp');
$finalPath = 'uploads/' . $uploaded->hashName();
Image::make(storage_path('app/' + $pathInfo))->resize(800, null, function($constraint){
    $constraint->aspectRatio();
    $constraint->upsize();
})->encode('jpg', 80)->save(storage_path('app/public/' + $finalPath));
ImageOptimizer::optimize(storage_path('app/public/' + $finalPath));
Enter fullscreen mode Exit fullscreen mode

This example uses Intervention Image for resizing, encoding, and then Spatie for compression.

A fully managed solution: With spatie/laravel-medialibrary you define conversions (thumbnail sizes, formats, etc.) in your model.

The package will queue jobs to generate those conversions and has a built-in hook to run optimizers on the converted images. By default, optimization is enabled.

Always strip metadata (EXIF, comments) from web images to reduce size.

The Spatie optimizer automatically --strip-all on JPEGs.

Make JPEGs progressive so they load faster.

On the front-end, use lazy-loading for images (loading="lazy" on img tags) to improve perceived load time.

Finally, serve from cache/CDN when possible.

After generating the optimized image, serve it as a static asset or through Laravel with a long cache header.

Tools like Cloudflare or AWS CloudFront can deliver the small file fast worldwide. Every byte saved speeds up the experience.

In summary: in Laravel/PHP—the usual pattern is to intercept the uploaded file, resize it, re-encode it, and run through an optimizer.

Intervention ImageSpatie’s optimizerWebPAVIF

Libraries like Intervention Image make resizing easy, Spatie’s optimizer automates compression, and format conversion (WebP/AVIF) can provide extra benefits. These methods are widely adopted for speed-optimized Laravel apps.

Top comments (0)