Implementing Responsive Images with the <img> Tag

In this section, we will explore the concepts and usage of the srcset and sizes attributes, which enable the HTML <img> tag to automatically adjust and serve responsive images based on the browser's viewport width and resolution.

Responsive Image Techniques Provided by HTML

Nowadays, people browse the web on a wide variety of devices, making it essential for web designers to understand and master the principles of responsive web design.

One of the main methods to implement responsive web design is through CSS. With the help of JavaScript, even more sophisticated responsive designs can be created. Another approach involves using the responsive image features provided by HTML. This method is most effective when combined with CSS-based responsive design and represents just one part of the overall responsive design strategy.

There are two primary responsive image techniques offered by HTML:

  • Using the <img> tag with the srcset and sizes attributes
  • Using the <picture> tag along with <source> tags and the srcset, media, and type attributes

This article focuses on the method of using the <img> tag with the srcset and sizes attributes.

Implementing Responsive Images with the <img> Tag Using the srcset and sizes Attributes

HTML Basic attributes of the <img> tag 
<img src="image-path.jpg" width="200" height="500" alt="Alternative text for the image">

The example above demonstrates the basic attributes of the <img> tag. Among these, pay particular attention to the src and width attributes.

  • The src attribute specifies the path to the image source to be loaded.
  • The width attribute sets the width (horizontal size) of the image.

The srcset and sizes attributes were introduced to enable responsive images using the <img> tag.

The srcset attribute relates to the src attribute,
while the sizes attribute is related to the width attribute.

  • srcset → Introduced to specify responsive image sources based on the browser's viewport width or display resolution, which cannot be handled by the src attribute alone.
  • sizes → Introduced to define the relationship between the browser's viewport width and the responsive image widths specified in srcset, which cannot be achieved with the width attribute alone.

The viewport is the visible area of a web page within the browser window or in full-screen mode — the part of the document currently displayed to the user.

What It Means to Implement Responsive Images with the srcset and sizes Attributes

Implementing responsive images means using the srcset attribute to specify image sources that respond to the browser’s viewport width or display resolution, and using the sizes attribute to define the relationship between the viewport width and the image widths specified in srcset.

Keep in mind that the sizes attribute is optional — if it's not needed, you can simply omit it. We'll explain when and how to use sizes in more detail later.

The srcset Attribute of the <img> Tag

The srcset attribute used in the <img> tag specifies responsive image sources based on the browser's viewport width or the device’s screen resolution.
You can define multiple image sources within the attribute.

This attribute helps the browser choose the most appropriate image from a set of options, depending on the display resolution or viewport width. It is designed to support responsive images by rendering the best-fitting image, which leads to optimized page loading speed and better image quality.

Note:
The srcset attribute is not only used with the <img> tag, but also with the <source> tag inside a <picture> element.
The srcset attribute used in the <source> tag of the <picture> element is combined with media queries to deliver different images depending on specific conditions. In contrast, the srcset attribute used in the <img> tag simply allows the browser to select the most suitable image based on the device’s screen resolution or the browser's viewport width.

The srcset attribute in the <img> tag is used to specify the most appropriate responsive image source based on:

  • Serve different image sources based on screen resolution
  • Adapt to the browser's viewport width

Syntax of the srcset Attribute

Before diving into the syntax, remember that the srcset attribute in the <img> tag was introduced to specify responsive image sources based on the browser's viewport width or the device’s display resolution.

HTML Format of the srcset Attribute in the <img> Tag 
<img
    srcset="
        candidate-image-url-1 max-viewport-width-or-resolution-1,
        candidate-image-url-2 max-viewport-width-or-resolution-2,
        candidate-image-url-3 max-viewport-width-or-resolution-3,
        candidate-image-url-n max-viewport-width-or-resolution-n
    "
    src="default.jpg"
    alt="Heart"> <!-- If srcset is properly set, the src attribute can be omitted -->

The syntax of the srcset attribute may seem complicated at first, but breaking it down line by line as shown above makes it easier to understand. Each value is part of a comma-separated list, and every item in the list consists of three parts. Let's take a closer look at each part.

In the <img> tag, the srcset attribute tells the browser which images to consider, along with the responsive conditions—defined as the maximum viewport width or maximum display resolution—under which each image should be rendered. Each item is separated by a comma and consists of:

  • Image file path (candidate image URL)
  • Whitespace (a single space character)
  • Maximum viewport width or maximum display resolution for which this candidate image is intended

