HTML decoding Attribute

The HTML decoding attribute provides the browser with a preference for how an image should be decoded before it is displayed. It is used with the <img> element and accepts the values async, sync, and auto.

Syntax

The decoding attribute is added to an <img> element and specifies a decoding preference.

<img src="image.jpg" alt="Example" decoding="async">

The attribute is a hint to the browser rather than a requirement. The browser may choose the decoding behavior it considers appropriate.

Attribute Values

The decoding attribute accepts three values: async, sync, and auto.

Value	Description
`async`	Suggests that the browser decode the image asynchronously, allowing other content to be rendered without waiting for the image to finish decoding.
`sync`	Suggests that the browser decode the image synchronously with other content.
`auto`	Allows the browser to choose the decoding method. This is the default behavior.

Elements That Use the decoding Attribute

The decoding attribute applies to the <img> element.

Element	Description
`<img>`	Provides a preference for how the image should be decoded before it is displayed.

The async Value

The async value suggests that the browser decode the image asynchronously. This can allow other page content to continue rendering while the image is being decoded.

<img src="photo.jpg" alt="White tiger cub" decoding="async">

This value can be useful when it is preferable for other content to render without waiting for the image decoding process.

The sync Value

The sync value suggests that the browser decode the image synchronously with other content.

<img src="photo.jpg" alt="White tiger cub" decoding="sync">

This requests that the image and surrounding content be presented together, although the browser ultimately determines how decoding is handled.

The auto Value

The auto value allows the browser to choose the most appropriate decoding behavior.

<img src="photo.jpg" alt="White tiger cub" decoding="auto">

The auto state is the default when no decoding preference is specified.

decoding and loading

The decoding and loading attributes affect different parts of image handling. The loading attribute provides a hint about when an image should be loaded, while decoding provides a preference for how the image data should be decoded for display.

<img src="photo.jpg"
     alt="White tiger cub"
     loading="lazy"
     decoding="async">

The two attributes can be used together because loading an image and decoding its image data are separate operations.

Common Mistakes

Do not confuse decoding="async" with asynchronous image downloading. The attribute provides a preference for decoding the image data, not for how the image file is downloaded.

Do not assume that async always improves performance or that sync always makes a page slower. The effect depends on the image, browser, page, and rendering situation.

Do not rely on the attribute to force a particular decoding strategy. It provides a hint, and the browser can determine the actual behavior.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The decoding attribute on the <img> element is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the decoding Attribute

The example uses decoding="async" to provide the browser with an asynchronous image decoding preference.

Play in Editor

Summary

The HTML decoding attribute provides a preference for how an <img> element should be decoded. The async value suggests asynchronous decoding, sync suggests synchronous decoding, and auto lets the browser choose. The attribute is a decoding hint and does not control when the image file is downloaded.