Automatic Image Optimization (WebP/AVIF)

Imagine: a client uploads a photo to the site weighing 5 MB. Without automatic conversion, this kills LCP, increases user churn, and burns the hosting budget. This is especially critical for online stores and media sites where images are the main content. We solve this by server-side conversion of uploaded images to WebP and AVIF, preserving the original and using background processing. Our team has over 5 years of experience in web development and has implemented such solutions for 50+ projects. We guarantee a 60–80% reduction in image weight without quality loss. According to Google research, image optimization can reduce LCP by 20–30%.

Our Solution

We address three core problems:

• Non-optimized uploads: a user may upload a 10 MB PNG. Without conversion, this becomes a bottleneck for Core Web Vitals.
• Format support: not all browsers equally support modern formats. We generate WebP and AVIF, and on the frontend use <picture> to serve the most suitable one.
• Conversion performance: AVIF encodes slowly (up to 5 seconds per photo). If done synchronously, the user will leave. The solution is a background queue via Job.

Stack and Architecture

We use Laravel 11 with intervention/image and Imagick for WebP; for AVIF — libavif via the console utility avifenc. If Imagick supports AVIF (version 7.0.25+), we use it. Choice depends on the server. Here’s a condensed version of the optimization service:

namespace App\Services; class ImageOptimizationService { public function optimize(UploadedFile $file, string $storagePath): array { $img = Image::make($file); // resize, remove EXIF // WebP: encode('webp', 82) // AVIF: via avifenc or Imagick // return array of paths } } 

Full code for the service, Job, and Nginx config is provided as part of the service. We also set up queue monitoring via Laravel Horizon.

Why Choose Background Processing?

Synchronous AVIF conversion would block the HTTP response for seconds. Instead, we use Laravel Queue: the image is saved as-is, then a Job in the queue (php artisan queue:work) runs conversion with three retries and a 120-second timeout. If the server crashes, the Job retries — 99.9% reliability. We leverage Supervisor for process persistence, ensuring zero-downtime conversion.

How to Implement Optimization: Step-by-Step

1. Install necessary packages: intervention/image, ext-imagick, and libavif.
2. Create ImageOptimizationService with methods for WebP and AVIF.
3. Set up a background Job with three retries and a 120-second timeout.
4. Add a Blade component <picture> for format delivery.
5. Test on staging and enable monitoring.

Implementation Details

Process & Timeline

What’s Included

• Optimization service with quality settings (WebP 82, AVIF 55).
• Background Job with three retries and 120-second timeout.
• Blade component <picture> for format delivery.
• Nginx config for automatic WebP serving (optional).
• Documentation and server access setup.
• 1-hour team training.
• 30 days of support.

Estimated Timeline & Cost

Installation and configuration of the stack, optimization service — 5–7 hours. Background Job, model integration, Blade component — 4–5 hours. Nginx variant — 1–2 hours separately. Typical implementation cost ranges from $500 to $2000 depending on the number of image sources and customizations. We’ll provide a precise estimate within one day.

Why WebP and AVIF?

WebP gives 25–35% better compression than JPEG, and AVIF is another 20–30% more efficient than WebP. Both formats are supported by all modern browsers (AVIF coverage ~93%, WebP ~96%). Encoding speed differs: AVIF is 5–10 times slower, but this is compensated by background processing. Our solution improves LCP by 20-30% compared to unoptimized images.

Quality and Pitfalls

All images undergo automatic testing: we check size, metadata, absence of artifacts. Server-side queue monitoring is configured, Jobs are logged. On error — automatic retry.

Typical Implementation Mistakes (and How to Avoid Them)

• ImageMagick not updated. Versions below 7 do not support AVIF. Check via convert --version.
• Too high AVIF quality. AVIF scale differs: quality 55 ≈ JPEG 85. Do not set above 70.
• Synchronous processing. AVIF encodes slowly — always use a queue.

location ~* \.(jpe?g|png)$ { add_header Vary Accept; try_files $uri.webp $uri =404; }