Retina Display Programming

CSS stylesheet for Retina Images

I noticed that a lot of websites don't even take advantage of the new retina screens for mobile devices. Now, some people will claim that you can't even tell the difference. Well I suppose it depends. If we are talking about a blog image that is already saved at 80% quality, you might be right, but what about company logos? I'm sure it's not that much of a hustle to get the logo adjusted. And yes, if you are looking at two images side be side, you can definitely tell the difference. The edges look smoother on the higer quality screen.

So here's what you do, get your logo, or any other image that's high quality and save it with two sizes. For instance if your logo is sized 200px by 200px, save one image as logo.png at the size 200px by 200px, and save one image as logo@2x.png at the size 400px by 400px. If your logo is not yet a background image, adjust that and play with the provided css to get your 2x quality images. This also works with browsers that use zoom.

<style>
    #logo { 
        background:url('logo.png') no-repeat; 
        width:200px;
        height:200px;
    }
    
    @media only screen and (-webkit-min-device-pixel-ratio:2),
    only screen and (-moz-min-device-pixel-ratio:2),
    only screen and (-o-min-device-pixel-ratio:2),
    only screen and (min-device-pixel-ratio:2){
        #logo { background:url('logo@2x.png') no-repeat; }
    }
</style>