Responsive images with srcset and sizes

Why using srcset and sizes?

  • serving better images to the user,
  • improving the website loading time

How srcset and sizes works

<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 viewport width equals to 960px or greater than show the image with a width of 540px,
  • 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

Example: page with sidebar

  • the width of the page content is 67%, the sidebar is 33%
  • on mobile, the sidebar is displayed below the content,
  • mobile and tablet have a pixel-device-ratio of 2
A common website layout: page with sidebar. Perfect example to use srcset and sizes.

Mobile

  • viewport width is 320px,
  • 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

  • viewport width is 768px,
  • 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 viewport width is 1366px,
  • 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 small.jpg when viewed on mobile,
  • it serves medium.jpg when viewed on desktop,
  • it serves large.jpg when viewed on a tablet

Comments

Browser support for srcset and sizes

Browser support for srcset on caniuse.com (Nov. 11, 2016)

Sources

--

--

web designer, teacher, introvert, morningness person, less is more, loves details, basketballer https://woutervanderzee.nl

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store