Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of Zepto.js, of, and I'm a Ruby on Rails core alumnus. With Amy Hoy I'm building cheerful software, like Freckle Time Tracking and Every Time Zone and write books like
   Want me to speak at your conference? Contact me!

Don’t use JavaScript for Retinafying

September 22nd, 2012

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.

Like this little tip? This is an excerpt from my ebook Retinafy your web sites & apps. Grab your copy now and have your web sites and apps retinafied in no time—avoid pitfalls like JavaScript libraries that do more damage than good and learn all the other tricks!