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

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

The `decoding` attribute of an `<img>` is set to something other than `sync`, `async` or `auto`.

`decoding` is a hint about when the browser should decode the image. `async` says the image can be decoded without delaying the rest of the content, `sync` asks for it to be decoded and shown together with the content around it, and `auto`, the default, leaves the choice to the browser. The value has to be one of those three lowercase keywords with nothing around it. A typo such as `asynch`, a keyword that belongs to another attribute such as `lazy` (that one goes in `loading`), uppercase `ASYNC` and an empty value all trigger this error.

When the reported value includes quotes, as in `"async"`, the quotes are inside the value itself. That usually happens when the quotes around the value were HTML-encoded as `&quot;`, often by a plugin or template that escaped markup a second time. `&quot;` can't delimit an attribute, so the parser reads `decoding=&quot;async&quot;` as an unquoted value and decodes both references into literal quotes. Wrapping the value in two sets of quotes, as in `decoding='"async"'`, gives the same result. A value with only a trailing quote, such as `async"`, means the opening quote is missing, and the validator also reports `“"” in an unquoted attribute value`.

Browsers treat an invalid value as `auto`, so the image still loads and displays, but the hint is lost. If you don't need a particular decoding mode, remove the attribute.

The `&quot;` cause rarely affects `decoding` alone. If `loading`, `width`, `height`, `srcset` or `sizes` on the same `<img>` also report a stray `"`, fix the code that writes the tag instead of editing each attribute.

## Invalid example

```html
<img src="photo.jpg" alt="A red bicycle" width="600" height="400" decoding=&quot;async&quot;>
<img src="photo.jpg" alt="A red bicycle" width="600" height="400" decoding="asynch">
```

## Valid example

```html
<img src="photo.jpg" alt="A red bicycle" width="600" height="400" decoding="async">
```