Is there a CSS sprite generator that also gives retina -versions? [closed]

Question

If there already isn't one, I would very much appreciate if someone could give some instructions on how to make a retina and non-retina CSS-sprite myself. Preferably using some CSS sprite -generator in the process if possible.

Related to topic: http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/

Thank you all in advance!

Answer 1

Method 1

Here's a Mixin to achieve this with Compass

Method 2

1. Create two version of your image files, one for "regular" density screens, the other for retina screens, with pictures twice the resolution. (Meaning if one of the pictures is 23px by 41 px, the retina version would be 46px by 28 px)
2. Go to http://spritegen.website-performance.org/ and create two versions of your sprite image. Lets assume your images have a smaller dimension than 25px. Choose Horizontal Offset: 25px in the first non-retina version, and 50px in the retina version. Save your sprites as sprite.png and spritex2.png

3. In your css file you can now define something along the rough lines of:

   .#spriteA,spriteB{
        background-image: url(sprite.png);
        width:25px;
        height:25px;
    }        
   
   @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
   only screen and (min--moz-device-pixel-ratio: 1.5),
   only screen and (min-resolution: 240dpi) {
   .#spriteA,spriteB{
        background-image: url(spriteX2.png);
        width:25px;
        height:25px;
    }
   }
   
   .spriteA{ background-position: 0 50%; }
   .spriteB{ background-position: -31px 50%; }
   

This way, the background position ratio (50%) is maintained whether you using the non-retina or retina resolutions.