Download
retina.js makes it easy to serve high-resolution images to devices with displays that support them. You can prepare images for as many levels of pixel density as you want and let retina.js dynamically serve the right image to the user. retina.js assumes you are using Apple's prescribed high-resolution modifiers (@2x, @3x, etc) to denote high-res image variants on your server. It also assumes that if you have prepared a variant for a given high-res environment, that you have also prepared variants for each environment below it. For example, if you have prepared 3x variants, retina.js will assume that you have also prepared 2x variants. If the environment does have 3x capabilities, retina.js will serve up the 3x image. It will expect that url to be /images/my_image@3x.png. If the environment has the ability to display images at higher densities than 3x, retina.js will serve up the image of the highest resolution that you've provided, in this case 3x.
Features
- Automatically swapping out src paths on img tags
- Automatically swapping out background image URLs in inline styles
- Manually specifying the location of a high-res image variant (works for src attributes and inline styles)
- Automatically creating media queries for CSS background images
- retina.js comes with mixins for SCSS, Sass, Less, and Stylus
- retina.js is compatible with all modern browsers and should not throw errors in old browsers all the way back through IE6
Project Samples
