HTML - Responsive Image with the SrcSet and sizes attributes

About

When a web server gets a request, it has no information about the characteristic of the screen device. Is this a mobile or a desktop with a top notch screen ?

The srcset attribute of the img tag allows to delegate the choice of the best image to the browser. It will choose the best image depending on the characteristics of the device.

Syntax

<img 
    srcset="image/url descriptor, ..., image/url descriptor"
    sizes="definition"
>

where:

  • the srcset attribute defines a serie of image and their descriptor describing the image properties
  • the sizes attribute defines the width of the image to take depending on the browser width (works only for the width descriptor of srcset and not the x image resolution descriptor)

srcset

srcset just lists the available images and their intrinsic characteristics via what's called a descriptor.

<img  srcset="image/url descriptor, ..., image/url descriptor">

The descriptor can describe the image by width or resolution but not both. All descriptor must be of the same format. ie

  • a width descriptor [0-9]*w. Example for an image of 100px, 100w.
  • or a x descriptor for the image resolution. Example: 1.5x, 2x (Default to 1x if not defined)

The w in the descriptor describes the intrinsic width (physical), not in screen pixel (logical).


If the pixel ratio of your device is 3 (such as on a iphone 6) and that the browser width is 100px, the browser will choose the image with a width descriptor of 300w.

Sizes

The sizes attributes permits to define the wanted image size.

If an element has a sizes attribute present, all image must have the width descriptor specified.

Sizes defines what image size would be best to choose for a set of media conditions (e.g. screen widths).

You can define it:

Syntax:

<img sizes="[mediaCondition ]layoutWidth, ..., [mediaCondition ]layoutWidth">

where:

  • the media condition is:
    • optional (chosen when none of the media conditions are true)
    • a part of a media query (Ref). Example:
      • (max-width: 375px) and (min-resolution:192dpi)
      • (min-width:600px)
  • the layout width defines the size of the slot on the page in logical pixel (css pixel):

Fixed sizes

  • auto: let the browser choose
<img sizes="auto">
  • the half of the browser width
<img sizes="50vw">

Breakpoint sizes

min-width

Example of sizes by breakpoint:

  • if you want the image to span:
    • the full width on small screen
    • a small width on large screen

you would write with

<img sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw">

that you can read as:

When the browser width is The image width is … of the viewport width (vw)
> 600px 25%
600px < width < 500px 50%
< 500px 100%
max-width

You can also use the reverse direction and use the max-width filter.

Example:

<img sizes="(max-width: 600px) 480px, 800px">

Image selection

The image selection depends on:

With a fixed sizes of 50vw meaning half the view port, the browser would make the following selections.

Browser width Device pixel ratio Image used specified by the descriptor Effective resolution
400px 1 200w 1x
400px 2 400w 2x
320px 2 400w 2.5x
600px 2 800w 2.67x
640px 3 1000w 3.125x
1100px 1 800w 1.45x

Example in the wild

Basic

Below is a html page created in a iframe of 400px to constraint the viewport

  • The css that doesn't make the image overflow
img { max-width: 100%; }
  • The srcset
<img width="606px" height="160px"
     srcset="
    https://via.placeholder.com/226x60 226w,
    https://via.placeholder.com/446x118 446w,
    https://via.placeholder.com/606x160 606w
"
/>
console.log("Device pixel Ratio (DPR) :"+window.devicePixelRatio)

Google

<img srcset="example-320w.jpg 320w,
       example-480w.jpg 480w,
       example-800w.jpg 800w"
   sizes="(max-width: 320px) 280px,
      (max-width: 480px) 440px,
      800px"
   src="example-800w.jpg" alt="responsive web!">

Instagram

<img 
    alt="Description" 
    decoding="auto" 
    style="object-fit: cover;" 
    sizes="598px" 
    srcset="https://url 640w, https://url2 750w, https://url3 1080w" 
    src="https://url"
>

Documentation / Reference


Powered by ComboStrap