CODEWITHSUNDEEP
cssspriteretina-display
Blease
Blease

Reputation: 1420

Blurry icons on retina display

In my online application, I have some custom icons which are all on one sprite file. When I view the site on a device with a retina display, the icons are blurry

example

How can I make them sharper?

Upvotes: 1

Views: 1703

Answers (2)

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

Retina has 2x device pixel ratio therefore your image will be blurry.

Ex.

If your image is 20x20, your image in retina must be 40x40 to make it sharp. And you can use css media queries to swap images.

Here, I found some useful links for you.

http://www.hongkiat.com/blog/css-retina-display/

@media  only screen and (min-device-pixel-ratio: 2),   
        only screen and (min-resolution: 192dpi) {  
    /* Your 2x Sprite in here */  
}

Upvotes: 1

ralph.m
ralph.m

Reputation: 14345

One approach is to make the image larger (like 2x) and then resize it in the browser—by setting width/height if the image in inline, or with the background-size property if it's being used as a background image (which it probably is if you are using it as a sprite).

There's a helpful article here that explains the concept or retina-ready images nicely: http://blog.netvlies.nl/design-interactie/retina-revolution/

Upvotes: 1

Related Questions