Srcset and Sizes: Responsive Images

Why responsive images?

Why using srcset and sizes?

Let’s start with the beginning. Why even use srcset and sizes? I see two advantages:

  • improving the website loading time

How srcset and sizes works

An example of an <img> tag with the new srcset and sizes attributes:

<img alt="image alt text" src="medium.jpg" srcset="small.jpg 240w, medium.jpg 300w, large.jpg 720w" sizes=“(min-width: 960px) 720px, 100vw">
<img 
alt="image alt text"
src="medium.jpg"
srcset="
small.jpg 240w,
medium.jpg 300w,
large.jpg 720w
"
sizes="
(min-width: 960px) 720px,
100vw
"
>
alt="image alt text"
src="medium.jpg"
srcset="small.jpg 240w, medium.jpg 300w, large.jpg 720w"
sizes="(min-width: 960px) 540px, 100vw"
  • if the viewport width is smaller than 960px than show the image as wide as the viewport (100vw means 100% of the viewport width).

HD and Retina screens

On ‘normal’ screens, using the viewport width seems sufficient to choose the correct size of the image. But with HD and Retina screens you want to serve bigger sizes of the image. Et voilá, here comes srcset and sizes! With srcset and sizes the browser also takes into account the pixel density of the screen.

Example: page with sidebar

For this example, I’ve choosen a common website layout: a page with a sidebar. I’ll look through three situations: viewing this page on mobile, tablet and desktop.

  • on mobile, the sidebar is displayed below the content,
  • mobile and tablet have a pixel-device-ratio of 2
1x (low end devices) 2x (high end devices) device pixel ratio

Mobile

When this layout is viewed on mobile, we get the following result:

  • pixel-device-ratio is 2,
  • the number of actual pixels is therefore 320px x 2 = 640px,
  • the sidebar is displayed below the content at full screen width,
  • we therefore need an image of 640px wide,
  • and sizes is set to `100vw`
srcset="small.jpg 640w" 
sizes="100vw"

Tablet

On a tablet, we get the following result:

  • pixel-device-ratio is 2,
  • the number of actual pixels: 768px x 2 = 1536px,
  • the sidebar is displayed right of the content,
  • the width of the content is 67%,
  • the width of the image is 67% of 1536px = 1030px,
  • sizes can be set as: (min-width: 1536px) 1030px
  • that means something like: is the viewport width 1536px or higher, show the image with a width of 1030px
srcset="
small.jpg 640w,
large.jpg 1030w
"
sizes="
(min-width: 1536px) 1030px,
100vw
"

Desktop

The final situation where we want to load the correct image size is desktop. I’ve picked a display with a resolution of 1366 x 768px. Which is a common resolution at this moment (see statistics of w3schools.com ).

  • the pixel-device-ratio is 1,
  • CSS pixel width is 1366px x 1 = 1366px,
  • the width of the content and the image is 67%,
  • the width of the image is 67% of 1366px = 916px,
  • for sizes we get: (min-width: 1366px) 916px,
srcset="
small.jpg 640w,
medium.jpg 916w,
large.jpg 1030w
"
sizes="
(min-width: 1366px) 916px,
(min-width: 1536px) 1030px,
100vw
"
<img 
alt="alt text image"
src="medium.jpg"
srcset="
small.jpg 640w,
medium.jpg 916w,
large.jpg 1030w
"
sizes="
(min-width: 1366px) 916px,
(min-width: 1536px) 1030px,
100vw
"
>
  • it serves medium.jpg when viewed on desktop,
  • it serves large.jpg when viewed on a tablet

Comments

It seems that the difference between medium.jpg and large.jpg is not big. Why not use the same image for both situations, e.g. large.jpg?

Browser support for srcset and sizes

Browser support for srcset and sizes is good, but not excellent. Globally, ca. 83% of the browsers support srcset and sizes. It is not supported by Internet Explorer, Opera Mini and older versions of Android. But remember, the fallback is perfect! If srcset and sizes is not supported, the browser will use the src attribute.

browser support

Sources

The following articles inspired me writing this post:

Software Developer