twolfson/spritesmith

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

arnisjuraga opened this issue · 3 comments

arnisjuraga commented

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 commented

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

arnisjuraga commented

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 commented

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: