Chrome support for responsive website images
Google browser now leads the way with support for the new HTML Picture tag
I'm sure we've all noticed how many modern websites "respond" to fit the width of the browser or device we're using. Employed properly, these responsive site negate the need for multiple websites. One good website can look great on desktop, tablet and phone alike. However, there's just one problem: image filesize.
Sure, these new websites can adapt images to fit your browser width, but you're still downloading the hi-res versions that are slow to download and bad for your monthly data plan! The answer? Say hello to the <picture> element.
The new <picture> element is similar in syntax to the HTML5 <audio> and <video> tags. It's essentially a container that allows Web designers to specify a range of different-sized images, plus criteria to determine when each should be used. This is all described to the browser using new 'srcset', 'media' and 'sizes' attributes. The browser can then evaluate which image is best suited to any given scenario, and download the best. Read more about these new tags here.
Web designers have been struggling with this exact issue for a long time now, so the <picture> element is a pretty big deal. Thanks to the guys at the Responsive Images Community Group, we'll all soon enjoy a faster, cheaper Web browsing experience.