Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
454 views

CSS Sprites

This document gives an insight upon CSS sprites and how to use them. It also demonstrates the various css compression tools which are available online and free of cost. This document is going to help any web developer who is having an issue of too many small image loading.

Uploaded by

Sumit Jayaswal
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
454 views

CSS Sprites

This document gives an insight upon CSS sprites and how to use them. It also demonstrates the various css compression tools which are available online and free of cost. This document is going to help any web developer who is having an issue of too many small image loading.

Uploaded by

Sumit Jayaswal
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

CSS Sprites

1. What is CSS Sprites?


CSS sprites allow you to create a single file that contains all the images laid out
in a grid, requiring only a single image and only a single server call.
CSS sprites allow you to create a single file that contains all the images laid out
in a grid, meaning only a single image and only a single server call, with roughly
the same file size because the empty space is compressed. In that file, you will
place all individual "sprites" that make up your interface separated by enough
space that they don’t start running over each other. You’ll then set the
background position (using negative values to move the background up) and
include enough space around each sprite so that only it appears in the
background of the element, effectively masking the rest of the sprite images.
Using CSS sprites takes some care and planning. You 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.

2. Why to use CSS sprites?


a. To save bandwidth. Total images size is generally smaller, so less
download time for the user and less bandwidth consumption
b. To reduce HTTP server requests. Fewer images for the browser to
download, which means fewer requests to the server
c. And thus speed up page load times
d. No ugly mouse-over code. No javascript — only CSS!

If your individual images aren't already optimized, your file savings and
bandwidth savings can be substantially more than the numbers I show above.

In addition, you'll save even more if your images were embedded within the
HTML rather than used as CSS background images.

A nice bonus is that when you redesign it will be so much easier to swap out
those icons in your CSS when they're implemented as CSS background
images rather than all those icons being embedded within your HTML.

3. How to Use CSS Sprites?


You can generate CSS sprite using photoshop or using online sprite
generation tool, www.csssprites.com.
In the above online tool, you can select the images required per page.
To display this image... ...use this style
background-position: -9px -9px;
background-position: -9px -42px;
background-position: -9px -75px;
background-position: -9px -108px;
background-position: -9px -141px;
background-position: -9px -174px;
background-position: -9px -207px;
background-position: -9px -240px;
background-position: -9px -273px;
background-position: -9px -306px;
background-position: -9px -339px;
background-position: -9px -364px;
background-position: -9px -389px;
background-position: -9px -423px;

background-position: -9px -454px;

Code:
<?xml version="1.1" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


<head>
<title>CSSSprites.com generated page</title>
<script src="result.js"></script>
<style type="text/css">
body {
background: red;
}
div {
background: url('596bd9bf5fd4654a4ec79062510ef118.png');
}
</style>
</head>
<body>
<br /><br /><div style="background-position: -9px -9px; width: 16px;
height: 16px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -42px; width: 16px;
height: 16px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -75px; width: 16px;
height: 16px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -108px; width: 16px;
height: 16px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -141px; width: 16px;
height: 16px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -174px; width: 16px;
height: 16px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -207px; width: 16px;
height: 16px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -240px; width: 16px;
height: 16px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -273px; width: 16px;
height: 16px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -306px; width: 16px;
height: 16px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -339px; width: 8px;
height: 8px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -364px; width: 8px;
height: 8px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -389px; width: 17px;
height: 17px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -423px; width: 14px;
height: 14px">&nbsp;</div>
<br /><br /><div style="background-position: -9px -454px; width: 8px;
height: 8px">&nbsp;</div>

</body>
</html>

Note: The above information is generated while using the online css
sprites generator.

4. Alternative solution (for existing css):


You can visit http://smartsprites.osinski.name/ and follow the
instructions to generate css sprites for existing css.

5. Online tools to Compress your CSS


To use css compression, online css compress tools
• http://www.cleancss.com
• http://www.cssoptimiser.com
6. When not to use CSS sprites?
a. When the images are too big. The Sprites are not used for
image compression. It just reduces the HTTP requests of
comparatively smaller images.

You might also like