Image missing width height layout shift bugs happen when the browser cannot reserve image space before the file loads.
CSS Layout Shift Fix
Why Does an Image Without Width and Height Shift the Page?
An image without width and height can shift the page because the browser does not know the image’s final footprint during the first layout pass.
The image may look normal after it loads, but the damage happens earlier. The text, card grid, buttons, or sidebar are placed before the image size is known. Then the image arrives, takes height, and pushes everything below it.
This is the image missing width height layout shift problem. It is not mainly about image quality or cropping. It is about whether the layout has a stable box before the network finishes downloading the media file.
- width
- height
- layout shift
- CLS
Test before the image arrives
Throttle the network, reload the page, and look at the empty area where the image should appear. If there is no stable box before the image file downloads, the image can shift the page.
Related: Try this in the FrontFixer Live Inspector.
Open Live Inspector→What the bug looks like
Content jumps when an image appears, even though the final image looks fine.
Why it happens
The browser did not know the image ratio before the first layout.
What usually fixes it
Add image dimensions or reserve the same ratio with CSS.
Why missing image dimensions create layout shift
The browser lays out a page before every resource is downloaded. Text can be measured immediately. CSS can be applied. But an image without width and height does not tell the browser how much space it should reserve.
When the image file finally arrives, the browser learns its natural dimensions and updates the layout. That update can move paragraphs, buttons, cards, ads, related posts, and anything below the image. The result is a visual jump.
The fix is to separate image loading from image sizing. The file can load later, but the image box should exist earlier. That is why modern responsive image systems still include dimensions, ratio wrappers, or stable media shells.
The image tag has no width or height attributes
This is the classic image missing width height layout shift bug. The image eventually loads correctly, but the browser has no early ratio to reserve. The page starts compact, then expands when the image appears.
Broken code
No dimensions<img
src="hero.jpg"
alt="Feature preview">Broken visual result
Correct code
Dimensions included<img
src="hero.jpg"
width="1200"
height="675"
alt="Feature preview">Fixed visual result
The CSS wrapper reserves the wrong shape
Sometimes the image has dimensions, but the wrapper forces a different shape. That can still create layout movement because the reserved space and the real component design do not match.
Broken code
Wrong wrapper height.media {
height: 80px;
}
.media img {
width: 100%;
height: auto;
}Broken visual result
Correct code
Wrapper owns ratio.media {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.media img {
width: 100%;
height: 100%;
object-fit: cover;
}Fixed visual result
Card images load with different natural heights
A card grid can shift when thumbnails do not share a controlled media box. One card image arrives tall, another arrives short, and the entire row changes after the first render.
Broken code
Natural heights control cards.card img {
max-width: 100%;
height: auto;
}Broken visual result
Correct code
Card media shell.card-media {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.card-media img {
width: 100%;
height: 100%;
object-fit: cover;
}Fixed visual result
A carousel or gallery measures slides before images load
Sliders and galleries often calculate height before images finish loading. If the images have no dimensions, the carousel may start short and then jump, crop, or resize when the slides finally reveal their real height.
Broken code
Carousel waits for images.slide img {
width: 100%;
height: auto;
}Broken visual result
Correct code
Slides reserve media ratio.slide-media {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.slide-media img {
width: 100%;
height: 100%;
object-fit: cover;
}Fixed visual result
Three production-minded image dimension patterns
Premium image systems do not rely on the image file arriving in time. They define the visual box first, then let the image fill that box when it is ready.
Premium code example 1
Article hero dimensions<figure class="hero-media">
<img
src="hero.jpg"
width="1200"
height="675"
alt="Article preview">
</figure>
.hero-media img {
width: 100%;
height: auto;
display: block;
}Premium visual result 1
The headline, media, and paragraph spacing stay stable while the image loads.
Premium code example 2
Product card media shell.product-media {
aspect-ratio: 4 / 5;
overflow: hidden;
}
.product-media img {
width: 100%;
height: 100%;
object-fit: cover;
}Premium visual result 2
All product cards share a predictable media shell before images load.
Premium code example 3
Feed thumbnail dimensions.feed-row {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 16px;
}
.feed-thumb {
aspect-ratio: 1 / 1;
overflow: hidden;
}Premium visual result 3
The row knows the thumbnail size before the image file arrives.
Fast practical rule
Every important image should have a stable footprint before it loads. Use HTML width and height when you know the source dimensions, and use a CSS aspect-ratio wrapper when the component needs a controlled design shape.
Debug checklist
- Inspect the image tag and check whether
widthandheightare missing. - Throttle the network and reload the page to see the empty image slot.
- Check whether the browser reserves space before the image file downloads.
- Use
display:blockto avoid inline image spacing surprises. - Use a ratio wrapper when the design needs a controlled crop or fixed visual shape.
- Check product cards, search results, galleries, and article hero images first.
- Compare the reserved shape with the final rendered image shape.
- Do not depend on fast internet to hide layout instability.
What width and height actually do
The width and height attributes do not force the image to stay that exact pixel size on every screen. When the CSS says max-width:100% or width:100%, the image can still scale responsively.
Their real job is to give the browser the image’s ratio early. A 1200 by 675 image tells the browser to reserve a 16:9 space even before the pixels finish downloading. That early ratio is what prevents the page from jumping.
This is why a responsive image can have fixed numeric attributes and still behave responsively. The attributes describe the source ratio. The CSS controls the rendered size.
Why this is different from lazy loading shift
Lazy loading image layout shift is about delayed image loading. This fix is narrower: it focuses on the missing dimension data itself. An image can shift the page even without lazy loading if the browser cannot reserve its size during the first layout.
That prevents cannibalization between both fixes. This article answers the dimension problem. The lazy loading article answers the delayed loading strategy problem.
When dimensions are not enough
Width and height attributes give the browser a natural ratio, but the surrounding layout still matters. A fixed-height wrapper, a carousel script, a grid card, or an art-directed mobile image can still override the expected result.
When that happens, keep the image dimensions and fix the component shell. The strongest production pattern is not “HTML dimensions or CSS ratio.” It is often both: image dimensions for the browser, and a stable wrapper for the design system.
Final takeaway
Image missing width height layout shift happens because the browser cannot reserve the image’s final space during the first layout pass. The file may load correctly, but the page still jumps if the image box was not known early.
Add width and height when possible. Use aspect-ratio wrappers when the component needs a designed media shell. Keep lazy loading, responsive images, and image grids stable by making the layout footprint predictable before the image appears.