Give help. Get help.

  • # 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.

    # 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 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.