# Bad value X for attribute “loading” on element “img”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-loading-on-element-img
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes). 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:

```html
<!-- 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:

```html
<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:

```html
<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:

```html
<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:

```html
<!-- 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"`.