Retina Image Treatment
There are two practices used frequently for adding images to a webpage, the <img> tag or using CSS background. In order to successfully replace the images used for retina display images on iOS devices, there are two methods.
Replacing <img> Tags
RetinaJS has everything you will need to completely replace every occurrence of an <img> tag and it is extremely easy to use. Just drop the retina.js file in your project and then link to it on your page, it will do the rest.
http://retinajs.com/
Replacing Background Images (using SASS)
In order to account for all the background images used through out your site, there will need to be some re-writing. Your SASS document will require a new mixin created for handling the declaration and deciding which image to dish out. Next you will replace every line where you are declaring background: url() with a call to the mixin : @include background-image-retina(logo, png, 200px, 100px);
This site will list all the steps needed to completely replace all uses of CSS images.
http://chrisltd.com/blog/2013/05/retina-images-sass/