With the launch of the new iPad all websites instantly became pixelated and ugly. All your neat images and sprites and stuff is now rubbish. You’ll need to remake it all. In double the size.
There’s no easy way to remake all graphics. I just hope you still have the vector originals as start. However, the problem isn’t that you have to recreate all graphics. The problem is that you have to serve the retina graphics only for the iPad while serving the normal graphics for computers. And you cannot change the width or height of the divs containing the background graphics since that will only display a very large pixelated image instead av a small crisp image. Think that you have to fit that large bird into the small bird’s square.
Making your sprites retina proof
The first very important thing is that the graphics must be exactly double in size in order for this to work.
This example HTML first renders a list of 3 icons without support for retina. The latter adds retina support.
1 2 3 4 5 6 7 8 9 10 | <ul class="sprites"> <li class="rss">RSS</li> <li class="youtube">YouTube</li> <li class="delicious">Delicious</li> </ul> <ul class="sprites retina"> <li class="rss">RSS</li> <li class="youtube">YouTube</li> <li class="delicious">Delicious</li> </ul> |
The CSS styles the LI list to contain the sprite as background image.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | ul.sprites, ul.sprites li { list-style: none; padding: 0; margin: 0; } ul.sprites { clear: left; padding: 50px; } ul.sprites li { background-image: url('icons-sprite.png'); background-repeat: no-repeat; background-position: top left; width: 128px; text-indent: -9999px; height: 128px; float: left; margin-right: 10px; } |
We then reposition the background for every icon to display the correct background for the icon.
1 2 3 4 5 6 7 8 9 | ul.sprites li.rss { background-position: 0px 0px; } ul.sprites li.youtube { background-position: -128px 0px; } ul.sprites li.delicious { background-position: -256px 0px; } |
That was all basic stuff. Here’s the fancy stuff!
We add a media query to only target screens with retina displays and we change the sprite used for background-image to another one twice as big. We append the suffix @2x to keep it organized. Then we set the background-size to the total width of the normal sprite image, or half the width of the retina sprite image, if you will. This is where it’s important that the retina graphics is exactly 100% larger than the normal ones. Otherwise it won’t display properly.
Finally we need to re-position the backgrounds for the icons again.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { ul.retina li { background-image: url('icons-sprite@2x.png'); background-size: 384px; } ul.retina li.rss { background-position: 0px 0px; } ul.retina li.youtube { background-position: -128px 0px; } ul.retina li.delicious { background-position: -256px 0px; } } |
Voila! You’re done!
Now it’s retina proofed! Notice that you didn’t need to do much coding at all? No magic JavaScript or anything?
[...] make sure the Retina sprite is exactly 2X the size of the normal sprite). Andreas Norman wrote a great blog post about sprites & Retina media queries which explains this technique in a bit more [...]
I’ve been trying to find out, perhaps you know: with this approach, do HDPI devices download both the 1X and 2X images or are browsers smart enough to only download the 2X?
I’m afraid the device will download both. You’ll need a server side request handler to decide what stuff to download depending on user device.
Some CMS like Episerver CMS 7 the CMS handles that. WordPress doesn’t do that. Yet.