Generate only those retina sprites and classes, where I have retina images

[arnisjuraga]

Hi!

Have not found quick solution.

I have icons folder with all my icons. For some of them, I want to generate retina css classes.

I expect Grunt task to generate additional retina classes for those and only those icons with @2x.png mask.

If I put only one retina image and set dst to the same .png destination, grunt will generate fatal error.

Fatal error: Retina settings detected but 1 retina images were found. We have 25 normal images and expect these numbers to line up. Please double check `retinaSrcFilter`.

My Gruntfile.js

sprite:{
    all: {
        src: '../img/icons/*.png',
        dest: '../img/spritesheet.png',
        retinaDest: '../img/spritesheet.png',
        destCss: '../sprites.css',
        retinaSrcFilter: ['../img/icons/*@2x.png'],
        cssOpts: {
            cssSelector: function (item) {
                if (item.name.indexOf('-hover') !== -1) {
                    return '.icon-' + item.name.replace('-hover', ':hover');
                }
                else {
                    return '.icon-' + item.name;
                }
            }
        }
    }
}

[twolfson]

Can you explain why only some of your images have a retina equivalent?

[arnisjuraga]

Because ... sometimes I'm lazy. Some larger images (e.g. Logo) looks really bad on retina, instead of smaller icons, arrows or buttons, which are more acceptable.

Even more - Logo or some buttons for multi-language sites can have different text on every image. It just needs an extra effort to maintain all of them:

• one icon/button/logo for every language
• PLUS - every change in image texts must be done also for @2x.
• exporting vector text from Adobe Illustrator not always keeps perfect pixel dimensions if exported as 2x the size etc.

It takes more time, but IMHO - not always it's so necessary

This can be not a common thing to ask, but there are opinions here on maintaining 2x more images for sprites because of retina and possible workarounds.

Probably, solution which works for me too - generating ONLY retina display images and downsizing them for normal dpi screens. This can be done with spritesmith?

[twolfson]

We don't directly support downsizing retina images but it fits nicely into a grunt workflow. Here's an example setup:

grunt.initConfig({
  _2x2x: {
    sprites: {
      imgsrcdir: '../img/icons/',
      imgdestdir: '../img/icons/',
      option: {
        overwrite: true
      }
    }
  },
  sprite: /* same as current setup */
});

grunt.registerTask('build-sprites', ['_2x2x, 'sprite']);

https://github.com/freestyle21/grunt-2x2x

Other plugin that will work but is less slick:

• https://www.npmjs.com/package/grunt-image-resize