From time immemorial, this question has continued to plague the minds of many a web designer: “How can I deliver only the most awesome-est images to a web browser?” There are so many different size screens and screen resolutions nowadays that it’s a pertinent question. But no worries, the <picture> element is your ticket! Maybe.
The <picture> element is a new element that’s coming really soon, and what’s great about it is that it let’s you give browsers several images to choose from to optimize image delivery and use new image formats like WebP. For a full background on the history of responsive images and all the goodies that <picture> brings, check out Yoav Weiss’ blogpost Native Responsive Images.
Buuuut…
There’s a somewhat opposing view from Jason Grigsby at Cloud Four Blog saying that unless you need art direction, Don’t use <picture> (most of the time). The reason is that <img> already has the srcset and sizes attributes to help a browser decide which resource to download. Note: this method doesn’t support new image formats.
Anywho…
Both of these blogposts are a good read and give a good background on where responsive images are heading in the future, and they’ll help you decide which solution works best for you.
Native Responsive Images | Dev.Opera via The Treehouse Show (YouTube)
Don’t use <picture> (most of the time) | Cloud Four Blog