Retina images in sprites

[ai]

Now we need use bigger images for Retina like displays and resize images by background-size. But current sprite API don’t allow us to use retina images in sprite.

I can add this feature to Compass, but I don’t sure in API. I think about something like:

$icons: sprite-map("icons/*.png", scale-factor: 2)

.add
  +sized-sprite($icons, add)

or without shortcut:

$icons: sprite-map("icons/*.png", scale-factor: 2)

.add
  width: image-width(sprite-file($icons, add))
  height: image-height(sprite-file($icons, add))
  background: sprite($icons, add) no-repeat
  background-size: sprite-map-size($icons);

Which will compile to:

.add {
  /* Real size of icons/add.png is 40×40 */
  width: 20px;
  height: 20px;
  /* Real position is 0 20px, but we need to decrease it, because of background-size */
  background: url(/images/icons-8754a4545656.png) 0 10px no-repeat;
  /* Real width of sprite map is 40×200 */
  background-size: 20px 100px;
}

I don’t know what we can do with another sprite APIs, like:

@import "my-icons/*.png"
+all-my-icons-sprites

Maybe nothing, as I understand this API can have options.

Also I think about mixin name: sized-sprite or sprite-with-size.

Anyway, I think, that this mixin is very useful without Retina support too. I always set image size to sprite block.

If idea and API (and extra sized-sprite mixin) is good, I will start development.

[krisbulman]

there was a similar issue and pull request to this 3 months ago #977 but it was closed by @chriseppstein

There have been a number of other efforts around this as well outside of compass (but rely on compass)

https://github.com/Snugug/toolkit/blob/master/compass/stylesheets/toolkit/_pe.scss

https://github.com/krisbulman/retina-sprite-mapper

https://github.com/AdamBrodzinski/Retina-Sprites-for-Compass

Regardless of the closed pull request, I do think that some solution to this in Compass is a good idea.

[ai]

Best API will be if I have some Retina images and Compass automatically create non-Retina version for common displays (just create 2 sprite maps, with original imagea and with downscaled).

[scottdavis]

making a retina engine is ok with me it would involve just making another https://github.com/chriseppstein/compass/blob/master/lib/compass/sass_extensions/sprites/engines/chunky_png_engine.rb that would handle down scaling by 50%. Also, the imported would need to be able to account for a new option that would enable all of this.

[barraponto]

What about http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss

[krisbulman]

I think the retina engine is the right path to follow if it's going into Compass.

As for other projects that do something similar, Glue does a great job at this: http://glue.readthedocs.org/en/latest/ratios.html providing configurable ratios and automatic image sizing/sprite creation.

[scottdavis]

If someone wants to take the lead on this i will work though it with you

[krisbulman]

To future proof it for pixel density changes in new devices, configurable ratios, (1.3, 1.5, 2, x) are probably a good idea.

And I just realized we can get around the opera fraction requirement (13/10, 3/2, 2/1) by using values of 100. (which is what Glue does)

e.g. 1.5 * 100 / 100 = 150/100

@mixin retina-ratio($ratio: 2) {
  $dpi: $ratio * 96;
  $opera-ratio: $ratio * 100;
  @media
  only screen and (-webkit-min-device-pixel-ratio: #{$ratio}),
  only screen and (   min--moz-device-pixel-ratio: #{$ratio}),
  only screen and (     -o-min-device-pixel-ratio: '#{$opera-ratio}/100'),
  only screen and (        min-device-pixel-ratio: #{$ratio}),
  only screen and (                min-resolution: #{$dpi}dpi),
  only screen and (                min-resolution: #{$ratio}dppx) {
    @content;
  }
}

We could bypass needing to set ratios altogether by reading them from the filename, that way, it's much easier to manage icons with their counterparts in the same folder.

example:

icons/
icon@2x.png

The @2x, @1.5x, etc would determine the size of the image to downsize to, and the ratio value to be sent to the retina-ratio() mixin. If a non-retina version already exists with the same filename before the @, then no non-retina version is created at all.

Thoughts?

[aleksandargosevski]

I've created mixin for retina sprites, where you need to cut only retina slices and mixin handles everything.
Basically mixin divide dimensions and positions by 2. Maybe there is somewhere same or simular solution, didn't googled.

Hope this will help.

$icons: sprite-map("icons/*.png", $spacing: 3px);

@mixin responsive-sprite($icon) {
    $iconname: "icons/#{$icon}.png";
    $iconwidth: round(image-width($iconname)/2);
    $iconheight: round(image-height($iconname)/2);

    $pos: sprite-position($icons, $icon);
    $posx: round(nth($pos, 1)/2);
    $posy: round(nth($pos, 2)/2);

    width: $iconwidth;
    height: $iconheight;
    background: sprite-url($icons) $posx $posy no-repeat;
    @include background-size(round(image-width(sprite-path($icons)) / 2) round(image-height(sprite-path($icons)) / 2));
}

[afewyards]

the thing with making retina sprites and their positions on the sprite map. is that if you divide them they can return half pixels if they are positioned on a odd x or y axis.

I fixed this in this pull request.

#1392

[julkue]

👍 And also a margin inside the sprites should be possible to add (like implemented in "Glue")