Home > Web Vitals > Performance > Unsized Images

Unsized Images: Preventing Layout Shifts with Explicit Dimensions

Last updated August 23, 2025

Introduction to Unsized Images

When Lighthouse reports “Image elements do not have explicit width and height”, it means yourimages don’t provide the browser with enough information to reserve layout space before the pixels arrive. Without a declaredsize or predictable aspect ratio, the image will expand the layout during load and cause cumulative layout shift (CLS).For image-heavy pages and on mobile networks, these shifts are a frequent UX complaint and a common reason for failing Core Web Vitals.

What It Measures

The audit checks whether each <img> (and some media placeholders) exposes early sizing information: either explicitwidth and height attributes or a predictable CSS box (e.g., aspect-ratio).When neither is present, the browser must guess, content jumps when the image decodes, and the audit flags it as “Unsized.”

Why It Matters (UX / SEO Impact)

Layout jumps harm readability, accessibility (e.g., focus target movement), and perceived performance. Because CLS is a Core Web Vital,unstable pages can also reduce search visibility. Stabilizing images is one of the fastest, lowest-effort CLS wins you can ship.

Relation to Other Web Vitals

“Unsized images” primarily impacts CLS. Secondarily, preventing reflow helps the page settle earlier, improving perceivedLCP for hero content that would otherwise be pushed around.

Common Causes of Poor “Unsized Images”

Typical patterns that trigger this audit include:

  • Images — such as standard <img /> elements or CSS background images (via url())
  • Poster images on <video> elements
  • Large block-level text elements — like headings above the fold(<h1>, <h2>, <h3>)

Also common: only setting width:100% in CSS, omitting HTML attributes; using srcset withoutsizes; background images on containers with no intrinsic height; dynamic CMS content that strips attributes.

How the Audit Is Measured

Browsers compute an intrinsic aspect ratio at parse time if width and height exist on the element.If missing, CSS can still reserve space with aspect-ratio, fixed heights, or ratio-based wrappers. Lighthouse inspects DOM images and flagselements lacking these early signals.

What Is a Good Score?

The audit is effectively pass/fail. “Good” means all meaningful images—especially above the fold—reserve space via HTML attributesor CSS aspect ratio. For CLS itself, aim for the 75th percentile thresholds:

Score Scale
0.10
0.25

Good: ≤ 0.10   |   Needs improvement: > 0.10–0.25   |   Poor: > 0.25

How to Improve “Unsized Images” (All Scenarios)

5.1. HTML: Add width and height

Declare intrinsic dimensions even if CSS will scale responsively.

    

  1. <!-- Image file is 1200×800 px -->
    2. 

  2. <img src="https://cdn.testdom.io/images/hero.jpg" alt="Hero" width="1200" height="800" />
    3. 

  3. <style>
    4. 

  4.   img { max-width: 100%; height: auto; display: block; }
    5. 

  5. </style>
    6.

5.2. CSS: Use aspect-ratio When Markup Can’t Change

If your CMS strips attributes, reserve space with CSS and fit the image inside.

    

  1. <div class="img-wrap">
    2. 

  2.   <img src="https://cdn.testdom.io/images/card.jpg" alt="Card" />
    3. 

  3. </div>
    4. 

  4. <style>
    5. 

  5.   .img-wrap { width: 100%; aspect-ratio: 4 / 3; }
    6. 

  6.   .img-wrap > img { width: 100%; height: 100%; object-fit: cover; }
    7. 

  7. </style>
    8.

5.3. Responsive Images: srcset + sizes (Mobile & Desktop)

Provide multiple resolutions and tell the browser when to use each; still include sizing information to avoid shifts.

    

  1. <img
    2. 

  2.   src="https://cdn.testdom.io/images/article-800.jpg"
    3. 

  3.   srcset="/images/article-400.jpg 400w,
    4. 

  4.           /images/article-800.jpg 800w,
    5. 

  5.           /images/article-1200.jpg 1200w"
    6. 

  6.   sizes="(max-width: 600px) 100vw, 600px"
    7. 

  7.   width="1200" height="800" alt="Article image" />
    8.

5.4. Art Direction with <picture>

Serve different crops/ratios per breakpoint but keep the box stable.

    

  1. <picture>
    2. 

  2.   <source media="(min-width: 900px)" srcset="/images/hero-wide-1600.jpg" />
    3. 

  3.   <source media="(max-width: 899px)" srcset="/images/hero-tall-900.jpg" />
    4. 

  4.   <img src="https://cdn.testdom.io/images/hero-tall-900.jpg" width="1600" height="900" alt="Hero" />
    5. 

  5. </picture>
    6.

5.5. Background Images: Reserve Space on the Container

Backgrounds have no intrinsic size; set a fixed height or, better, a ratio.

    

  1. <div class="hero-bg"></div>
    2. 

  2. <style>
    3. 

  3.   .hero-bg {
    4. 

  4.     width: 100%;
    5. 

  5.     aspect-ratio: 16 / 9; /* reserves space */
    6. 

  6.     background: url('https://cdn.testdom.io/images/hero.jpg') center/cover no-repeat;
    7. 

  7.   }
    8. 

  8. </style>
    9.

