Grow your CSS skills. Land your dream job.

Downsample (vs) 2X for retina images?

  • # August 20, 2013 at 8:09 pm

    Hello everyone,

    I’m looking at 2 different methods for displaying Hi-Res icons (png) for retina displays. Both methods work properly, but I’m curious if there is a preferred practice for this.

    EDIT: I’m leaning towards the second method because it will guarantee 1:1 pixel mapping as apposed to downsampling calculated by the browser.

    Method 01 One image (80×80) downsampled to (40×40) using background-size property

    .icon {
          background:  url(icon80.png);
          background-size:  40px 40px;
     }
    

    Method 02 Two images (40×40) and (80×80) using min-device-pixel-ratio property to target retina screens.

    .icon {
          background:  url(icon40.png);
          background-size:  40px 40px;
     }
    
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    
         .icon { background:  url(icon80.png); }
    
     }
    

    Suggestions are welcome. Thank You.

    # August 27, 2013 at 2:26 pm

    If its purely for icons, you could look at using SVG’s?, the benefits would be that you’re not relying on something like background-size (which if your supporting ie8 for example) is a pain in the ass. It should be more future-proof and still look super crisp on non retina devices plus you’ll have less assets to manage/update

    http://caniuse.com/#search=background-size

    # August 28, 2013 at 7:53 am

    @basement31

    Thanks for the input. I a actually prefer using SVG, but in this case I’m purely interested in png for the above question.

    # August 29, 2013 at 1:14 am

    I don’t know a great deal about this, but it seams to me like they’re both basically the same methods just in different orders, like saying which is the best way to make 20,

    10 * 2 or 2 * 10 ?

    Ed
    # September 1, 2013 at 7:59 am

    Downsampling isn’t ideal, because it means users on a non-high DPI screen have to download an image twice the size they’ll view it at.

    That means it’s slower for them and essentially you’re punishing them for not having a non-high DPI display… Don’t do that.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".