Don’t use JavaScript for Retinafying

There’s a bunch of JavaScript helper libraries around to make your site “ready for retina”, and it’s tempting to think that there’s an easy solution that only loads in retina images when required. However, as I’ve laid out it’s better to think “retina-first”, and assume you’re running on a retina screen and make exceptions or adaptions for “normal” screens, as high-density displays will soon be the norm rather than a special thing (and they are the norm on mobile devices already!).

tl;dr—don’t use JavaScript “retina” helper libraries

Combined with the extra overhead of loading in a “retina” JavaScript library, parsing and replacing items in the DOM (which causes expensive layout reflows and re-rendering) and of course downloading extra versions of page assets (depending on the library up to 3 total HTTP requests have to be made for each image!) it quickly becomes clear that there’s no quick and easy “silver bullet” JavaScript solution.

Just design “retina-first”, use SVG and modern CSS whenever possible and for bitmapped images, go high-resolution and let the browser scale down. Make exceptions when you have to.