As part of a project I'm working on I made a little JavaScript utility that swaps images in an HTML page with high resolution equivalents if it detects a high-resolution 'Retina' display and a window over a certain size.

This is useful in a responsive layout because a medium-sized image will look sharp if scaled down (e.g. high res mobile display) but won't look so great when scaled up (e.g. Retina Display Macbook Pro). In my case I wanted to swap a large header image only if the window size was over 1023 (CSS) pixels wide and it was a 'Retina' display.

I thought I'd share it in the hope that it saves someone else the hour it took me to write it.

Here on GitHub:

It's called 'resina.js' because there's already a retina.js, which works differently.