Retina Sprites

1. Make sure you have all png images in both the normal and the retina version.

2. Make sure the retina versions are exactly 2x bigger than the normal versions

3. Create 2 zip files. 1 for the normal images and 1 for the retina versions

4. Got to http://spritegen.website-performance.org/

5. Upload the normal zip file. Choose offset of 25px. Copy the css and download the file

6. Upload the retina zip file. Choose offset of 50px. Copy the css and download the file

7. Add the css rules to global.less (or something). If you use less, you can now use these rules as mixins

8. Also add an extra rule:

.sprite-backgroundsize {background-size: x y}

where x and y are the dimensions of the normal sprite.

9. Now you can add a background image like this:

.logo {
  background-image: url(../img/sprite.png);
  background-repeat: no-repeat;
  .sprite-logo();
  (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi) {
    background-image: url(../img/sprite@2x.png);
    .sprite-backgroundsize();
  }
}

10. Done. If you ever need to change or add images to the sprites, you will only need to change the css rules in global.less