A great overview of the different techniques that you can utilize to make your websites retina ready. On this site I had been using the double-resolution (actually 2048px on the long side) picture trick — meaning everyone gets to download huge images. This has slowed down site load times, significantly, but it was the easiest to implement and has kept the site looking great.

I used [Icon Slate](https://itunes.apple.com/us/app/icon-slate/id439697913?mt=12) (hat tip to [Gruber](http://daringfireball.net) to create a retina favicon. Those are the only images I use, everything else is just CSS and text.

Now, the biggest downside to this is that in Reeder on the Mac (and I think Google Reader) images from my site shoot out of their bounds and look crazy big.

I’ve since installed [Retina.js](http://retinajs.com) to use and try out, but it occurs to me that all these tricks are just nasty hacks for something that is just going to have to be standardized in the browser itself. That is, we need a standard file name attribute that tells the web browser when there is a retina asset available, the browser knows it needs the retina asset, and grabs that first.