Responsive Images in Practice

<img 
    srcset="quilt_3/large.jpg  1240w, 
            quilt_3/medium.jpg  620w,
            quilt_3/small.jpg   310w"
    sizes="(min-width: 41.25em) 38.75em,
           calc(100vw - 2.5em)"
    src="quilt_3/medium.jpg"
    alt="A crazy quilt whose irregular fabric scraps are fit into a lattice of diamonds." />

Let’s take an existing web page and make its images responsive. We’ll do so in three passes, applying each piece of the new markup in turn:

1. We’ll ensure that our images scale efficiently with srcset and sizes.
2. We’ll art direct our images with picture and source media.
3. We’ll supply an alternate image format using picture and source type.

In the process we’ll see firsthand the dramatic performance gains that the new features enable.

A List Apart: Responsive Images in Practice →