It may still feel unfamiliar and somewhat challenging at this point. However, reviewing the following three examples should help clarify things:

  1. Example code specifying image sources based on the browser's viewport width
  2. Example code specifying image sources based on the display resolution
  3. Example code specifying image sources based on both the browser’s viewport width and the display resolution

Example code specifying image sources based on the browser's viewport width

HTML <img> Tag srcset Attribute Format Example: Specifying Image Sources Based on Browser Viewport Width 
<img
    srcset="
        heart-small-480px.jpg 480w,
        heart-medium-700px.jpg 700w,
        heart-large-1000px.jpg 1000w
    "
    src="heart-large-1000px.jpg" 
    alt="Heart"> <!-- If srcset is set, the src attribute is ignored -->

The example above specifies image sources based on the browser's viewport width.

  • heart-small-480px.jpg 480w: This image renders when the viewport width is 480px or less.
  • heart-medium-700px.jpg 700w: This image renders when the viewport width is 700px or less.
  • heart-large-1000px.jpg 1000w: This image renders when the viewport width is 1000px or less.

Please note the w unit used here: this is called the w descriptor, which stands for viewport width and is equivalent to pixels (px) as a length unit.

480w means a maximum viewport width of 480 pixels. In other words, it applies when the viewport width is 480px or less. Expressed as a CSS media query, it is equivalent to @media (max-width: 480px). So, heart-small-480px.jpg 480w means "Render heart-small-480px.jpg when the viewport width is 480px or less."

700w means a maximum viewport width of 700 pixels, equivalent to @media (max-width: 700px). Thus, heart-medium-700px.jpg 700w means "Render heart-medium-700px.jpg when the viewport width is 700px or less."

1000w means a maximum viewport width of 1000 pixels, equivalent to @media (max-width: 1000px). So, heart-large-1000px.jpg 1000w means "Render heart-large-1000px.jpg when the viewport width is 1000px or less."

If the srcset attribute is set, the src attribute is ignored.

If the srcset attribute is set but no image exactly matches the viewport conditions, the browser selects the image with the closest matching descriptor. For example, if the viewport width is 1800px, no images from the example meet this condition. The closest is heart-large-1000px.jpg 1000w, so this image will be rendered.

Important!
If the viewport width is 500px, both heart-medium-700px.jpg 700w and heart-large-1000px.jpg 1000w meet the condition. Which image will be rendered? When multiple candidates match, the browser picks the first matching entry based on the order they appear in the markup (top-to-bottom or left-to-right). Thus, heart-medium-700px.jpg 700w will be rendered.
Therefore, when using the w descriptor for viewport widths, always list them in ascending order (smallest to largest) to avoid unexpected results.

Note:
Refer to the official srcset attribute specification for more details.
This issue does not occur if the image's displayed width is controlled by CSS or the width attribute to be smaller than the intrinsic size.

Example code specifying image sources based on the display resolution

HTML Example of using the srcset attribute in an <img> tag to define image sources based on display resolution 
<img
    srcset="
        heart-small-480px.jpg 1x,
        heart-medium-700px.jpg 2x,
        heart-large-1000px.jpg 3x
    "
    src="heart-large-1000px.jpg"
    alt="Heart"> <!-- If srcset is set, the src attribute is ignored -->

Let's first understand what display resolution means in this context.
Display resolution—also referred to as image pixel density or device pixel ratio—represents how many physical pixels exist per CSS pixel on a display. A higher pixel density means more pixels are packed into the same area, resulting in a sharper and clearer image.

Modern browsers and devices commonly use values like 1x, 2x, and 3x to represent device pixel ratios. These ratios indicate how many physical pixels correspond to one CSS pixel. For example, a device with a 2x resolution has twice as many physical pixels per CSS pixel compared to a standard display.

This example specifies image sources based on display resolution:

  • heart-small-480px.jpg 1x: Rendered when the device has a 1x display resolution or lower.
  • heart-medium-700px.jpg 2x: Rendered when the device has a 2x display resolution or lower.
  • heart-large-1000px.jpg 3x: Rendered when the device has a 3x display resolution or lower.

