References

Beginner-friendly references for web development, with live, editable examples.

The HTML loading attribute

Attribute All modern browsers Updated
Quick answer

The HTML loading attribute tells the browser whether to lazy-load the resource until it nears the viewport. It is used on the <img> and <iframe> elements.

Overview

The loading attribute tells the browser whether to lazy-load the resource until it nears the viewport. It applies to the <img> and <iframe> elements.

loading="lazy" defers off-screen images and iframes until the user scrolls near them, cutting initial load. Do not lazy-load above-the-fold images (especially your LCP image) — that delays them.

Syntax

<img src="p.jpg" loading="lazy" alt="">

Values

Value
eager (default) | lazy

Best practices

  • Always give an <img> meaningful alt text (or empty alt="" if purely decorative).
  • Set width and height (or a CSS aspect-ratio) so the layout does not shift as images load.
  • Use srcset and sizes to serve appropriately sized images on each screen.
  • Add loading="lazy" to below-the-fold images.

Frequently asked questions

What does the loading attribute do?
Controls eager vs lazy loading of the resource.
How do I make images responsive?
Use srcset with sizes on the <img>, or a <picture> for art direction and modern formats.
How do I stop images causing layout shift?
Set the width and height attributes (or a CSS aspect-ratio) so the space is reserved.
Which elements use the loading attribute?
It is an element-specific attribute, used on the <img> element (and <picture>).
list loop