When Not to Use CSS Sprites

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.

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

Is there a better solution than CSS sprites?

Not really an expert on this but I had my share in these thing also

HTTP Requests

Ever heard of the "2 concurrent connections" (recent browsers have around 6-8). Loading a lot of stuff means if 2 are loading at the same time, the others have to wait in line. Loading it in one big chunk is better. This is the main reason why spriting is used. Aside from the connection limit, you manage those "same purpose" images in one image.

Cache

Now, one big chunk I say but you might ask "Does that make it even worse?". Nope, becasue I have an ace up my sleeve and that's where "cache" comes in to play. One page load is all you need, and then, poof! The rest of the pages that need that image are like the speed of light and Saves you from another HTTP request. Never underestimate the power of the cache.

Images

Other things you can do is to optimize your images. I have used Fireworks and I really love it's image optimization tools. To optimize, here are personal guidelines i follow which you can use in your situation:

GIFs for icons, JPGs for images, PNGs for transparent stuff.
remove unused colors. yes, you can do this in some tools. cuts down size
never resize images in the html. have resized versions instead.
lose quality. yes, there is such thing. lower your image quality to reasonable limits. losing it too much makes your image too "cloudy" or "blocky"
progressive loading images. What it does is it "fast-loads" a blurred image then clears it up later.
avoid animated images. they are a bloat, not to mention annoying.

Server Tricks

There are connection limits - but that does not prevent you from using other domains or even subdomains! Distribute your content to other domains or subdomains to increase the number your connections. For images, dedicate a subdomain or two for it, like say img1.mysite.com and img2.mysite.com or another domain mysite2.com. not only is it beneficial for your user, it's beneficial to distributing server load.

Another method is using a Content Delivery Network (CDN). CDN has a global network of servers, which contain "cached" versions of your website resources. Like say i'm in Asia, when i view your site with CDN'ed resources, it finds that resource in the server nearest Asia.

Mark-up

Not necessarily related speed and semantics but the use of id should be reserved for more important purposes. If you use ID to mark images for their styles, what if there was another element that needs the same image? IDs need to be unique, they can't be used twice. So i suggest using multiple classes instead.

also, IDs take precedence over classes. to avoid unexpected overrides, use classes. learn more about CSS specificity.

.sprites {
    background-image:url('folder/spritesheet.png');
    background-color:transparent;
    background-repeat:no-repeat;
    display:inline;
    height:16px; /*same width and heights? place them here instead*/
    width:75px;
}
.png3  {
    height:16px; /* in cases you need a different dimension, this will override */
    width:75px;  
    background-position:0px 0;
}
.png5  {
    background-position:-75px 0;
}

$classy = "png" . $db_field['imageid'];
echo <img src='transparent.gif' class='sprites {$classy}' alt='alt' align='absmiddle'/>";

CSS Sprites - not only for background images?

You can use a standard <img /> tag and put it in a container (like a <div />) with a limited height/width. Then use relative positioning or negative margins to control the position of the image.

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

why do sprites not work with a general background?

To answer your first question:

If the browser finds an image in a Style Sheet, it will download it and then store it in your browsers cache. The next time that same image is found/requested in a Style Sheet from the same URL (even during the same initial page load), it will be served from cache. NOT re-downloaded. So while you may have spritesheet.png 3 times in your Style Sheet, it is only downloaded once and not wasting bandwidth or page loading speed.

It is because of this caching feature that sprites are favoured in providing things like icons and other smaller images.

For your second question on why your first CSS example does not work, it could be any number of issues ranging from a simple typo, or all the elements you are wanting to use the sprite with not having the sprite class.

In order to properly help you with this problem, we need to see your HTML that goes along with the posted CSS. Please make an edit your question and add your HTML as a code snippet.

background-image: to sprite or not to sprite?

I don't think there's one definitive answer to this. Opinions will differ according to need and individual preference.

My guideline is to always evaluate the benefit for the end user vs. the benefit for the developers. ie. what is the real value of the work you're doing as a developer.

Reducing the number of HTTP requests is always one of the first things to fix when optimizing a web page. Proper usage of caching can achieve much of the same thing as using sprites does. After all, very often graphics can be cached for a really long time.

There might be more benefit from minimizing scripts and stylesheets rather than adding graphics into a sprite.

Your code for managing sprites might increase complexity and developer overhead, especially as number of developers increases.

Learning proper use of cache-headers and configure your web-server or code properly might often be a more robust way of improving performance in my opinion.

Why not sprite larger images that are page content?

You could, but:

Content images don’t tend to be re-used as much as UI-type images like icons. Imagine a newspaper site: if every content image they used in every story was part of a sprite, that sprite would very quickly get huge, and would be downloaded even by users who only looked at one story.
Website content is generally expected to be maintained by people who don’t know CSS. It’s a bit unreasonable to expect content editors to edit a master sprite image file, re-save out to a JPG, and pop in some CSS just to put an image on a page.
If you sprite a lot of large image files, the sprite file will get really large. It might take an unacceptably long time to download when the user first visits the page, or it might use up too much bandwidth on users who only end up seeing one of the images within the sprite.

Obviously, those are generalisations — in a specific situation, it might make perfect sense to sprite larger/more content-y images.

On using an <img> tag with a tiny transparent image file for sprites, you can do that for any sprite images — it’s often useful for clipping and positioning the sprite image beyond what background-position allows.

CSS sprite vs Image during browser zoom

If your sprite size is 200x200 px, and you want to get better resolution by zooming - make you background-size: 100px 100px;. So if you will zoom to 200% - the quality of you image will still be good. Obviously, your sprite image should be twice bigger the size you are going to use on your website. To avoid problems - do not mix % and px or any other different units in one background-size. Use only px in your case and everything will work just fine.

Summarizing. Make sprite twice bigger, set background-size twice smaller the size of sprite image. Tested it in Chrome and FF. Works fine on zooming.

If you are familiar with svg files - try to do your own vector font (for icons) using http://fontastic.me/. No scaling issues will disturb you. You can set size by font-size and make them any color by color in CSS, like a text.

When Not to Use CSS Sprites