{
    "slug": "image_optimization",
    "term": "Image Optimisation",
    "category": "performance",
    "difficulty": "intermediate",
    "short": "Reducing image file size and delivery overhead through format choice (AVIF, WebP), compression, responsive sizing (srcset), lazy loading, and explicit dimensions — the single highest-impact performance lever for most websites.",
    "long": "Images typically account for 50-75% of a page's total bytes. Optimisation has several dimensions: format (AVIF is 50% smaller than JPEG at equivalent quality; WebP is 30% smaller; use <picture> for progressive enhancement); compression (lossy vs lossless — most photography tolerates 75-85% quality without visible degradation); responsive sizing (srcset + sizes delivers the appropriately-sized image for each viewport — serving a 2000px image to a 400px mobile screen wastes 80% of the download); lazy loading (defer off-screen images with loading='lazy'); dimensions (explicit width and height prevent layout shift as images load); priority (the LCP image needs fetchpriority='high' and should never be lazy-loaded). CDN image transformation (Cloudflare Images, Imgix, Cloudinary) handles format conversion, resizing, and compression automatically at edge — eliminating most manual optimisation work.",
    "aliases": [
        "image compression",
        "image performance",
        "AVIF WebP",
        "responsive images",
        "srcset sizes",
        "image loading",
        "next-gen image formats"
    ],
    "tags": [
        "performance",
        "frontend",
        "web-vitals",
        "html"
    ],
    "misconception": "All images should be lazy-loaded for maximum performance — lazy-loading the LCP image (the largest above-fold image) is one of the most common causes of LCP regression; the hero image must load immediately with fetchpriority='high'.",
    "why_it_matters": "A product listing page with 30 unoptimised JPEG images at 500KB each adds 15MB to the initial page load — converting to WebP/AVIF, using srcset, and lazy loading reduces this to under 1MB, transforming LCP from 8 seconds to under 2 seconds on mobile.",
    "common_mistakes": [
        "Loading the same large image at all viewport sizes — serve appropriately-sized images with srcset/sizes; a mobile user shouldn't download a 2000px image.",
        "Lazy-loading the LCP (hero) image — delays the most important content and directly harms LCP score.",
        "No explicit width and height attributes — browser can't reserve space, images shift content as they load (CLS).",
        "Serving JPEG/PNG when AVIF/WebP is available — modern formats offer 30-50% size reduction at equivalent quality.",
        "Not setting decoding='async' on large non-LCP images — synchronous decode blocks the main thread."
    ],
    "when_to_use": [
        "Apply image optimisation to every image-heavy page — typically the highest ROI performance improvement available.",
        "Use CDN image transformation (Cloudflare Images, Imgix) to automate format conversion and responsive resizing.",
        "Use <picture> with AVIF and WebP sources with JPEG/PNG fallback for progressive enhancement across browsers."
    ],
    "avoid_when": [
        "Do not lazy-load the LCP (hero) image — it must load as fast as possible.",
        "Do not apply heavy lossy compression to images where quality is critical (medical imaging, product photography with fine detail)."
    ],
    "related": [
        "lazy_loading_images",
        "core_web_vitals",
        "largest_contentful_paint",
        "cumulative_layout_shift",
        "resource_hints"
    ],
    "prerequisites": [],
    "refs": [
        "https://web.dev/articles/uses-optimized-images",
        "https://web.dev/articles/serve-images-webp",
        "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
    ],
    "bad_code": "<!-- Same large image served to all devices -->\n<img src=\"product-2000px.jpg\" alt=\"Product\">\n\n<!-- LCP image lazy-loaded -->\n<img src=\"hero.jpg\" alt=\"Hero\" loading=\"lazy\">\n\n<!-- No dimensions — causes CLS -->\n<img src=\"card.jpg\" alt=\"Card\">",
    "good_code": "<!-- LCP hero: eager, high priority, explicit dimensions -->\n<img src=\"hero.jpg\" alt=\"Hero\" fetchpriority=\"high\"\n     width=\"1200\" height=\"600\">\n\n<!-- Responsive image with next-gen format fallback -->\n<picture>\n  <source srcset=\"product.avif\" type=\"image/avif\">\n  <source srcset=\"product.webp\" type=\"image/webp\">\n  <img src=\"product.jpg\" alt=\"Blue ceramic mug\"\n       srcset=\"product-400.jpg 400w, product-800.jpg 800w\"\n       sizes=\"(max-width: 600px) 400px, 800px\"\n       loading=\"lazy\" decoding=\"async\"\n       width=\"800\" height=\"800\">\n</picture>",
    "quick_fix": "Add width and height to every img; use loading='lazy' on below-fold images; add fetchpriority='high' to hero/LCP image; convert to WebP or AVIF; use srcset for responsive sizing",
    "severity": "high",
    "effort": "medium",
    "created": "2026-04-06",
    "updated": "2026-04-06",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/image_optimization",
        "html_url": "https://codeclaritylab.com/glossary/image_optimization",
        "json_url": "https://codeclaritylab.com/glossary/image_optimization.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_optimization) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/image_optimization"
            }
        }
    }
}