HTML sizes Attribute: Reference and Examples

The sizes attribute is a small instruction attached to an HTML element. Its job is to describe intended image display widths with srcset. It is easier to remember when you can see it in a real piece of markup.

What sizes is used for

Describe intended image display widths with srcset. The attribute appears inside an element’s opening tag. Depending on its definition, it may take a specific string, a number, an enumerated keyword, or be a boolean attribute.

The example below uses it in a img context. Other elements may support it too, or may give the same attribute a different meaning.

Example you can try

<figure>
    <img src="photo.jpg" alt="A sunny mountain trail" width="600" height="400" srcset="photo-480.jpg 480w, photo-960.jpg 960w" sizes="100vw">
    <figcaption>Mountain trail</figcaption>
</figure>

How the example works

Look for sizes in the snippet. Here the example shows the value 100vw. This is a concrete input the browser can interpret; it is not just text shown to the reader.

Sizes describes image display width for srcset width-descriptor selection; it is not an image pixel size declaration.

Values and important behavior

With width-descriptor srcset, sizes can use a media condition such as (max-width: 600px) 100vw, 600px.

This detail matters most when the page receives user input, navigates to another document, or loads an external resource. In those cases, check the browser behavior and any server-side requirements separately.

Small practice task

Copy the code and change sizes to another sensible value, or remove it entirely if it is optional. Test the difference in the browser and inspect any submitted value or network request.

Common Beginner Mistakes

• Sizes describes image display width for srcset width-descriptor selection; it is not an image pixel size declaration.
• Using sizes on an element that does not support it.
• Believing that an HTML hint or client-side check replaces real server validation or a security policy.

Key Takeaways

• sizes is used to describe intended image display widths with srcset.
• Sizes describes image display width for srcset width-descriptor selection; it is not an image pixel size declaration.
• Choose valid values and test the result instead of guessing what the browser will do.