More and more devices have a high pixel density display (also known as retina / amoled) these days. Images which are not optimized for these displays may look unsharp. Fortunately for us, there is a media query to target those devices. Let's see it in action!
A live demo can be seen below. It contains all the source files (including images!) for your inspiration. Of course you'll only be able to see it properly on a retina display (or similar).
Just take a look at the last row of the demo and you'll clearly see the difference!
After working on the demo I decided to create retina images for all the icons used on this blog. You might have noticed them in the sidebar (not visible on mobile), the footer, homepage for the blog categories and the search icon.
The demo uses a single sprite, including the retina and non-retina icons, for all the social media buttons. In this way I could use the same background-image and just had to reposition the sprite.
.icon {
background: url('../img/social-icons.png') top left no-repeat;
}
.icon.twitter {
background-position: 0px -32px;
}
.icon.facebook {
background-position: 0px -64px;
}
/* Media query to detect retina display*/
@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
.icon {
/* same image here, just different display size */
background-size: 150%;
}
.icon.twitter {
background-position: -16px -32px;
}
.icon.facebook {
background-position: -16px -64px;
}
}
A different technique was used to set the retina icons for this blog. Here the background image has been replaced so the original background-position can stay exactly the same. I believe this technique is easier to implement, but the browser will load both images (the retina and non-retina sprites) which probably causes a longer pageload (extra request) compared to a single sprite.
Another difference is the background-size property. The demo uses a percentage value (which I found easier because of the single sprite) and the blog uses pixels. The value should simply match the size of the original (non-retina) image,
.icon {
/* this image is 32x192 pixels */
background: url('../img/social-icons.png') top left no-repeat;
}
.icon.twitter {
background-position: 0px -32px;
}
.icon.facebook {
background-position: 0px -64px;
}
/* Media query to detect retina display*/
@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
.icon {
/* only a different image and size */
background-image: url('../img/social-icons@2.png');
background-size: 32px 192px; /* the size of the original social-icons.png */
}
}
If you like to learn more about Retina displays and CSS, I'll recommend reading this article on Smashing Magazine!
Just a funny side-note to end this post: I usually have my macbook set up in a dual-screen mode. My second screen is a non-retina display. When moving the browser from the non-retina screen to the retina screen, the icons change to retina icons very fast! They even seem to change as soon as the icon enters the retina screen (setting the browser in between screens and scrolling back and forth). Isn't that great?!