5.6. Unknown Final Size? Use Known Ratio

When you don’t know the final dimensions but you do know the target ratio, let CSS hold the box.

    

  1. <figure class="media">
    2. 

  2.   <img src="https://cdn.testdom.io/images/unknown.jpg" alt="Media" />
    3. 

  3. </figure>
    4. 

  4. <style>
    5. 

  5.   .media { aspect-ratio: 3 / 2; }
    6. 

  6.   .media > img { width: 100%; height: 100%; object-fit: cover; }
    7. 

  7. </style>
    8.

5.7. SVGs: ViewBox + Dimensions (or CSS Ratio)

SVGs still benefit from sizing for early space reservation.

    

  1. <img src="https://cdn.testdom.io/icons/logo.svg" width="200" height="60" alt="Logo" />
    2. 

  2. <!-- Or -->
    3. 

  3. <img class="logo" src="https://cdn.testdom.io/icons/logo.svg" alt="Logo" />
    4. 

  4. <style>.logo { width: 200px; aspect-ratio: 200 / 60; }</style>
    5.

5.8. Lazy-Loading Without Shifts

Lazy-load only after declaring dimensions/ratio.

    

  1. <img src="https://cdn.testdom.io/images/gallery-1.jpg" alt="Gallery item" width="800" height="600" loading="lazy" />
    2.

5.9. Mobile vs Desktop Patterns

Ensure precise boxes for above-the-fold assets on small screens; use grid cards with fixed ratios on desktop.

    

  1. <!-- Mobile hero, full-bleed -->
    2. 

  2. <img class="hero" src="https://cdn.testdom.io/images/m-hero.jpg" alt="Hero" width="1080" height="1350" />
    3. 

  3. <style>.hero{width:100%;height:auto;display:block;}</style>
    4. 

  4. <!-- Desktop grid with fixed ratios -->
    5. 

  5. <div class="grid">
    6. 

  6.   <figure class="card"><img src="https://cdn.testdom.io/images/a.jpg" alt="" width="600" height="400" /></figure>
    7. 

  7.   <figure class="card"><img src="https://cdn.testdom.io/images/b.jpg" alt="" width="600" height="400" /></figure>
    8. 

  8. </div>
    9. 

  9. <style>.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.card{aspect-ratio:3/2}.card>img{width:100%;height:100%;object-fit:cover}</style>
    10.

5.10. CMS Pipelines

If your CMS only provides a URL, store original width/height in media metadata and inject attributes at render time.As a fallback, add utility classes that encode a ratio (e.g., .ratio-4-3) and apply aspect-ratio in CSS. 

    

  1. <img class="ratio-4-3" src="https://cdn.testdom.io/images/cat.jpg" alt="Cat" />
    2. 

  2. <style>img.ratio-4-3{aspect-ratio:4/3;width:100%;height:auto}</style>
    3.

5.11. Video Posters & Thumbnails

Give videos a predictable box, too.

    

  1. <video controls poster="/video/poster.jpg" width="1280" height="720">
    2. 

  2.   <source src="/video/movie.mp4" type="video/mp4" />
    3. 

  3. </video>
    4.

Monitoring and Continuous Testing

Use automation to prevent regressions as templates evolve. Testdom.io can schedule Lighthouse runs, alert when the “Unsized images” auditreappears, and correlate changes with deployments. Track CLS by page type and ensure hero areas remain stable across breakpoints.

Sample code to monitor CLS at runtime

    

  1. let cls = 0;
    2. 

  2. new PerformanceObserver((list) => {
    3. 

  3.   for (const entry of list.getEntries()) {
    4. 

  4.     if (!entry.hadRecentInput) {
    5. 

  5.       cls += entry.value;
    6. 

  6.       console.log('Layout shift value:', entry.value, 'CLS:', cls.toFixed(3));
    7. 

  7.     }
    8. 

  8.   }
    9. 

  9. }).observe({ type: 'layout-shift', buffered: true });
    10.

Quick Checklist

    

  1. ✔ Add width/height to every <img> (or provide CSS aspect-ratio).
    2. 

  2. ✔ Pair <img srcset> with a correct <code>sizes</code> attribute.
    3. 

  3. ✔ Give background-image containers a fixed height or aspect-ratio.
    4. 

  4. ✔ Size SVGs via width/height or a CSS ratio (plus viewBox in file).
    5. 

  5. ✔ Keep lazy-loaded images sized to avoid CLS.
    6. 

  6. ✔ Audit mobile and desktop separately; fix above-the-fold first.
    7. 

  7. ✔ Monitor with Lighthouse; alert on regressions via Testdom.io.
    8.

Conclusion

Eliminating “Unsized images” is straightforward: declare intrinsic dimensions in HTML or enforce a predictable box via CSSaspect-ratio. Combine with responsive images and careful art direction to keep layouts stable on any screen.With continuous monitoring through Testdom.io, you’ll maintain low CLS, protect UX, and keep Lighthouse green.