{
    "slug": "lazy_loading_images",
    "term": "Lazy Loading Images",
    "category": "frontend",
    "difficulty": "beginner",
    "short": "Deferring off-screen image downloads with loading=\"lazy\" — improves initial page load and LCP by only fetching images as they approach the viewport.",
    "long": "Native lazy loading (loading=\"lazy\" on img and iframe) defers fetching until the resource is near the viewport — supported in all modern browsers since 2020. Combined with Intersection Observer for custom thresholds, lazy loading can reduce initial page weight by 50-80% on image-heavy pages. Key attributes: loading=\"lazy\" (native), decoding=\"async\" (non-blocking decode), fetchpriority=\"high\" for LCP images, and width/height to prevent layout shift. Never lazy-load above-the-fold images — they should load immediately.",
    "aliases": [
        "loading=lazy",
        "image lazy load",
        "deferred images"
    ],
    "tags": [
        "frontend",
        "performance",
        "web-vitals"
    ],
    "misconception": "All images should be lazy-loaded for performance — lazy-loading above-the-fold images delays LCP and harms Core Web Vitals; only lazy-load images below the fold.",
    "why_it_matters": "A product listing page with 50 images loads all 50 on initial render without lazy loading — with loading=lazy, only the 5 visible images download, reducing initial payload by 90%.",
    "common_mistakes": [
        "loading=lazy on hero images — the LCP image must load immediately; never lazy-load it.",
        "No width and height attributes — browser cannot reserve space, causing layout shift (CLS).",
        "Lazy loading images in CSS background — loading=lazy only works on img elements.",
        "Using a JavaScript lazy loader when loading=lazy has full browser support."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "intersection_observer",
        "web_vitals",
        "responsive_images",
        "render_blocking_resources"
    ],
    "prerequisites": [
        "web_performance",
        "web_vitals",
        "intersection_observer"
    ],
    "refs": [
        "https://web.dev/articles/browser-level-image-lazy-loading"
    ],
    "bad_code": "<!-- All images load immediately — wastes bandwidth:\n<img src=\"hero.jpg\" loading=\"lazy\">  <!-- Never lazy-load LCP! -->\n\n<!-- Page with 50 product images — all fetch on load:\n<img src=\"product-1.jpg\" alt=\"Product 1\">\n<img src=\"product-2.jpg\" alt=\"Product 2\">\n<!-- ... 48 more -->",
    "good_code": "<!-- LCP image: eager + high priority:\n<img src=\"hero.jpg\" alt=\"Hero\" loading=\"eager\" fetchpriority=\"high\"\n     width=\"1200\" height=\"600\">\n\n<!-- Below-fold images: lazy + dimensions for CLS prevention:\n<img src=\"product-1.jpg\" alt=\"Product 1\" loading=\"lazy\"\n     decoding=\"async\" width=\"300\" height=\"300\">\n<img src=\"product-2.jpg\" alt=\"Product 2\" loading=\"lazy\"\n     decoding=\"async\" width=\"300\" height=\"300\">\n<!-- Browser fetches only images near viewport -->",
    "quick_fix": "Add loading='lazy' to all images below the fold — one attribute, zero JavaScript; for the hero/LCP image add fetchpriority='high' and preload it instead",
    "severity": "high",
    "effort": "low",
    "created": "2026-03-16",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/lazy_loading_images",
        "html_url": "https://codeclaritylab.com/glossary/lazy_loading_images",
        "json_url": "https://codeclaritylab.com/glossary/lazy_loading_images.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": "[Lazy Loading Images](https://codeclaritylab.com/glossary/lazy_loading_images) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/lazy_loading_images"
            }
        }
    }
}