What Are Unsized Images? Complete Guide (2026)

Why Unsized Images Hurt Your Site

Unsized media damages user experience and rankings in five concrete ways:

• Bad CLS scores:CLS is one of Google's three Core Web Vitals (alongside LCP and INP). Unsized images are the most frequent reason pages fail the 0.1 threshold.
• Misclicks on mobile: a button that gets shoved down half a second after a visitor reaches for it sends them to the wrong destination — including unintended purchases and form submissions.
• Lost reading flow: when a paragraph someone is reading suddenly jumps because a late-loading image arrived above it, many readers do not scroll back.
• Search ranking pressure: CLS feeds the Page Experience signal. Pages that fail Core Web Vitals lose ranking ground in competitive queries where quality is otherwise equal.
• Reduced AI search visibility: generative answer engines and Google AI Overviews preferentially surface pages that already rank well — and unsized-image CLS pulls those rankings down.

How a Missing width/height Triggers Layout Shift

When the browser parses an <img>tag without explicit dimensions, it reserves a content box of effectively zero height. Surrounding elements collapse upward to fill that empty space. Then, when the image file finally downloads and decodes, the browser inserts the real dimensions — pushing every element below the image down by the image's full height.

With width and height attributes (or aspect-ratio CSS), the browser computes an intrinsic aspect ratio at parse time and reserves a correctly-sized box before any pixel downloads. The image fades into a space that already exists.

<!-- Bad: no dimensions, browser reserves 0 height -->
<img src="/hero.jpg" alt="Hero">

<!-- Good: dimensions declared, browser reserves a 16:9 box -->
<img src="/hero.jpg" alt="Hero" width="1600" height="900">

<!-- Even when CSS resizes it, the aspect ratio is preserved -->
<style>
  img { width: 100%; height: auto; }
</style>

How to Detect Unsized Images on Your Site

Audit tooling flags any image-shaped element that lacks explicit dimensions. The most reliable ways to surface them:

• Greadme deep scan — flags every unsized image on a page, names the offending element, and pairs each finding with a one-click GitHub PR that adds the attributes for you.
• Greadme crawler scan — runs the same check across every indexable page on your site, so you can see which templates (product pages, article pages, listing pages) systematically ship unsized media.
• Greadme AI visibility analyzer — connects unsized-image findings to AI-search outcomes by scoring how well each page is positioned to be cited by generative engines.
• web.dev Measure— runs a lab audit and lists offending elements under "Image elements do not have explicit width and height."
• Google Search Console → Core Web Vitals report — surfaces pages that fail CLS in real-user data; unsized images are the most common root cause.
• Chrome DevTools → Performance panel— record a load and use the "Experience" lane to highlight every layout shift event with its causing element.

8 Proven Ways to Fix Unsized Images

<img src="/post-cover.jpg" alt="" width="1200" height="630">

img.cover {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

<video src="/promo.mp4" width="1280" height="720" controls></video>

/* Good — preserves the declared aspect ratio */
img { width: 100%; height: auto; }

/* Bad — forces a fixed height that may not match the file */
img { width: 100%; height: 200px; }

Common Unsized-Image Problems and Fixes

How Different Sizing Strategies Compare

Several techniques reserve space for media. The right one depends on whether the image needs to be fluid, fixed, or art-directed.

FAQ

What does "image elements do not have explicit width and height" mean?

It means at least one <img> or <video> tag on the page is missing both the width and height attributes (and has no equivalent aspect-ratio CSS). Audits flag this because the browser cannot reserve space for the element before it loads, which causes layout shift.

Do I still need width and height if I use CSS to resize the image?

Yes. Modern browsers use the attributes only for the aspect-ratio calculation when CSS overrides the rendered size. Add the intrinsic pixel dimensions to the HTML and use width: 100%; height: auto in CSS — the image will scale fluidly and the space will still be reserved.

Will adding width and height attributes break my responsive layout?

No. Provided your CSS includes height: auto (or equivalent), the rendered size is determined by CSS while the attributes are used purely to reserve space. Browser support has been universal since 2019.

What about background-image in CSS?

CSS background images don't affect layout, but the element they live on still needs reserved space. Set an explicit height, padding-bottom ratio, or aspect-ratioon the container so it doesn't collapse before the background loads.

Is <picture> with srcset enough on its own?

No. <picture> and srcset select which file to load — they don't reserve space. Keep width and height on the inner <img> tag. The browser uses them for the ratio regardless of which source wins.

How do unsized images affect AI search engines like ChatGPT and Perplexity?

Indirectly but meaningfully. AI answer engines and Google AI Overviews tend to cite pages that already rank well in traditional search. Unsized images push CLS above Google's 0.1 threshold, which weakens Page Experience and reduces the odds of the page being chosen as a citation.

Are there any cases where I should not set width and height?

Rarely. The only legitimate exception is when an image's intrinsic dimensions genuinely cannot be known ahead of time (e.g., user-uploaded content rendered with no preprocessing). Even then, the right answer is to add a server-side step that detects the dimensions before the HTML ships — not to leave the image unsized.