Replacing 1x images with 2x images on the fly with Retina.js

The Retina.js script is one of those scripts that makes things so much easier that sometimes you wonder why responsive images are so difficult.

If you don't feel ready to deal with the <picture> and/or srcset and sizes attributes, I don't blame you. It's scary but I recommend that you keep trying to understand these tools since that's the state of the art of responsive images.

The Retina.js script was developed by the folks at Imulus (http://imulus.com/). The Retina.js script isn't a JavaScript-only solution; they also have a Sass mixin that produces the same results without the dependency on JavaScript.

Let's take a look at the JavaScript solution first.

Retina.js – a JavaScript solution ...

Get Mastering Responsive Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.