Sprite your Images

A Sprite Image Example

Reducing HTTP requests is a great way to optimize your site. With HD images coming to websites it's best to create both a sprite.png and a sprite_@2X.png and use CSS3 @media queries or image-sets to add Retina-friendly graphics to your site. Here's an example of this site's main sprite image.

Positioning your graphics

The concept of image sprites is pretty simple. You have a very large, probably transparent image like the one above that contains all your graphics and is masked to only show the peice of the image you need. Let's take a look at the styling for these social icons that use the above sprite.

.icon-small {
	/* define the viewable area */
	/* set the image data */
	@include image-set('../img/sprite.png', '../img/sprite_@2X.png');
	/* crop as needed */
	&.email-icon-small {
		background-position:-164px bottom;
	&.twitter-icon-small {
		background-position: center bottom;
	&.skype-icon-small {
		background-position:-204px bottom;
	&.g-icon-small {
		background-position:-224px bottom;
	&.pinterest-icon-small {
		background-position:-244px bottom;

So each of the icons are 16px squares that use background positioning to crop the appropriate image data out of the sprite. Cool!

Using Image Sets

Image-sets are an awesome new way to serve HD images to capable devices using the familiar CSS background-image property. They are currently on available in Webkit enabled browsers. Consider both iOS and Android use Webkit, it will serve high resolution CSS images to all Retina devices, and other high resolution devices. It will not however cover as broad of a range of devices that you can use with CSS3 @media queries, but it's much simpler. As explained in this post on Webmoney, the CSS is as follows:

#selector {
        background-image: url(no-image-set.png); 
        background-image: -webkit-image-set(url(myimage.jpg) 1x, url(myimage-hires.jpg) 2x);
        /* other prefixes for -moz, -o and -ms go here */

You can use this handy SASS Mixin to make using image-sets within SASS as easy as:

@include image-set('../img/bedge_grunge.png', '../img/bedge_grunge_@2X.png');

Comments (0)

Add a Comment

Allowed tags: <b><i><br>Comment:

** Not my fault if your site gets too fast **