Is CSS-Sprite a Good Technique

Is css-sprite a good technique?

Yes, it is a good technique.

You can reduce the number of HTTP requests and it is a page optimization technique.

The first rule in

Best Practices for Speeding Websites by Yahoo

Minimize HTTP Requests

80% of the end-user response time is
spent on the front-end. Most of this
time is tied up in downloading all the
components in the page: images,
stylesheets, scripts, Flash, etc.
Reducing the number of components in
turn reduces the number of HTTP
requests required to render the page.
This is the key to faster pages.

CSS Sprites are the preferred method
for reducing the number of image
requests. Combine your background
images into a single image and use the
CSS background-image and
background-position properties to
display the desired image segment.

One way to reduce the number of
components in the page is to simplify
the page's design. But is there a way
to build pages with richer content
while also achieving fast response
times? Here are some techniques for
reducing the number of HTTP requests,
while still supporting rich page
designs.

When you need to change the dimensions of the images inside the sprite then you have to recalculate the offsets for the images. But I don't think this is a huge burden.

It is supported by almost all modern browsers.

This is also a good article on CSS sprites

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

What are the advantages of using CSS Sprites in web applications?

The question is generally not about the amount of bandwith it might save. It is more about lowering the number of HTTP requests needed to render a webpage.

Considering :

web browsers only do a few HTTP requests in parallel
doing an HTTP request means a round-trip to the server, which takes lots of time
we have "fast" internet connection, which means we download fast...

What takes time, when doing lots of requests to get small contents (like images, icons, and the like) is the multiple round-trips to the server : you end up spending time waiting for the request to go, and the server to respond, instead of using this time to download data.

If we can minimize the number of requests, we minimize the number of trips to the server, and use our hight-speed connection better (we download a bigger file, instead of waiting for many smaller ones).

That's why CSS sprites are used.

For more informations, you can have a look at, for instance : CSS Sprites: Image Slicing’s Kiss of Death

Css Sprite question, is there a better way?

You could combine the selectors like so.

#logo-link,#logo-link2
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-position:0 32px;
}
#logo-link:hover,#logo-link:active,#logo-link2:hover,#logo-link2:active {background-position:0 0;}

#logo-link{background-image:url(sprites/analytics.png);}
#logo-link2{background-image:url(sprites/addlisting.png);}

Alternatively you could add a class called sprite

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-position:0 32px;
}
.sprite:hover,.sprite:active {background-position:0 0;}

#logo-link{background-image:url(sprites/analytics.png);}
#logo-link2{background-image:url(sprites/addlisting.png);}

And the html

<a href="link1.html" id="logo-link" class="sprite"> </a>

<a href="link2.html" id="logo-link2" class="sprite"> </a>

Edit: Here is another alternative if you plan on using a sprite sheet.

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(spritesheet.png);
}
.analytics{background-position:0 0;}
.analytics:hover{background-position:0 0;}
.addlisting{background-position:0 0;}
.addlisting:hover{background-position:0 0;}

HTML:

<a href="link2.html" class="sprite addlisting"> </a>

And a jsfiddle
http://jsfiddle.net/gJkCZ/

When CSS sprites would be good to use and when not?

CSS sprites are best used for elements that have a fixed width and height. Otherwise, you need large empty spaces in your sprite image, which can (depending on file type) increase the size a bit.
Due to the way different file formats compress images, sometimes a CSS sprite image will have a noticeably smaller file size than the total file size of separate images. That’s a nice bonus.
As mentioned, sprites reduce the HTTP request overhead, which can help load time. I’ve never seen any numbers on the magnitude of this effect.
Sprites will add a bit of time for your CSS developers. It shouldn’t affect your designers. But bear in mind that your developers code the site up once; the benefits of sprites apply every time someone looks at the site.

Are large CSS sprites a good idea?

How large is large?? 3 seconds seems absurd. If you're loading every-image-under-the-sun then no, it's not a good idea. You may also need to look into image optimization (what format is it currently in? Can you post the sprite?)

Basically it's a trade-off. If you're using 1/2 of the images in the sprite on your page, it's fine because you get more of a gain through the fewer HTTP connections then you do a waste for the unused images. If you're using 1% of the images in the sprite, it's not worth it.

As far as your 2nd question goes -- absolutely do that if the sprite needs to be as large as it currently is. You'll see very little loss due to loading one extra small image. The point of sprites is to reduce HTTP connections from 100->10, for example. 10->11 isn't a big deal.

Are image sprites actually more efficient than separate images?

Using an image more than once in a page doesn't mean that there is one copy of the image for each place where it is used.

If it did, a page like this demo fiddle would use around 7 GB of memory. It doesn't.

Loading one image is always faster than loading several images. Reducing the number of requests is important when optimising the performance of a site. The fact that the internet is designed to transmit small packages only makes the impact of loading several small images less than it could have been.

when not to use CSS sprites?

Maintainability of your site will suffer from using them. Only combine images that belong to the same logical unit and are unlikely to be updated separately. Keep images that are likely to change separate to begin with.

Is using the logo tag in sprites good or bad?

A logo is part of the content of your site, therefore it should be in an img tag, not as a background image. It will help to increase SEO (adding a title and alt attribute will too) and the reason companies like Google, Facebook, et al put their image in a sprite is for load times - not SEO enhancement.

Does your company have the same SE rank as Google or Facebook? No. Until then, keep putting the logo in an img tag where it belongs. When your site is consistently the most viewed site on the internet, then you can start thinking about performance more than SEO.

Also, as an aside, if the logo ever had a tweak (size, color, etc), the sprite would have to be recreated as well as the CSS. If it was just an img tag, this hassle is nonexistent.

Is CSS-Sprite a Good Technique