Do you think it is because it organizes images better? Not at all.

So why? They are also harder to maintain when an image has to be updated.

I forgot to ask in the first place: do you know what image sprites are? They are images in which you append all the images you are going to use in your CSS.

Here’s an example from Amazon:

The reason this is a best practice is because of how the HTTP protocol works, and because we want to minimize the time a webpage takes to load (there are many reasons why you should want to make your site load faster, one of them is because Google incorporated a while ago site speed in it’s ranking algorithm) HTTP is a non-connection based protocol, this means that for every request the browser does a new connection has to be done and the route to the server has to be recalculated. So, if every image was in the same file, the browser saves multiple requests.

Google Page Speed Labs suggest using image sprites as medium priority, and gives important recommendations about.

Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page. – Google Page Speed Labs

Every request the browser does is divided in steps: DNS lookup, connecting, sending, waiting, receiving. We can use firebug to see all of the requests done during the loading of a webpage.

Net activity for image resources monitored by Firebug

I took a WordPress theme and measured the time taken for every image resource at each step (ok, Firebug did that, not me) and calculated that 38.8% of the time corresponds to latency (in this case latency = DNS lookup + connecting + sending), while only 14.4% corresponds to downloading data (the 46.7% remaining corresponds to waiting for the server to respond). Latency time should be minimized, since it’s not time invested in actually downloading the resources the browser needs to show.

Steps DNS lookup, connecting and sending are redundant for every static image request on the same server. So, how can we cut them off? Guess what? Using image sprites! Every image request will be grouped in only one, resulting in only one set of latency time for all the image kilobytes the browser is going to download.

It is important to make clear that commonly not every image is grouped into one and only image sprite. As you could guess, image backgrounds will be left aside and images used in content too. Image sprites result being the container of icons, bullets, buttons, sliding doors backgrounds, etc. And of course, sprites only contain equal images types (PNG or GIF).

It is highly unrecommended to make JPG sprites, because of how JPG images are compressed.

This post about image sprites in Smashing Magazine has articles with code examples, screencasts, techniques, sprite generators, etc.

If you are searching for a tool to make CSS sprites, I would recommend SpriteMe.org. You’ll be amazed about what this tool is capable of: it suggests which images can be grouped in a sprite, it generates the sprite by its own, gives you the CSS code, and tests it live!

I hope you learnt something new, or fully understand the techy side of this, or at least enjoyed reading this article as I enjoyed writing it on my iPhone on a bus heading to Ciudad Quesada, Costa Rica.

In this case, I am using my friend selectors :before and :after to accomplish something that normally would require HTML code (supposing we are avoiding loading images).

The HTML code is as simple as:

<div class="bubble">Hello World!</div>

And here’s the CSS:

/* the bubble is white, assuming it is floating over dark background */
.bubble{
color: #444;
background-color: #fff;

font-size: 24px;
height: 30px;
line-height: 1.2em;
padding: 0.2em 1em;

border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 5px 5px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 5px 5px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 5px 5px 0 rgba(0,0,0,0.25);

/* positioning relative to its parent */
position: absolute;
bottom: 10px;
right: 10px;
}
.bubble:before,
.bubble:after{
border-bottom: 10px solid #fff;
content: "";
height: 0px;
position: absolute;
right: -20px;
top: 10px;
width: 0px;
display: block;
border-right: 20px solid transparent;
}
.bubble:before{
top: 20px;
border-bottom: none;
border-top: 10px solid #fff;
}

It’s important to use RGBA to specify alpha transparency so no matter the background color it always will look as a shadow. Thats means: less code to edit if a color changes.