Better Responsive Images With the picture Element

This tutorial demonstrates how to create responsive images on your site using the newly drafted <picture> element proposal. It covers the needs, the idea behind this approach, details of the approach and the browser support (spoiler, it’s not supported anywhere). Fortunately there is PictureFill, a pollyfill for it.

This article will introduce you to <picture>, a new proposed element created to try and solve the problem of serving the version of content images which better suits the device currently visiting a web page.

An excerpt from Better Responsive Images With the picture Element

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.