DEV Community

Devops Makeit-run
Devops Makeit-run

Posted on • Originally published at make-it.run

Image optimization and compression techniques for ultra-fast Laravel/PHP image uploads and display

#php #laravel #webdev #performance

Introduction & Importance of Optimization:

Creating ultra-fast image uploads and on-the-fly display in Laravel/PHP requires aggressive optimization. Even a few megabytes of raw image data can ruin page performance, as users expect sites to load quickly—almost 40% abandon a page if it takes over 3 seconds.

Learn more

  1. Resizing Images:

The first step is resizing: only generate and serve the dimensions actually needed (e.g., 800px wide for display). Libraries like Intervention Image (with GD or Imagick) make resizing trivial in Laravel:

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

This eliminates excess pixels, collapsing multi-megabyte images to tens or hundreds of kilobytes. (Learn more)

  1. Compressing Images:

After resizing, compress images. With PHP’s GD, call imagejpeg(\$resource, \$outputPath, \$quality) (e.g. 75%). Intervention’s save(\$path, \$quality) does the same. This can dramatically cut file size while retaining acceptable quality. (Learn more)

Automated Compression using Spatie image-optimizer:

Spatie’s image-optimizer package automatically compresses images further using CLI tools like jpegoptim, pngquant, and svgo. Hook into Laravel with 

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

which auto-selects the right optimizer for each format and overwrites the image with its smaller version. Supports chaining with Intervention. (Learn more)

Balancing Quality vs Size

Downsizing from 5MB to ~50KB usually requires some quality loss. However, web resolutions mean loss is often negligible.

Spatie’s defaults target Google PageSpeed (85% JPEG). Lowering quality by 5-10% can yield significant byte reduction.

Best practice: resize to a reasonable max width, set moderate quality (75–85%), let optimizers polish the result.

Format Conversion (WebP/AVIF):

Modern formats like WebP (25–35% smaller than JPEG) and AVIF (up to 50% smaller) provide further gains. In Laravel, use Intervention (with Imagick) or command-line tools to create and serve WebP/AVIF versions. Adjust HTML to offer these formats using picture/source and automate multi-format creation with packages like Spatie MediaLibrary. (Learn more)

Practical Implementation Example:

upload → temp store → resize with Intervention (`resize(800, null)`), encode at 80% JPEG quality, save to disk, then run optimizer (`ImageOptimizer::optimize()`). This workflow: resizing + reencoding + CLI optimizer = ultra-small results.
Enter fullscreen mode Exit fullscreen mode

Learn more

Managed Solutions – MediaLibrary:

Spatie’s MediaLibrary can automate conversions, dimensions, formats, and optimization per model. By default, all converted images are optimized (unless ->nonOptimized() is called).

Handy for complex apps needing thumbnails and multi-format output.

Always strip metadata from images—it bloats size with no benefit. Make JPEGs progressive for faster perceived loads. Enable lazy-loading of images on the frontend using loading="lazy" or JS libraries. Serve images from cache or CDN (like Cloudflare/AWS), delivering only fully-optimized assets with long cache headers for maximum speed.

Summary:

The hallmark Laravel/PHP approach: intercept upload, resize for required dimensions, re-encode at web quality, then optimize via CLI. Tools like Intervention and Spatie image-optimizer make this easy. Modern formats like WebP/AVIF offer even more savings. Combining all steps, a 5MB upload becomes a 50–100KB file, giving the user a lightning-fast site. (Learn more)

Top comments (0)