References

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

The HTML decoding attribute

Attribute All modern browsers Updated
Quick answer

The HTML decoding attribute hints how the browser should decode the image relative to rendering the rest of the page. It is used on the <img> element.

Overview

The decoding attribute hints the image decoding strategy. It is used on the <img> element (and <picture>).

It relates to images — their source and responsive variants, dimensions, and loading and decoding behavior. Setting the right attributes keeps images sharp, fast and accessible.

Syntax

<img src="p.jpg" decoding="async" alt="">

Values

Value
auto (default) | sync | async

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 decoding attribute do?
Hints the image decoding strategy.
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 decoding attribute?
It is an element-specific attribute, used on the <img> element (and <picture>).
datetime default