Scribd Logo
Upload

Welcome to Scribd!

  • CSS Sprites

    Uploaded by

    Sumit Jayaswal
    428 views4 pages
    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.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    428 views4 pages

    CSS Sprites

    Uploaded by

    Sumit Jayaswal
    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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