CSS resize for retina images

Question

I've received a design for a website, divided into three psd's: one for desktop, one for tablet, one for smartphone. I'm making everything responsive with media queries and making everything retina too. One thing that has me bothering though is the following.

So, say, for example, you have a background-image for a Facebook link (icon). This icon is 48x48px in the desktop psd. That would automatically make the retina size 96x96px using the following css:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 
   #fb {
       background: url("../images/fb_2x.png") no-repeat;
       background-size: 48px 48px;
       width: 48px;
       height: 48px;
   }
}

BUT, when i look at the tablet and/or smartphone psd, i notice that the icon has been resized to fit the rest of the design. The icon is now 28x28px. How can i target both the retina version of this icon AND the difference in size per resolution. I was thinking i would change my retina media query css to:

#fb {
    background: url("../images/fb_2x.png") no-repeat;
    background-size: 28px 28px;
    width: 28px;
    height: 28px;
}

.. but that means that ALL the retina-capable screens (also ipad retina and macbook pro retina) would have that tiny icon size of 28px (though retina); but that's not the original size: it's 48x48px.

Thanks for the read and advice!

Answer 1

How about this progressive approach:

    #fb {
      background: url("../images/fb_28.png") no-repeat;
      background-size: 100% auto;
      width: 28px;
      height: 28px;
    }

    /* bigger image for desktop OR high resolution */
    @media (min-width: $desktop-size), -webkit-min-device-pixel-ratio: 2),  ( min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1),  (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { 
      #fb {
        background-image: url("../images/fb_48.png");
      }
    }

    /* bigger size for desktop */
    @media (min-width: $desktop-size) {
      #fb {
        width: 48px;
        height: 48px;
      }
    }

    /* bigger image for high resolution desktop */
   @media (min-width: $desktop-size) and (-webkit-min-device-pixel-ratio: 2),  ( min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1),  (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)) {
      #fb {
        background-image: url("../images/fb_96.png");
      }
    }