Retina Image Treatment

#javascript

#ios

#sass

#retina

#image replacement

#retinajs

#project - ari

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.