A Selective retina.js with No 404 Errors

Update: Retina.js 2.0+ now checks that the retina version of your image exists. No need for the below core code change, as this script has been rewritten and now better than it was before. You can also use the data-rjs data attrubute. Any images that don’t use this attribute will be left alone. 

Retina images are a great thing. They are so clear, so crisp. My favorite solution for implementing retina images is retina.js built by imulus. When your users load a page, retina.js will check each image on the page to see if there is a retina version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

The problem is that the script will check every single image that is in your markup. We don’t want this in every case because if every image does not have a retina ready version, then there will be 404 errors and it’s annoying to see in your console! Not all of your images are going to have retina versions for every website. Maybe just a few…

Not all images need a retina version. Here's a better, selective retina.js with no 404 errors. Click To Tweet

I was working on a website recently where we only had a few images that were going to be retina ready. I changed the script to get an element by its class. Here’s how you do it…

The original retina.js script checks all images in your markup. What we are doing is only checking images with a class name has-retina and then switching those images out for high resolution ones.

---