Seoxpert.io
Get started
lowPerformance

Lazy-Loaded Images Without Explicit Width / Height

Lazy-loaded images without width/height cause LCP delays and layout shifts, harming Core Web Vitals and SEO.

By Seoxpert Editorial · Published

Why it matters

Lazy-loading above-the-fold images delays their appearance, increasing Largest Contentful Paint (LCP) times. Missing width and height attributes causes layout shifts (CLS) when images load. Combined, these issues worsen Core Web Vitals, directly impacting SEO rankings and user experience.

Impact

Leaving this unresolved leads to slower perceived load times and visual instability, negatively affecting SEO and user satisfaction.

How it's detected

The crawler identifies <img> tags with loading="lazy" missing explicit width and height attributes, especially above the fold.

Common causes

  • Using loading="lazy" on hero or above-the-fold images.
  • Omitting width and height attributes on images.
  • Relying on CSS for image sizing instead of HTML attributes.
  • Automated image insertion without proper attribute handling.

How to fix it

For above-the-fold images, remove the loading="lazy" attribute and add explicit width and height attributes. For below-the-fold images, keep loading="lazy" but ensure width and height are set. This reserves layout space and ensures images load promptly without causing layout shifts.

Code examples

Problem: Lazy-loaded image above the fold without width/heig

<img src="hero.jpg" loading="lazy" alt="Hero image">

Fix: Remove lazy loading and add width/height for above-the-

<img src="hero.jpg" width="1200" height="600" alt="Hero image">

Fix: For below-the-fold image, keep lazy loading but add wid

<img src="gallery.jpg" loading="lazy" width="400" height="300" alt="Gallery image">

FAQ

Should I use loading="lazy" on images above the fold?

No, above-the-fold images should load eagerly to avoid LCP delays.

Why do I need width and height attributes if I use CSS for image sizing?

HTML width and height reserve layout space, preventing layout shifts before the image loads.

Does adding width and height help lazy-loaded images below the fold?

Yes, it prevents layout shifts when those images load later.

Will removing loading="lazy" from hero images affect performance?

It improves LCP and visual stability for users, which benefits performance and SEO.

Found this issue on your site?

Run a scan to see if Lazy-Loaded Images Without Explicit Width / Height affects your pages.

Scan my website →