<picture> perfect: designing with responsive images

• about half the room is using responsive images
• smashing magazine twitter survey found 58% of people didn’t use them
• responsive images allow us to support a range of devices, the best image for a device is delivered
• img[srcset] takes a definition of image sources, the browser selects the best image to use
• img[sizes] allows us to define when sizes at which the image is displayed, provide hints to the browser
• srcset is pretty well supported in browsers
• the picture element is designed for art directions
• picture element is used as a wrapper around existing image fallback
• picture element gives the author a lot more control over the image displayed
• the author can modify the crop to be appropriate for the users’s device
• picture element can be used to select image types based on images format: eg webp, jp2
• image type selection allows the browser to use less bandwidth in possible
• picturefill provides a great polyfill
• Coding the picture element can get complicated:

I never want to make anything that even remotely resembles this. pic.twitter.com/QsfusOtxkI

— Brad Frost (@brad_frost) May 16, 2015