Usefulness of Css Sprites
July 5, 2011 Comments Off When you start to project a web page, you must consider a lot of variables and parameters. My personal target is to create pages very light to get a fast download on our browser.
One of watchfulness I get to do this is to reduce server calls. Less calls means less net traffic. Less net traffic means less server work. Less server work means less server operating system work. Less of all means less client waiting time to render the page.
About images, I prefer to use Css Sprites everytime is possible.
Next picture shows you differences between simple images and sprites images.
………………….
As you can see, simple images are single files whereas sprites are all the same images in one file only.
The first benefit is what I just tell: only one server call compared to a lot of server calls. The second benefit as much the first is the images rendering in sync. In a page with a considerable number of icons, you can see all icons at the same time.
Run demo A (one file per icon) and demo B (one file for all icons) to appreciate the difference.
Another advantage is the look and feel during an over button effect. If you have an image for button-off and another for button-on, at the first over button event, you can see a bad effect. The browser has in cache only the button-off image: at the over event, client must do a call to the server to obtain the button-on image. The effect is a latency period when the button-off disappeared and nothing appears in place of it, because client must download the button-on image.
If you make a sprites containing both images, the problem won’t exists: when the button-off appears on browser, you have also button-on already on cache. At the first over button event, button-on appears immediately, without slack moment of no-image button.
See demo C and demo D to understand the difference.
Next time I tell you how you must handle sprites images on your CSS.
See you soon,
SteSic
