3

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?

5
  • css-tricks.com/css-sprites Commented Sep 11, 2012 at 15:31
  • 1
    Don't begin learning HTML and CSS with CSS sprites... Do you master background-position already?
    – FelipeAls
    Commented Sep 11, 2012 at 15:42
  • 1
    No. @FelipeAls. can you tell me where to start with...
    – user1662177
    Commented Sep 11, 2012 at 15:44
  • 1
    Learn HTML First. then CSS. then try to tackle Sprites. you might want to do Javascript before you try tackling sprites even?
    – Malachi
    Commented Sep 11, 2012 at 16:09
  • 2
    @Malione is right you should go for the basics first. Commented Sep 11, 2012 at 16:16

3 Answers 3

6

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.

3
  • 1
    Second 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.
    – user1662177
    Commented 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
5

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).

0
1

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