Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • Mar 26 2011

    Create Fast Loading Websites with CSS Sprites

    There are many aspects that need to be focused upon while creating a site in order to achieve a balance of visual attractiveness and functionality. This makes designers and developers to apply a wide range of techniques that combine to offer a friendly web experience to users. Here we are going to discuss one such technique, the usage of which has considerably increased specially to reduce the loading time of the site and is called CSS Sprites.

    What CSS Sprites does?

    It is obvious that a large number of images will cause a site to take extra time for loading. As a result, pages will load slowly and the visitor will have to wait. To avoid this, the CSS property of sprites is used which ‘combines the various images to form a single image’ and helps a page comprising of images to load faster.

    How does it work?

    CSS Sprites are used in conjunction with background position property in CSS to create a master image which is a collection of a number of images.

    • First individual sprites are collected
    • Each of them is them placed together to create master image with proper spacing between them
    • CSS background positioning is used to set the position of the sprites or images

    How does it help?

    Every image if left as it is on a web page, and when a request is sent to the web server, it takes a lot of time for the page to load as all are separate images. However if such images are combined to form a single file and then positioned with CSS, the request made will be reduced to one (for multiple images).  The less the number of HTTP requests, faster is the site loading speed.

    Why to use CSS Image Sprites?

    • If a site has a large number of images to display in its pages, CSS Sprites make it easy to manage by creating a master image, reducing the file size and as well as loading time. Overall it will enhance the performance of a site.
    • The use of CSS Sprites reduces the number of HTTP requests which again help reducing the loading time.
    • CSS Sprites help in optimizing the web pages
    • Bandwidth can be saved using this CSS Property

    A Note

    It must be noted that every image cannot be used or is not suitable as a Background. However there is a possibility that developers in order to reduce HTTP requests may use an incorrect image. It can negatively affect the accessibility.

    How to make use of CSS Sprites?

    Creating CSS Sprites is not a tough job and with availability of several CSS Sprites generators, developers can now make use of this powerful technique to take advantage.

    We look forward to get valuable suggestions from the readers.

    Posted by Charu Garg Posted in: CSS Comments: 0