CodeRelic.com

With newer technologies like the retina display popping up, being able to take advantage of the retina display is a huge advantage.  The retina display is currently supported by iOS, however there are rumors the retina display will be coming to Apple’s MacBook line.   That means the high resolution people are building for applications, is soon coming to the web.  Or, for that matter, this would be a really good starting place for making web applications use the retina display.

If you’re unfamilliar with spritesheets, and how they can help your site, you should look into it.  Otherwise, I’m going to show you how you can optimize your sprites very easily with a vector Photoshop file, and a few lines of code.

This is our sprite sheet:

You can see there are three assets in the file, the logo, and two buttons.  My markup is pretty normal for a sprite sheet, it has a few divs, with the regular sprite CSS applied to them:
index.html:

<div class="sprite logo">BlasphemyApp</div>
<div class="sprite add_contact menu">Add to Contacts</div>
<div class="sprite message menu">Send Message</div>

style.css:

.sprite {
	background-image:url('../img/spr_regular.jpg');
	color:transparent;
	text-indent:-9999px;
}
.logo {
	background-position:0 0;
	width:308px;
	height:50px;
}
.menu {
	width:104px;
	height:102px;
}
.add_contact {
	background-position:-1px -49px;
}
.message {
	background-position:-104px -49px;
}

The problem with regular sprites, is on iOS, and other high-DPI devices, it causes the images to look really poor quality. You start to see pixels, and pixels look ugly on a product that is supposed to be polished. So this is where we begin. Open up your spritesheet in Photoshop, hopefully your source file is in Vector format, otherwise you may need to do some tweaking.
Go to Image > Image Size and make sure all three checkboxes on the bottom are checked. Take the value of “width” and double it. For our example, I took 308 to 616.

From there, save your sprite sheet as something else, for example, I called mine sprite_retina.jpg (png, gif, whatever best fits your application)
If you are curious, here is my new retina display spritesheet. Same as the other one, but twice as big.
From there, you need a slight modification to your CSS.

.sprite {
	background-image:url('../img/spr_retina.jpg');
	background-size: 308px 252px;
	[..]
}

The CSS background-size property scales the background to the width and height of your original spritesheet, making all the extra pixels scale — filling in all the extra pixels in between the pixels. On high DPI devices like phones (it REALLY makes a difference on iPhones), or perhaps the up and coming Mac Books with retina display, it makes elements look much cleaner. Check out an example , or scan the QR code below and try it on your phone.

Download my demo source, fiddle with it yourself on JSFiddle, or view it on GitHub.

This entry was posted on Wednesday, May 23rd, 2012 at 11:14 am and is filed under CSS, HTML5. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.