What is CSS Sprites?

CSS sprites is a technique to create a single image file that contains all the images laid out in a grid, requiring only a single image and only a single server call. It is a technique to decrease the number of HTTP requests made for image resources referenced by our site. It can be very effective for improving website performance, particularly in situations where many small images, such as menu icons, are used. CSS property “background-position” can be used to shift the visible area of the combined image. This technique has also been used on the Yahoo! home page.

Using CSS sprites can reduce the delay for certain events on web pages and making our website perform more efficiently and improving our visitor’s experience. On large sites, every little server call matters. This is one way to reduce server calls while maintaining separation of content from presentation, accessibility, and graceful degradation. Using CSS sprites takes a little extra care and planning. We have to keep track of the pixel position of each sprite, but that’s not much harder than keeping track of the paths for the individual image files this single file will replace.

Using CSS Sprite in web page

<html>
<head>
<title>CSS Sprite</title>
<style>
a#top-left { background: url(‘vikas_sprite.gif’) 0px 0px no-repeat; }
a#top-left:hover { background: url(‘vikas_sprite.gif’) 0px -210px no-repeat; }
a#top-left:visited { background: url(‘vikas_sprite.gif’) 0px -210px no-repeat; }

a#top-right { background: url(‘vikas_sprite.gif’) -130px 0px no-repeat; }
a#top-right:hover { background: url(‘vikas_sprite.gif’) -130px -210px no-repeat; }
a#top-right:visited { background: url(‘vikas_sprite.gif’) -130px -210px no-repeat; }

a#bottom-left { background: url(‘vikas_sprite.gif’) 0px -105px no-repeat; }
a#bottom-left:hover { background: url(‘vikas_sprite.gif’) -0px -315px no-repeat; }
a#bottom-left:visited { background: url(‘vikas_sprite.gif’) -0px -315px no-repeat; }

a#bottom-right { background: url(‘vikas_sprite.gif’) -130px -105px no-repeat; }
a#bottom-right:hover { background: url(‘vikas_sprite.gif’) -130px -315px no-repeat; }
a#bottom-right:visited { background: url(‘vikas_sprite.gif’) -130px -315px no-repeat; }
</style>
</head>
<body>
<div id=”mysprites”>
<a id=”top-left” href=”#”></a>
<a id=”top-right” href=”#”></a>
<a id=”bottom-left” href=”#”></a>
<a id=”bottom-right” href=”#”></a>
</div>
</body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s