Images account for 50–70% of the average page weight—according to HTTP Archive. Unoptimized images are the leading cause of slow loading and poor Core Web Vitals. We tackle this issue across dozens of projects every year, consistently seeing a 30–50% improvement in LCP after implementing compression and lazy loading.
Typical case: an e‑commerce store with 10,000 products. Before optimization, average page weight was 3.5 MB, LCP 4.2 s. After converting to WebP, configuring srcset, and lazy loading off-screen images, weight dropped to 1.2 MB, LCP to 1.6 s. Conversion rate increased by 12%. How we achieved this is detailed below.
Why Optimize Images?
Google factors LCP and CLS into ranking. Every extra megabyte reduces conversion by 2–3%. Proper optimization is the fastest way to boost speed and pass Core Web Vitals. Our years of experience show that well‑configured images pay for themselves within a week or two. We guarantee improvement in LCP and CLS metrics after our work.
What WebP and AVIF Offer
WebP compresses JPEG losslessly by 20–30%, and lossily by 25–35%. AVIF is even more efficient: 40–60% compared to JPEG. AVIF also supports HDR and 10‑bit color depth. For product photography, AVIF provides significant savings. For illustrations with sharp color transitions, WebP is preferable (AVIF may produce artifacts on contrast edges).
| Format | Browser Support | Savings vs JPEG | Quality Loss (visually identical) |
|---|---|---|---|
| JPEG | 100% | — | — |
| WebP lossy | 96% | 25–35% | 15–20% (quality 85–90) |
| WebP lossless | 96% | 20–30% vs PNG | lossless |
| AVIF | 88% | 40–60% | 35–40% (quality 65–70) |
For compatibility, we use the <picture> element with fallback:
<picture> <source type="image/avif" srcset="/images/product-400.avif 400w, /images/product-800.avif 800w, /images/product-1200.avif 1200w" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px"> <source type="image/webp" srcset="/images/product-400.webp 400w, /images/product-800.webp 800w, /images/product-1200.webp 1200w" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px"> <img src="/images/product-800.jpg" width="800" height="800" alt="Product name" loading="lazy" decoding="async"> </picture> How to Properly Configure Lazy Loading
Native loading="lazy" is supported in all modern browsers. For details, see MDN on the loading attribute. It works perfectly for images below the fold. For the LCP element (usually the hero), always use loading="eager" and fetchpriority="high".
<img src="photo.webp" loading="lazy" alt="Image description"> <!-- LCP image — NEVER lazy --> <img src="hero.webp" loading="eager" fetchpriority="high" alt="..."> For background images, we use Intersection Observer with preloading. Important: do not apply lazy loading to visible images—it harms LCP. Also avoid loading="lazy" together with fetchpriority="high" (they conflict).
How We Configure Conversion
On a typical Laravel project, we use the spatie/laravel-medialibrary package. It generates conversions automatically on upload. We specify formats, sizes, and quality.
class Product extends Model { use InteractsWithMedia; public function registerMediaConversions(?Media $media = null): void { $this->addMediaConversion('thumb') ->width(400)->height(400) ->format('webp') ->quality(80) ->performOnCollections('images'); $this->addMediaConversion('medium') ->width(800)->height(800) ->format('webp') ->quality(82) ->performOnCollections('images'); $this->addMediaConversion('avif-medium') ->width(800)->height(800) ->format('avif') ->quality(65) ->performOnCollections('images'); } } If not using Laravel, we convert in advance via CLI or server‑side. Nginx can be configured to automatically serve WebP based on the Accept header:
map $http_accept $webp_suffix { default ""; "~*webp" ".webp"; } location ~* \.(jpg|jpeg|png)$ { add_header Vary Accept; try_files $uri$webp_suffix $uri =404; expires 30d; } Why AVIF Is Better Than WebP for Some Tasks
AVIF delivers 15–25% better compression at the same visual quality. It supports HDR and 10‑bit color depth, which is critical for product photos. However, WebP has wider support (96% vs 88%), so we use both with a fallback. For contrast‑heavy illustrations, WebP is preferable due to fewer artifacts.
Typical Image Optimization Mistakes
- Using only one format (e.g., only WebP) — old browsers won't show the image.
- Missing
width/heightattributes — causes CLS. - Lazy loading on LCP images — worsens LCP.
- Compression below quality 60 for WebP and below 50 for AVIF — visible artifacts.
- Incorrect
srcsetsizes (e.g., overly large images for mobile).
What the Work Includes
We offer turnkey image optimization:
- Audit: measure weight, dimensions, and formats of all images.
- Conversion setup: WebP/AVIF with specified quality.
- Responsive images: generate
srcsetfor different resolutions. - Lazy loading and LQIP (blur placeholder).
- Deployment and CDN integration.
- Documentation and training for your team.
Timeline: 2 to 5 days depending on catalog size. Pricing is individually calculated. Request a consultation — we'll send a work plan and precise estimate.
What Results You'll Get
- 50–70% reduction in page weight.
- 30–50% improvement in LCP.
- Passing Core Web Vitals.
- Higher conversion thanks to speed.
We guarantee metric improvements. Over 200 projects delivered. Contact us for a site audit and receive initial recommendations today.