I read somewhere that css sprites are better than using simple images. How is that ? also I am new to Html so can anyone tell me how css works and give me a simple example for css sprites?
3 Answers
Here is the complete code. Copy and paste in a notepad and save it as abc.html
. Save the two images below in the same folder as:
image.gif
for big one and trans.gif
for small one.
<html>
<head>
<title>Image Sprites</title>
<style type="text/css">
img.sprite
{
width:46px;
height:44px;
background:url(image.gif) 0px 0px;
}
.sprite:hover
{
background: url(image.gif) 0px 44px;
}
</style>
</head>
<body>
<img class="sprite" src="trans.gif" />
</body>
</html>
In simple words, CSS sprites use only one image instead of many. So instead of many image requests from server only a single request is sent.
-
1Second image in my example is 1x1 pixel so i guess its lost in the background. Commented Sep 11, 2012 at 15:40
-
Ok. So i need a 1x1 pixel image for this example. I can make it photoshop.– user1662177Commented Sep 11, 2012 at 15:41
-
yeah better do it... and also make sure that image is transparent. Commented Sep 11, 2012 at 15:42
One trip to the server to get the images vs. multiple ones. I found SpritePad (online app) for building them, it will also generate the relevant boiler plate css (which can be a bit messy if your're starting out).
In basic terms - it allows you to load one image and use the said image on various elements around your page. Leading to less load requests and possibly load times.
Here's an example: http://www.thedotproduct.org/experiments/css-sprites/
and here is the sprite image used: http://www.thedotproduct.org/experiments/css-sprites/css-sprites-menu.jpg
background-position
already?