Give images their size, and load them at the right time
This check reads every <img> the page showed: whether it reserves its space (width and height attributes), and whether it loads at the right moment for where it sits. It is informational and never scored, but it is usually the cheapest layout-shift and first-screen fix a page has.
Find out whether your site has this problem, and every other check, in one free scan.
Check your site freeWhy it matters
An image with no size makes the page jump when it arrives, which visitors notice and search engines measure (layout shift). Images below the fold that load eagerly compete with the first screen for bandwidth, and a lazily loaded first-screen image makes that screen wait.
How to fix
- 1 Add width and height attributes (the file's own size; CSS can still scale it) to each <img> listed.
- 2 Add loading="lazy" to the images below the fold.
- 3 Remove loading="lazy" from the first-screen image and give the main one fetchpriority="high".
Common mistakes
- Setting width and height in CSS only: the browser cannot reserve the space before the CSS and the image arrive.
- Adding loading="lazy" to every image, including the hero, so the first screen waits for it.
- Giving width and height the shown size instead of the file's aspect ratio, so the image is squashed on other screens.
How to verify
- 1 Open the page with a slow network in devtools and watch whether content jumps as images arrive.
- 2 Check the first-screen image is requested early (high priority in the network panel) and the ones below the fold only on scroll.
- 3 Re-scan and confirm the images listed are gone from the finding.
Related checks
Ready to see where you stand?
Scan your site and get your Engineering Score with a prioritized roadmap in under a minute, no signup required.