Better retina sprite generation support

hisnameisjimmy commented 10 years ago

This could easily be the best tool for the job if it just automatically handled some things with retina sprite generation. Right now if I want to use this tool for sprite generation, I have to include another package to resize and rename the resulting image so that I end up with two images, one for regular display and one for retina/hi-dpi. I then have to modify the resulting CSS so that it only shows the retina sprite on retina displays.

Css-sprite does a much better job of this, automatically generating both images from @2x assets, then creating css that accounts for hi-dpi screens. This means I can watch the folder with my source images, update an image, and have my css and sprites updated without intervention on my part. It's a beautiful thing.

However! Css-sprite doesn't allow for binary-tree packing. This is especially a problem on iOS devices where there are image size limits. These image size limits cause issues with sprites generated in a vertical or horizontal orientation. You can see an example of this here: http://weedygarden.net/demos/hi-res-retina-sprites/ and an explanation of the size issues here: http://weedygarden.net/2012/04/hi-res-retina-display-css-sprites/

twolfson commented 10 years ago

This has been discussed previously and I have decided that spritesmith should focus on doing one thing well, which is building spritesheets. If we want to build a tool that compiles retina (or other scaled versions), then it should either leverage spritesmith's ability to do so or use its engines.

Main retina issue: Ensighten/spritesmith#19

hisnameisjimmy commented 10 years ago

While I empathize with project purity, I feel like this is mostly enhancing existing functionality, not steering the project away from its core.

The reason I would want this plugin to be aware of the scaled sprites is because it can then generate the appropriate CSS without user intervention. While I'm sure it's non-trivial to scale an image within the context of this plugin, it would be enormously useful. The CSS generation does seem like it would be relatively trivial though, with the addition of something like this to target the appropriate screen sizes:

.regular {
  background-image: url('regular.png');
}

@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  .regular {
    background-image: url('regular@2x.png');
    background-size: 5227px 606px;
  }
}

Both these things would be very helpful for someone using gulp for a RWD workflow.

Spritesmith already generates assets, why not have a retina enabled flag generate scaled assets as well?
Spritesmith already generates css, why not have a retina enabled flag generate a little bit more css so that retina screen density can be targeted

twolfson commented 9 years ago

As a heads up, gulp.spritesmith@3.5.0 now supports retina spritesheets. More information can be found here:

https://github.com/twolfson/gulp.spritesmith#retina-parameters

https://github.com/twolfson/gulp.spritesmith#retina-spritesheet

twolfson / gulp.spritesmith

Better retina sprite generation support #11