Images ? Sprites or Inline ? when and where to use.

[mrcoda]

I was wondering when I should use sprites "combined images" and when not to. For example old browser or technologies that dont support them will just display text, unless you use inline images. So I am thinking keep the company logo inline and make backgrounds etc, sprites. Your thoughts please.

[logic_earth]

Use inline images when the image is part of the content. A company logo for example is part of the content, it is not decrotive. Images that there sole purpose is for decoration should not be defined in the HTML. Weather you use spirted images or not is of no concern or relavence.

[mrcoda]

"Weather you use spirted images or not is of no concern or relavence". SERVER REQUESTS , DOUGH ! EACH IMAGE REQUIRES A SERVER REQUEST, SO YOU PUT THEM ALL IN 1 SPRITE AND YOU CUT DOWN BANDWIDTH. no relevence to you , thats up to you.

[mrcoda]

you really have got to be carefull who's advice you take on these forums. havent you.

[logic_earth]

"Weather you use spirted images or not is of no concern or relavence". SERVER REQUESTS , DOUGH ! EACH IMAGE REQUIRES A SERVER REQUEST, SO YOU PUT THEM ALL IN 1 SPRITE AND YOU CUT DOWN BANDWIDTH. no relevence to you , thats up to you.

It has no relevance to the question you are asking. Your question is not about saving bandwidth. But when to define images in HTML and when not to.

[mrcoda]

Well sprites are about saving bandwidth, why else bother with them. The ultimate goal is reducing bandwith as much as posible without degrading the content, thats what this question is about.

[logic_earth]

Well sprites are about saving bandwidth, why else bother with them. The ultimate goal is reducing bandwith as much as posible without degrading the content, thats what this question is about.

If that is what your question is about, then maybe you should rehprase your question because what you asked has nothing to do with any of that.

[mrcoda]

maybe I should have yeh , but now you know, whats your answer. Sorry I shouldnt have been so sarcastic before.

The question is: sprites save bandwith and make all your images load in one go, which is advantageous. However there are browser issues and they dont show up on these. A logo is an imortant image to a company and its desirable for it to be see on all platforms and browsers, so its wise to have this as an inline image.

So when would you use sprites and when would you not and why?

question also available in childrens book form, if needed. "SORRY COULDNT RESIST THAT !"

[logic_earth]

The same as it was before. Use inline images for images that are part of the content. Images used for decrotive should be in CSS.

[Stomme poes]

I agree with logic_earth that using them where you have HTML images such as a company logo should be avoided in general. They can be great for small decorations like icons. A single image can make a great icon set. Google uses this.
It is possible to make sprites in the HTML but because this usually requires set dimensions on the parent AND overflow: hidden, this can be a bad choice unless the alt text has room. And, if you're moving the image around on :hover or :focus, the alt text will move too, so that's a place NOT to use traditional sprites.

However there are browser issues and they dont show up on these.

I'm unaware of any browsers used today by regular people that have trouble with sprites. Unless you really are writing pages for Netscape 4?

[mrcoda]

check the rollovers on www.rbcreations.co.uk/index.php at the top , these are li bg , sprites , what the problem with them then ?

[Stomme poes]

That's a perfect use of sprites. Those are images are decoration, and are CSS backgrounds.

You could do it in less code though.

<ul id="topnav">
<li><a href="index.html" id="h">Go to home page<span></span></a></li>
<li><a href="contact.html" id="c">Contact Information<span></span></a></li>
<li><a href="mailto:enquiries@rbcreations.co.uk" id="e">Send us an email<span></span></a></li>
</ul>

Now you can

#topnav {
  clear: left?
  float: right;
  min-height: 50px;
  margin: 10px 180px 0 0;
}
* html #topnav {height: 50px;} /*IE6... bleh*/

#topnav li {
  display: inline; /*IE*/
}

#topnav a {
  position: relative;
  float: right;
  width: 120px; /*home*/
  height: 35px;
  color: #000; /*heck, set a nice font family here as well, and font size...*/
}
        #topnav a span {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: url(images/nav_logo_sprite.gif) no-repeat 0 -608px;
        }
/*original span setting == home's setting, everyone else overrides*/

/*give non-image users some feedback*/
#topnav a:focus, #topnav a:hover, #topnav a:active {
  color: #that blue in the image...;
  text-decoration: none?
}
/*if IE bugs you...*/
        #topnav a:hover span {
          cursor: pointer;
        }

        a#h:focus span, a#h:hover span {
          background-position: 0px -658px;
        }

a#c {
  width:169px;
}
        a#c span {
          background-position: -20px -408px;
        }
        a#c:focus span, a#c:hover span {
          background-position: -20px -458px;
        }

a#e {
  width: 95px;
}
        a#e span {
          background-position: -20px -508px;
        }
        a#e:focus span, a#e:hover span {
          background-position: -20px -558px;
       }

Not tested, just rearranging yours.

What this does is when images are off, there's still text to be viewed. In fact, that text can be styled to imitate what your rollovers are doing. So, I've added more code for text. You want everyone to see some feedback when they hit a link, no matter if they have images or not, no matter if they have a mouse or not...

You've got a mystery meat menu right now, for anyone who, say, is in a busy wi-fi cafe where turning images off is the only reasonable way to get a page loaded before lunch?
or you screw up a path?
or the images load but on a slow connect take forever to load?
http://stommepoes.nl/Forms/noimages.png
Using Gilder-Levin in some form basically prevents this. And it's why I use it. There are lots of ways to do it though, I only listed one way.

[xhtmlcoder]

Basically it boils down to; alternative supportive text, interactivity (focus) - with IMG - and whether CSS or Images are disabled or unavailable (graceful degradation) as we've covered bandwidth anyway. Poes basically covered some of the other stuff.

[eruna]

Sprites are supported by any browser that supports background images which is all the ones I know of. One thing to consider is that compression looks better when there is a smaller color palette. So if you stack to many diverse images into a sprite it can reduce the clarity of the images. Personally, I always use them for navigation. And for icons like Facebook links.

[mrcoda]

I actually split the photographs from the line art into separate sprites, then you can get maximum compression on both, rather than mixing jpg and gifs, which will allways be bigger in file size as one counter acts the other.