Srcset and Sizes: Responsive Images

Why responsive images?

Why using srcset and sizes?

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"

HD and Retina screens

Example: page with sidebar

1x (low end devices) 2x (high end devices) device pixel ratio

Mobile

srcset="small.jpg 640w" 
sizes="100vw"

Tablet

srcset="
small.jpg 640w,
large.jpg 1030w
"
sizes="
(min-width: 1536px) 1030px,
100vw
"

Desktop

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
"
>

Comments

Browser support for srcset and sizes

browser support

Sources

Software Developer