Pay attention to the x descriptor. It refers to multiples of base resolution:

  • 1x means the image is rendered at its original resolution.
  • 2x refers to an image that is twice the resolution for sharper rendering on high-density displays.
  • 3x refers to an image that is three times the base resolution.

Using high-resolution images is especially important for devices with high pixel densities—such as mobile phones or Retina displays on Apple devices—where standard-resolution images may appear blurry.

Best Practice:
When targeting high-resolution displays, it's recommended to provide scaled image assets (like 2x or 3x) so that the browser can choose the most appropriate version depending on the device's capabilities.

Example code specifying image sources based on both the browser's viewport width and the display resolution

HTML Example of an <img> tag using the srcset attribute format to define image candidates with either a w descriptor or an x descriptor 
<img
    srcset="
        heart-small-480px.jpg 480w,
        heart-medium-700px.jpg 2x,
        heart-large-1000px.jpg 1000w
    "
    src="heart-large-1000px.jpg"
    alt="Heart"> <!-- If srcset is set, the src attribute is ignored -->

As shown in the example above, you can define multiple image sources using the srcset attribute with either the browser's viewport width (using the w descriptor) or the display resolution (using the x descriptor).

However, the following example demonstrates incorrect syntax:

HTML An <img> tag using the srcset attribute where each image candidate specifies both a w and an x descriptor 
<img
    srcset="
        heart-small-480px.jpg 480w 1x,
        heart-medium-700px.jpg 700w 2x,
        heart-large-1000px.jpg 1000w 3x
    "
    src="heart-large-1000px.jpg"
    alt="Heart"> <!-- If srcset is set, the src attribute is ignored -->

Unfortunately, combining both a w descriptor and an x descriptor within a single image candidate is not valid. Each candidate must use only one type of descriptor—either w or x, but not both.

Browsers use these descriptors to determine which image to display based on the current device's characteristics, so it’s essential to follow proper syntax when writing the srcset attribute.

The sizes Attribute of the <img> Tag

The sizes attribute used in the <img> tag defines rules for how the browser should select from the image candidates provided in the srcset attribute that use the w descriptor. These rules are based on media queries.

Therefore, the sizes attribute cannot be used on its own—it must be used with the srcset attribute.

Syntax of the sizes Attribute

HTML 
<img
    srcset="
        heart-small-480px.jpg 480w,
        heart-medium-700px.jpg 700w,
        heart-large-1000px.jpg 1000w
    "
    sizes="
        (max-width: width) width,
        (max-width: width) width,
        width
        ...
    "
    src="heart-large-1000px.jpg" 
    alt="Heart"> <!-- If srcset is set, the src attribute is ignored -->
  • A comma-separated list of one or more strings that represent image widths.
  • Each string consists of:
    • A media query (optional for the last item),
    • Followed by a length value that defines the image's display width.
  • The length value must be specified using viewport-relative units such as px, vw, etc.
    Units like %, cm, mm, in, pt, and pc are not allowed in the sizes attribute.

Let's walk through an example to understand how this works:

HTML Example of using the srcset attribute in the <img> tag to specify image sources based on the browser's viewport width: 
<img
    srcset="
        heart-small-480px.jpg 480w,
        heart-medium-700px.jpg 700w,
        heart-large-1000px.jpg 1000w
    "
    sizes="
        (max-width: 480px) 480px,
        (max-width: 700px) 700px,
        1000px
    "
    src="heart-large-1000px.jpg" 
    alt="Heart"> <!-- If srcset is set, the src attribute is ignored -->
  • (max-width: 480px) 480px: When the viewport is 480 pixels wide or less, the browser selects the image candidate whose w value is closest to but not greater than 480w. In this case, it will render heart-small-480px.jpg.
  • (max-width: 700px) 700px: When the viewport is 700 pixels wide or less, the browser chooses the candidate image whose w value is closest to but not greater than 700w. Here, it selects heart-medium-700px.jpg.
  • 1000px: If none of the media queries apply, the browser assumes the image will be displayed at 1000 pixels wide, and picks the closest matching candidate. In this case, heart-large-1000px.jpg will be rendered.

Browser compatibility

Browser compatibility for the srcset and sizes Attributes
Attribute
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
srcset 34 18 38 8
sizes 38 12 38 9.1

References