<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:
- We’ll ensure that our images scale efficiently with
- We’ll art direct our images with
- We’ll supply an alternate image format using
In the process we’ll see firsthand the dramatic performance gains that the new features enable.