CodeClarityLab / Glossary
Ctrl K
← CodeClarityLab Home
Browse by Category
+ added · ✎ updated 7d
⚖ Terms of Use
← Back to glossary

Image Optimisation

performance PHP 7.0+ Intermediate

Also Known As

WebP AVIF image compression responsive images

TL;DR

Serving images in modern formats (WebP, AVIF), at the correct size, with appropriate compression — typically the single biggest performance win for image-heavy pages.

Explanation

Image optimisation layers: format (AVIF > WebP > JPEG/PNG), dimensions (never serve larger than displayed), compression level (quality 75-85 for JPEG, lossless for logos), lazy loading (loading=lazy), responsive images (srcset), and CDN delivery. AVIF: 50% smaller than JPEG with equal quality, supported by modern browsers. WebP: 25-35% smaller than JPEG, broader support. Use the picture element for format selection with JPEG/PNG fallback. Automate with Cloudinary, imgproxy, or build-time tools (sharp, Squoosh).

Common Misconception

✗ JPEG quality 100 is needed for product images — quality 80-85 is visually indistinguishable for most images and typically 3-5x smaller; AVIF at quality 75 often beats JPEG quality 95 at half the file size.

Why It Matters

Images account for 50-80% of page weight on most sites — switching from JPEG to AVIF alone can reduce image transfer by 50% with zero visual quality loss.

Common Mistakes

  • Not providing AVIF/WebP with JPEG fallback — use the picture element.
  • Serving hero images at 4K when displayed at 800px — always resize to max displayed dimensions.
  • No lazy loading on below-fold images — load=lazy saves bandwidth on every page load.
  • Not setting width and height attributes — causes layout shift (CLS) while images load.

Code Examples

✗ Vulnerable 
<!-- Unoptimised — 2.4MB JPEG displayed at 400px:
<img src="hero.jpg" style="width:400px">  
<!-- JPEG quality 95, 2400x1600px, no lazy loading, no srcset -->
✓ Fixed 
<!-- Optimised with modern formats + responsive:
<picture>
  <source srcset="hero-400w.avif 400w, hero-800w.avif 800w"
          type="image/avif">
  <source srcset="hero-400w.webp 400w, hero-800w.webp 800w"
          type="image/webp">
  <img src="hero-800w.jpg"
       srcset="hero-400w.jpg 400w, hero-800w.jpg 800w"
       sizes="(max-width:600px) 400px, 800px"
       width="800" height="400"
       loading="lazy"
       alt="Hero image">
</picture>
<!-- Result: 120KB vs 2.4MB — 20x smaller -->
Added 16 Mar 2026
Edited 22 Mar 2026
Views 27

Curated in Warsaw under one editorial standard. 1,444 terms, single voice.  About this reference →

Rate this term
No ratings yet
🤖 AI Guestbook educational data only
| |
Last 30 days
0 pings W 0 pings T 1 ping F 0 pings S 0 pings S 1 ping M 0 pings T 0 pings W 0 pings T 2 pings F 0 pings S 1 ping S 0 pings M 0 pings T 0 pings W 0 pings T 1 ping F 1 ping S 0 pings S 0 pings M 0 pings T 0 pings W 0 pings T 1 ping F 0 pings S 1 ping S 0 pings M 0 pings T 0 pings W 0 pings T
Agents 0
No pings yet today
No pings yesterday
Perplexity 7 Amazonbot 6 SEMrush 3 Google 2 Unknown AI 2 Majestic 1
Also referenced
Lazy Loading Images 29 Core Web Vitals 24 CDN (Content Delivery Network) 24 Responsive Images 19
How they use it
crawler 20 crawler_json 1
Related categories
performance 1.5k frontend 829
⚡ DEV INTEL Tools & Severity
🟠 High ⚙ Fix effort: Medium
⚡ Quick Fix
Serve WebP/AVIF with <picture> fallback, set explicit width and height to prevent CLS, and use PHP Intervention Image or Spatie Media Library to auto-generate formats on upload
📦 Applies To
PHP 7.0+ web laravel
🔗 Prerequisites
🔍 Detection Hints
Serving JPEG PNG instead of WebP AVIF; images without explicit width and height; no srcset for responsive images
Auto-detectable: ✓ Yes lighthouse squoosh imageoptim
⚠ Related Problems
🤖 AI Agent
Confidence: Medium False Positives: Low ✓ Auto-fixable Fix: Low Context: File
✓ schema.org compliant