HTML Guides for loading

The loading attribute tells the browser how to prioritize loading an image. Setting it to "lazy" defers loading until the image is near the viewport, which can improve page performance by reducing initial load time and saving bandwidth. Setting it to "eager" instructs the browser to load the image immediately, regardless of its position on the page. When the attribute is omitted, the browser defaults to "eager" behavior.

Any value other than these two exact lowercase strings is invalid according to the HTML specification. Common mistakes include using numeric values like "1" or "0", boolean-style values like "true" or "false", uppercase variants like "Lazy", or misspellings like "laxy". When a browser encounters an invalid value, it ignores the attribute and falls back to the default eager loading behavior. While this means the page won’t break visually, the intended lazy-loading optimization won’t take effect, and the HTML will fail W3C validation.

This matters for a few reasons:

• Performance: If you intended to use "lazy" but provided an invalid value, your images will all load eagerly, defeating the purpose and potentially degrading page speed.
• Standards compliance: Invalid attribute values signal potential bugs in your markup and can cause issues with tools and parsers that expect well-formed HTML.
• Maintainability: Valid, predictable markup is easier to maintain and debug across teams and over time.

To fix the issue, check the loading attribute value and replace it with one of the two valid options. If you want deferred loading, use "lazy". If you want immediate loading (or don’t need to specify), use "eager" or simply remove the attribute.

Examples

Invalid values

Each of these will trigger the validation error:

<!-- Numeric value -->

<img src="photo.jpg" alt="A sunset over the ocean" loading="1">

<!-- Boolean-style value -->

<img src="photo.jpg" alt="A sunset over the ocean" loading="true">

<!-- Misspelled value -->

<img src="photo.jpg" alt="A sunset over the ocean" loading="laxy">

<!-- Wrong case -->

<img src="photo.jpg" alt="A sunset over the ocean" loading="Lazy">

Correct: lazy loading

Use "lazy" for images that are below the fold or not immediately visible to the user:

<img src="photo.jpg" alt="A sunset over the ocean" loading="lazy">

Correct: eager loading

Use "eager" for critical images that should load right away, such as hero images or logos:

<img src="logo.png" alt="Company logo" loading="eager">

Correct: omitting the attribute

Since "eager" is the default behavior, you can simply remove the attribute if you want immediate loading:

<img src="logo.png" alt="Company logo">

Practical usage in context

A common and effective pattern is to eagerly load above-the-fold images while lazy-loading everything else:

<!-- Hero image: load immediately -->

<img src="hero-banner.jpg" alt="Welcome to our store" loading="eager">

<!-- Product images further down the page: defer loading -->

<img src="product-1.jpg" alt="Running shoes" loading="lazy">
<img src="product-2.jpg" alt="Hiking boots" loading="lazy">
<img src="product-3.jpg" alt="Sandals" loading="lazy">

Note that the loading attribute also works on iframe elements with the same two valid values: "lazy" and "eager".