SmartSprites
  1. SmartSprites
  2. SMARTSPRITES-87

CSS background-size support for Retina/HiDPI displays

    Details

    • Type: New Feature New Feature
    • Status: Resolved
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 0.2.9
    • Labels:
      None

      Description

      Taking the background-size CSS property into account when generating offsets would further extend the use of SmartSprites. The property has the effect of scaling the background image into different size. One emerging use of it is for web pages targeting HiDPI displays, e.g., Apple's mobile devices with Retina display. (See: http://weedygarden.net/2010/10/retina-display-and-css-background-images/)

      SmartSprites currently assumes the background-image is always displayed with 1:1 ratio while generating offsets in background-position properties. To support the same scaling effect with sprites, it will need to first compute the aspect ratio of the original image, and generate the correct background-size for the sprite. That will be as simple as applying the ratio of the original image's width (height) to the displayed width (height) to the sprite's width (or height, respectively). Then, the offset in background-position need be adjusted applying either the width's or height's ratio depending on the sprite's layout.

      I'm very grateful to have this extremely useful tool around me, yet because of this missing feature, I couldn't reuse larger images for smaller spots but simply generate scaled-down version for all of them significantly increasing the size of the sprite in one of my project. I suppose implementing it would be pretty straightforward if we invent another SmartSprites directive instead of parsing the CSS. However, adding this could have some impact on other planned features since it might interfere with them. I might be able to spend some time hacking the code sooner or later, but if you find this request simple enough, please make it happen.

      Thanks!

      ~Jaeho

        Activity

        Hide
        t added a comment -

        Any work planned on this? This is becoming more and more important for our customers and the web in general. If no work is planned is there a work around? This really puts us in a tough spot because we are either left with not supporting retina displays or supporting them and not using smartsprites and there by having a major performance loss.

        Show
        t added a comment - Any work planned on this? This is becoming more and more important for our customers and the web in general. If no work is planned is there a work around? This really puts us in a tough spot because we are either left with not supporting retina displays or supporting them and not using smartsprites and there by having a major performance loss.
        Hide
        Stanisław Osiński added a comment -

        Please take a look at this fork:

        https://github.com/dpolivy/smartsprites

        I'm hoping to integrate it very soon.

        Show
        Stanisław Osiński added a comment - Please take a look at this fork: https://github.com/dpolivy/smartsprites I'm hoping to integrate it very soon.
        Hide
        t added a comment -

        Thanks Stanislaw. That was quick. Your work is much appreciated. Thanks again a million!

        Show
        t added a comment - Thanks Stanislaw. That was quick. Your work is much appreciated. Thanks again a million!
        Hide
        Stanisław Osiński added a comment -

        That patch isn't my work, actually. Credit is due to: https://github.com/dpolivy.

        Show
        Stanisław Osiński added a comment - That patch isn't my work, actually. Credit is due to: https://github.com/dpolivy .
        Hide
        t added a comment -

        Hi Stanislaw, any eta on 0.2.9? We prefer to use official blessed version rather than a fork. Thank you.

        Show
        t added a comment - Hi Stanislaw, any eta on 0.2.9? We prefer to use official blessed version rather than a fork. Thank you.
        Hide
        Stanisław Osiński added a comment -

        Pull request merged and polished, documentation added.

        Show
        Stanisław Osiński added a comment - Pull request merged and polished, documentation added.
        Hide
        Stanisław Osiński added a comment -

        Here are the 0.2.9 official binaries: http://download.csssprites.org/smartsprites-0.2.9.zip. I'll be putting them on the website and in the Maven repository later today.

        Show
        Stanisław Osiński added a comment - Here are the 0.2.9 official binaries: http://download.csssprites.org/smartsprites-0.2.9.zip . I'll be putting them on the website and in the Maven repository later today.
        Hide
        Stanisław Osiński added a comment -

        I've just pushed the official 0.2.9 download. 0.2.9 JARs should soon propagate through Maven repositories too.

        Show
        Stanisław Osiński added a comment - I've just pushed the official 0.2.9 download. 0.2.9 JARs should soon propagate through Maven repositories too.
        Hide
        t added a comment -

        Thank you so much. Very much appreciated.

        Show
        t added a comment - Thank you so much. Very much appreciated.

          People

          • Assignee:
            Stanisław Osiński
            Reporter:
            Jaeho Shin
          • Votes:
            1 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Time Tracking

              Estimated:
              Original Estimate - 16h
              16h
              Remaining:
              Remaining Estimate - 16h
              16h
              Logged:
              Time Spent - Not Specified
              Not Specified

                Development