Retina images for the iPad using CSS3
Yesterday I was at a bar when ‘a guy’ entered with a plastic Media Markt bag containing two New iPads. The weird thing, it was 00:30PM and he just bought the iPad’s 10 minutes earlier. And if people start walking into bars with Retina iPads past midnight, I guess it’s really time to think about the impact of the high-res screens on our daily work as web developers.
Because websites look pretty bad on the 3th gen iPad. Images get blown-up.
When the iPhone 4 introduced the Retina screen in 2010, we had to update the graphics in native apps with images that are two times the original size. Apple quickly introduced a solution for iOS developers with the @2x format. If you’re not familiar with it: when you use an image, for example AwesomeLogo.png, adding a larger AwesomeLogo@2x.png is enough. You can still refer to AwesomeLogo.png.
This could be a great solution for mobile Safari on the new iPad (and iPhone4/s) as well, if the browser would check for a @2x image. As this isn’t the case, and we’re not sure if it will ever be, we have to come up with new solutions.
Looking for a solution I found this great Quora thread describing multiple solutions. It turns out you can focus on the Retina screen by using -webkit-device-pixel-ratio.
Let’s say we have a header containing an image called ‘AwesomeLogo.png’ that has an actual size of 100 x 100px. We can do something like this:
@media only screen and (-webkit-device-pixel-ratio: 1) {
.logo { background-image: url(‘AwesomeLogo.png’); }
}
@media only screen and (-webkit-device-pixel-ratio: 2) {
.logo { background-image: url(‘AwesomeLogo_2x.png); background-size: 100px 100px; }
}
The image targeted at -webkit-device-pixel-ratio: 2 is 200 x 200px. Even though an iPad3 is 2048 x 1536px it renders CSS as it was at 1024 x 768 px. Because of that we set the background-size to 100 x 100px (by a pixel-ratio of 2).
Great thing, we can even use the same tools and workflow as we’re used to for iOS development. I’m a big fan of Unretiner, a tool that creates ‘unretina’ versions of your high-res images.
I’m convinced that great people will make this even easier in the feature. Until then, this does the trick for default images of the website. Because it uses backgrounds in CSS it’s not a good solution for content images. If you’re not that scared of bandwidth usage, you could down-scale high resolution images. Be sure to check out this example by Duncan Davidson first.
