The width and height attributes tell the browser an image's dimensions before it finishes downloading — letting it reserve the correct amount of space in the layout up front.
Syntax
<img src="photo.jpg" alt="..." width="800" height="600">Basic Example
<img src="/assets/images/hero.jpg" alt="CodingNow campus" width="1200" height="600">Browser output: the browser immediately reserves a 1200×600 box for this image in the page layout — even before a single byte of the actual file has arrived — so surrounding text and elements don't shift once it loads.
How It Works
- Without
width/height, the browser doesn't know an image's size until the file has downloaded enough to read its dimensions — everything below it visually "jumps" into place once it does. - With
width/heightset, the browser calculates the image's aspect ratio immediately and reserves exactly that much space, regardless of download speed. - CSS can still resize the image visually (e.g.
width: 100%in a responsive layout) — the HTML attributes are used to compute the correct aspect ratio, not to lock the final display size.
Important Attributes
| Attribute | Purpose |
|---|---|
width | The image's intrinsic width, in pixels (a number, no unit) |
height | The image's intrinsic height, in pixels (a number, no unit) |
Real-World Example
<style>
img { max-width: 100%; height: auto; }
</style>
<img src="/assets/images/banner.jpg" alt="..." width="1600" height="900">This is the modern recommended pattern: set the real width/height attributes in HTML for the correct aspect ratio, then let CSS's max-width: 100%; height: auto; handle actual responsive scaling — the browser combines both correctly.
Common Mistakes
- Leaving out
width/heightentirely, causing visible layout shift as images load — a real, measurable problem tracked by Google's Core Web Vitals as "Cumulative Layout Shift" (CLS) - Setting
width/heightto a different aspect ratio than the actual image file, causing visible stretching or squashing
Best Practices
- Always include
widthandheightmatching the image's real aspect ratio, even in a fully responsive layout - Let CSS handle the final display size — HTML's job here is just establishing the correct ratio
Accessibility Considerations
Layout shift caused by missing dimensions is especially disruptive for users with motor impairments or cognitive differences, who may click a button just as the page jumps and end up clicking something else entirely.
SEO Considerations
Cumulative Layout Shift is one of Google's three Core Web Vitals — a documented ranking signal — and missing image dimensions is one of the most common causes of a poor CLS score.
Browser & Modern HTML Notes
Modern browsers use the width/height attributes specifically to compute an image's aspect ratio ahead of load, even when CSS later overrides the rendered size — this browser behavior is a relatively recent (post-2020), genuinely useful convergence of HTML and CSS working together.
Mini Practice
- Add correct
width/heightattributes to an image, matching its real aspect ratio. - Combine them with a CSS rule making the image fully responsive (
max-width: 100%; height: auto;).
