References

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

The HTML sizes attribute

Attribute All modern browsers Updated
Quick answer

The HTML sizes attribute tells the browser the rendered size of the image for different viewport conditions, so it can choose a srcset candidate. It is used on the <img>, <source> and <link> elements.

Overview

The sizes attribute defines image display size for srcset selection. It is used on the <img>, <source> and <link> elements.

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 srcset="s.jpg 480w, l.jpg 1080w" sizes="(max-width:600px) 480px, 1080px" src="l.jpg" alt="">

Values

Value
A comma-separated list of media-condition / length pairs, e.g. (max-width:600px) 480px, 1080px.

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 sizes attribute do?
Defines image display size for srcset selection.
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 sizes attribute?
It is an element-specific attribute, used on the <img> and <source> elements (<link> also takes a sizes, but there it declares icon dimensions such as 32x32).
size span (col)