So, You’re Writing A Responsive Images Script

While the original meaning of responsive images, img{max-width: 100%;}, was a simple theory to grasp we are now aligning the definition with dynamically serving the most appropriate image based on the viewport. Mat from Filament Group explains the work they’ve already done for PictureFill and the pitfalls
you need to watch out for if you’re working on your own flavour of RWD image scripts.

Swapping an image’s src certainly sounds simple enough. There are scores of responsive images scripts that do exactly that, and that alone: an img with ansrc, and an alternate src in a data- attribute to be swapped in depending on conditions hard-coded in a script. In fact, that’s how our original responsive images script worked.

An excerpt from So, You’re Writing A Responsive Images Script

View original article