SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 52
  1. #1
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Google search engine uses sprites

    I thought this was pretty interesting, and sorry if this has come up before. I just noticed the Google search engine is using CSS sprites.

    See http://www.google.com.au/images/nav_logo4.png

    It fits all those little icons into the one PNG image so that it requires only one HTTP request to the server.

    I remember using this technique a few years back on a website of mine, though it was different then: I used the 'background' property in conjunction with background-position to position the image.

    Google is loading the image in the src attribute of the img element as normal, but they are using absolute positioning in conjunction with overflow:hidden. I guess this solves some accessibility problems, and the worst that can happen is that users on browsers that don't support CSS but do support images will see the entire image containing all sprites, rather than just the one logo.

    What I'm wondering now is, are techniques like this portable and accessible enough to rely on them solely, or do we need to browser sniff and present an alternate version to those user agents who may not handle this CSS rendering correctly. I'm guessing that Google browser sniffs, though I haven't checked this out.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog · Twitter · Contact me
    Neon Javascript Framework · Jokes · Android stuff

  2. #2
    SitePoint Enthusiast lordofthelake's Avatar
    Join Date
    May 2008
    Location
    Italy
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting consideration...
    Usually I use CSS sprites in my designs, but only using 'background' property, as you do.
    I didn't know it could be used also with regular <img> tags, that is pretty interesting, but I don't think this technique degrades so gracefully as the background-based one.

    And I don't like browser sniffs as solution... I see it too much open to side effects.
    But I presume that at Google they know what they're doing.

  3. #3
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have an example page of where Google is using this image in the way you said? In the pages I checked they were using it as a background image.
    Simple is beautiful.

  4. #4
    SitePoint Enthusiast lordofthelake's Avatar
    Join Date
    May 2008
    Location
    Italy
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doing a simple search, in the Italian version of Google, I see the same technique found by mmj. I'm using Firefox 3.0.4... What browser are you using, Aarem?

    If you use a different browser, it may be an evidence of some browser sniffing happening under the hood..

  5. #5
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Aarem View Post
    Do you have an example page of where Google is using this image in the way you said? In the pages I checked they were using it as a background image.
    It happens on a regular search result. I did a search in the search bar of Firefox and it was on the displayed results page. I was logged in to my Google account at the time, so it was showing me the new personalisation features that they launched recently. Also, as I speculated, it's possible they do browser sniffing. I am on Firefox 3.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog · Twitter · Contact me
    Neon Javascript Framework · Jokes · Android stuff

  6. #6
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @lordofthelake and mmj:

    Aha, now I see. I did a search, as you both suggest, and the logo on that page uses the method you described. How interesting.

    I am using FF 3.0.4 (Mac)
    Simple is beautiful.

  7. #7
    SitePoint Enthusiast lordofthelake's Avatar
    Join Date
    May 2008
    Location
    Italy
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Up to now I think there are a couple of evidences:
    1. It isn't triggered by search happening through FF bar. I've done a search through official Google home page (not iGoogle nor the Mozilla-branded one, just the plain one), having the very same results
    2. It seems not to depend from the different localized versions of Google. In Italy is the same as in Australia, for what I can see.
    3. It doesn't depend from being logged in or out, it works anyway. The only difference is that in the latter case the image used is nav_logo3.png, instead of nav_logo4.png (fewer elements included)

    EDIT: I see the discrepancies with Aarem experience were only matter of a misunderstanding. So, at least on FF, this technique is used for sure, not depending from login status nor localization. We should test on some other browsers to see what comes up.

  8. #8
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Certainly it's the same for Safari and Opera (Mac). I don't see why it would be any different in other browsers... except for perhaps you know who...
    Simple is beautiful.

  9. #9
    SitePoint Enthusiast lordofthelake's Avatar
    Join Date
    May 2008
    Location
    Italy
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Internet Explorer 7: Check
    Google Chrome: Check

    Only one still to test... the one who frightens every CSS coder... the The-One-That-We-Can't-Name...

    Anybody is so brave to make this final test?

  10. #10
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its a good way of reducing the amount of HTTP request. I always slide backgrounds around with background-position for when I have rollovers on tabs and menu items. But for some reason I never thought about doing it this way for so many icons at once. And it seems to work fine in IE6 as well.

    Quote Originally Posted by mmj View Post
    Also, as I speculated, it's possible they do browser sniffing. I am on Firefox 3.
    Is there a tool that would show you if a websites uses browser sniffing?
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  11. #11
    SitePoint Enthusiast lordofthelake's Avatar
    Join Date
    May 2008
    Location
    Italy
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tijmen View Post
    Its a good way of reducing the amount of HTTP request. I always slide backgrounds around with background-position for when I have rollovers on tabs and menu items. But for some reason I never thought about doing it this way for so many icons at once. And it seems to work fine in IE6 as well.
    Good, if it works on "standard" browsers and even on IE6, we can assume that it works almost everywhere. +1 for Google.

    The only thing is that it degrades not so well if the CSS support is disabled but images enabled. I know it's a limit situation, but... What you get is rather ugly (you can try it yourself disabling the styling).

    Quote Originally Posted by Tijmen View Post
    Is there a tool that would show you if a websites uses browser sniffing?
    You can try to change your User-Agent header (Opera should have this feature built-in; for Firefox, as usual, there should be some extension for this) and see if the site behaves in some different way.

    No 100&#37; automated tools, though (at least for what I know).

  12. #12
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A friend of mine had a look on his Iphone, and one of the icons showed a small part of the next icon as well. That would be one device where you might want to consider providing an alternate version.
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  13. #13
    SitePoint Evangelist
    Join Date
    May 2006
    Location
    Denmark
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I never thought about that, but it would be logical to assume they are doing so. The bandwidth costs must be enormous so I'd imagine they do as much as possible for cutting down on HTTP requests and bytes that are transferred.

  14. #14
    SitePoint Zealot busylinks1's Avatar
    Join Date
    Nov 2008
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is new to me....
    Can any one tell me...

    that they use this code for image...
    <h1><a id=logo href="http://www.google.co.uk/webhp?hl=en" title="Go to Google Home">Google<img width=150 height=105 src="/images/nav_logo3.png" alt=""></a>

    and these in CSS if i am not wrong...
    #logo{display:block;overflow:hidden;position:relative;width:150px;height:52px;margin:14px 0 7px}
    #logo img{border:none;position:absolute;left:0;top:-26px}

    which command css code hides the other part of the png so that we only see the logo...

  15. #15
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I assume it is this bit:

    Code:
    overflow:hidden;width:150px;height:52px;
    Simple is beautiful.

  16. #16
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aah this clears up a strange problem I was having!

    In one of my favorite surfing-browsers, Avant Browser, I was seeing the google logo together with the checkout logo and some other icons hovering over my search results! Or just sitting in its logo position. I also see the arrows above the logo in Avant Browser.

    Its strange because avant browser is using ie7 layout engine and normally it behaves exactly like ie7 (except much faster!).

    I wonder if this problem has anything to do with the google page not having a doctype, thus putting ie7 into quirks mode.

    Its interesting to see google using sprites btw, Im a big fan of sprites myself.

  17. #17
    Trash Boat mkoenig's Avatar
    Join Date
    Aug 2007
    Posts
    1,232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At the expense of sounding dumb... i've never heard of sprites other than Tinker Bell.

    Thats a neat concept and would reduce the http request for sure.

    Nice find.

  18. #18
    SitePoint Zealot somecallmejosh's Avatar
    Join Date
    Sep 2006
    Location
    CT
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mkoenig View Post
    At the expense of sounding dumb... i've never heard of sprites other than Tinker Bell.

    Thats a neat concept and would reduce the http request for sure.

    Nice find.
    There is an article on A List Apart that describes the technique in detail... http://www.alistapart.com/articles/sprites/

    We love this technique.
    Joshua K. Briley
    Website Design and Front End Development

  19. #19
    Trash Boat mkoenig's Avatar
    Join Date
    Aug 2007
    Posts
    1,232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the article im checking it out now.

  20. #20
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting to see it in google.

    Quote Originally Posted by mmj
    What I'm wondering now is, are techniques like this portable and accessible enough to rely on them solely
    I'm also concerned with this and I was planning to use it in my next personal project to investigate these issues deeper. Otherwise it is a very effective method: Less requests to the server plus no delays on hover state images.
    Tweep List adds an avatar menu to Twitter (open source)
    Word Stats shows your most used words on Twitter

  21. #21
    SitePoint Enthusiast lordofthelake's Avatar
    Join Date
    May 2008
    Location
    Italy
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyway, I still prefer the background-based version of the technique... it degrades better and comes with no real additional cost.

  22. #22
    Trash Boat mkoenig's Avatar
    Join Date
    Aug 2007
    Posts
    1,232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just think its cool that it explains those old 8 and 16bit games!

  23. #23
    Non-Member DelvarWorld's Avatar
    Join Date
    Jul 2004
    Location
    Baloney
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm tempted to say "old news"...Google has been doing that since day 1. No browser sniffing neccessary, background position works pretty much across the board. It's definitely a useful technique, if you look at Google's source code everything is compressed, they do everything they can for faster load times.

  24. #24
    SitePoint Evangelist
    Join Date
    May 2006
    Location
    Denmark
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One thing that has always been boggling my mind is why they don't move their JS and CSS to external files so it can be cached. They could save a lot of bandwidth...

  25. #25
    SitePoint Wizard silver trophy ldcdc's Avatar
    Join Date
    May 2004
    Location
    Ploiesti
    Posts
    4,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The bandwidth costs must be enormous so I'd imagine they do as much as possible for cutting down on HTTP requests and bytes that are transferred.
    I suspect it has to do with reducing the number of hits and thus i/o stress on the servers as well.
    HostPeek.com - budget hosts, compared
    CouponsNexus.com - web hosting coupons

    Ultra Cheap Hosts | Web Hosting Reviews Forums


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
  •