{
    "slug": "image_optimisation",
    "term": "Image Optimisation",
    "category": "performance",
    "difficulty": "intermediate",
    "short": "Serving images in modern formats (WebP, AVIF), at the correct size, with appropriate compression — typically the single biggest performance win for image-heavy pages.",
    "long": "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).",
    "aliases": [
        "WebP",
        "AVIF",
        "image compression",
        "responsive images"
    ],
    "tags": [
        "performance",
        "frontend",
        "web-vitals"
    ],
    "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."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "lazy_loading_images",
        "responsive_images",
        "web_vitals",
        "cdn"
    ],
    "prerequisites": [
        "lazy_loading_images",
        "web_performance",
        "web_vitals"
    ],
    "refs": [
        "https://web.dev/articles/uses-optimized-images"
    ],
    "bad_code": "<!-- Unoptimised — 2.4MB JPEG displayed at 400px:\n<img src=\"hero.jpg\" style=\"width:400px\">  \n<!-- JPEG quality 95, 2400x1600px, no lazy loading, no srcset -->",
    "good_code": "<!-- Optimised with modern formats + responsive:\n<picture>\n  <source srcset=\"hero-400w.avif 400w, hero-800w.avif 800w\"\n          type=\"image/avif\">\n  <source srcset=\"hero-400w.webp 400w, hero-800w.webp 800w\"\n          type=\"image/webp\">\n  <img src=\"hero-800w.jpg\"\n       srcset=\"hero-400w.jpg 400w, hero-800w.jpg 800w\"\n       sizes=\"(max-width:600px) 400px, 800px\"\n       width=\"800\" height=\"400\"\n       loading=\"lazy\"\n       alt=\"Hero image\">\n</picture>\n<!-- Result: 120KB vs 2.4MB — 20x smaller -->",
    "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",
    "severity": "high",
    "effort": "medium",
    "created": "2026-03-16",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/image_optimisation",
        "html_url": "https://codeclaritylab.com/glossary/image_optimisation",
        "json_url": "https://codeclaritylab.com/glossary/image_optimisation.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Image Optimisation](https://codeclaritylab.com/glossary/image_optimisation) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/image_optimisation"
            }
        }
    }
}