SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    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.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "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.

  4. #4
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you really have got to be carefull who's advice you take on these forums. havent you.

  5. #5
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrcoda View Post
    "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.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  6. #6
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrcoda View Post
    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.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  8. #8
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 !"

  9. #9
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    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.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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?

  11. #11
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    check the rollovers on www.rbcreations.co.uk/index.php at the top , these are li bg , sprites , what the problem with them then ?

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    That's a perfect use of sprites. Those are images are decoration, and are CSS backgrounds.

    You could do it in less code though.

    Code:
    <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
    Code:
    #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.

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    971
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •