What is Digg?57 Comments
- akh1, on 10/12/2007, -1/+39The problem by using several images is that some browsers doesn't download the images for the inactive states. So if you hover over a link that have a different background image than the normal link you might experience flashing before the image is downloaded. Therefore one large image is better, as it would already be cached for the different states.
- hobophobe, on 10/12/2007, -0/+13Another benefit may be that the single image only requires a single request to the httpd?
- blong, on 10/12/2007, -0/+9Mozilla.org uses the sprite method of implementation for their main navigation.
Mozilla stylesheet: http://www.mozilla.org/css/cavendish/template.css . You can see the examples of sprite implementation in the definition of the #header li{} and #header ul a{} selectors.
Cheers! - Tarmas, on 10/12/2007, -0/+8"Well, you can preload several images the traditional way with JavaScript. With this method you save some overload because you have to make fewer http requests but the big bonus is that you can do this entirely without JavaScript!"
You don't have to preload images using JavaScript at all. You can just place them on a layer that is invisible to the user, but is parsed by your browser. All done with nice and valid CSS. But it doesn't save ANY bandwidth, because the number of http requests is still the same as the JavaScript method.
The method used here is not preloading per se, because you download one slightly larger image, and display only a part of it. You save bandwidth by not generating additional requests to your server. And it doesn't matter if the requests are triggered by CSS or by JavaScript, so you kind of missed the point here. - joshduck, on 10/12/2007, -0/+7Yes, that's correct. It's easier on both the browser and the web server, less requests to handle. Each HTTP request also has an overhead of about 1KB.
- suppazone, on 10/12/2007, -4/+10so? seems like a lot of people still didn't know about its...old news to you is great news to other. The digg count seems to say it all...
- thelonious, on 10/12/2007, -1/+7Weather Underground does this to make a 360 degree arrow rotate, and moves the entire sprite around in a circle on top of another image to create an animated compass effect. It updates real-time on a weather page to tell you the current wind direction.
http://www.wunderground.com/US/CA/San_Francisco.html
In the current conditions box, look at the blue compass with the red arrow. The red triangular arrow image is a sprite. - userundefine, on 10/12/2007, -2/+8Yeah, this is very known, and very old. Check out another quick and dirty method:
http://wellstyled.com/css-nopreload-rollovers.html - dpk87, on 10/12/2007, -0/+5Well, what many people do now is just create sprites just for the images in navigations with rollovers, not the whole site..
- loffeecover, on 10/12/2007, -0/+4Nothing new here, e.g. look at the links mentioned before:
- http://www.alistapart.com/articles/sprites
- http://wellstyled.com/css-nopreload-rollovers.html
Have been using this for quite a while now, and it's simply brilliant! Anyway, good to see this technique gets some attention via digg.com, so more people will use it for better websites! - centinall, on 10/12/2007, -1/+5That's an excellent reason for doing it this way. Thanks for pointing it out.
- chrism1128, on 10/12/2007, -0/+4Hey "Old News"
I hear that people knew how to add and subtract a couple thousand years ago. I guess it's just plain stupid for elementary schools to hire math teachers now.
We know, you're smart and bleeding edge, can the rest of the mortals learn something without your derision? - zentro, on 10/12/2007, -0/+4Well, you can preload several images the traditional way with JavaScript. With this method you save some overload because you have to make fewer http requests but the big bonus is that you can do this entirely without JavaScript!
- aximilation, on 10/12/2007, -0/+4This is a nice way to consolidate all the images into one load, and I like the fact that you don't have to use js to preload. Sure this may have been on the web before, but it's nice to know and provide to the digg community for those of us who haven't stumbled on it yet.
- inactive, on 10/12/2007, -0/+4This is the first time I've seen this method explained so clearly and simply. Major thumbs up and +Dugg.
- Phoenyx, on 10/12/2007, -16/+19Lame. This is two years old! Check out this article from alistapart.com (http://www.alistapart.com/articles/sprites/) from March *2004*
- prockcore, on 10/12/2007, -0/+3A lot of places use this for the 5 star hover rating things.. a single star and the "active" star below it.. tiled horizontally.
- Elxx, on 10/12/2007, -0/+3That's a very interesting use for sprites. It works pretty well, too.
- Tahir, on 10/12/2007, -0/+3Yeah this is a old trick. However I thought this would teach how to put all a sites images into one image and just use the background image position to show the relevant image. But 1 large image will have a very large file size and will load quite slow. Has anyone ever done this?
- Elranzer, on 10/12/2007, -0/+3It's like graphics programming for 16-bit consoles! Digg++!!
- mcdpa, on 10/12/2007, -0/+3The color palette issue is important to remember but as long as your careful making your sprites, palette bloat won't negate the bandwidth savings and better load times.
The font size issues can easily be addressed in CSS. - the_d, on 10/12/2007, -0/+3FYI, sprite is another word for a spayed female ferret. With that in mind, this story is about some weird *****.
- smhill, on 10/12/2007, -1/+3Wow, welcome to several years ago. This has been pretty much the standard way to do rollovers for a long time now.
- ludwik, on 10/12/2007, -0/+2You are right. And some users may use browsers that doesn't have advanced CSS, for example in mobile devices. Keep it simple.
- minky, on 10/12/2007, -3/+5is this better ? one big image versus several smaller ones ? Isn't the bandwidth the same for the same amount of image data ? Just wondering :-)
- conigs, on 10/12/2007, -0/+1This is great for navigation elements and maybe a few corner elements.
But won't this fail with background and edge elements? Ones that need to be repeaded at least?
I do like the idea of having a sheet of graphic elements as opposed to several individual images, though. But it could be a downside with GIF or PNG-8 files with indexed color. - aconbere, on 10/12/2007, -0/+1Interestingly enough they also use it in the main browser design for all toolbar buttons (every toolbar button is a sprite from a larger instance) there are clearly some themes that stray from this, but on the whole most do it this way.
- protiek, on 10/12/2007, -0/+1AOL appear to be doing this:
http://www.aolcdn.com/_media/aolp/9.v_sprite.png - tlianza, on 10/12/2007, -0/+1Wouldn't this break the browser's right-click "save image as..." and "copy image location..." functionality and cause them not to behave as expected?
- jupo, on 10/12/2007, -0/+1This is a very creative technique. We've been doing this on a smaller scale with navigation for quite a while. I think this would decrease load time on documents with a large number of images due to the overhead of each separate request. Comment pages on digg take forever to load over dial-up due to the large number of individual requests made.
- chime, on 10/12/2007, -2/+3I use simple sprites for hover-effect on company logos on my newer sites: http://www.formsol.com / http://www.enjoyatan.com simply because it doesn't rely on JS and most definitely loads the hover image as soon as the site's up.
- nmoog, on 10/12/2007, -0/+1Here's a version of Air-Sea Battle written in javascript using CSS sprites (with mini-tutorial) : http://mrspeaker.webeisteddfod.com/2005/06/15/air-css-battle/
- chicksdigme, on 10/12/2007, -0/+1I dig all css posts :) Keep them coming
- Phoenyx, on 10/12/2007, -0/+1Check out my previous comment
- sn0wflake, on 10/12/2007, -1/+2Ancient news. Check out the 2+ year old article at http://www.alistapart.com/articles/sprites/ from A List Apart. Good solution but still a pain in the buttocks.
- soupisgoodfood, on 10/12/2007, -1/+2That's even more of an ugly hack. It involves changing the HTML, for starters.
- cathode, on 10/12/2007, -0/+1Old, but still cool. Digg
I have found that the single sprite image (if the shared pallette works out) is smaller than the combination of the three previous images. Also, in the case of my site, the image was smaller when the three states are stacked vertically rather than horizontally, so benefit there. - Elranzer, on 10/12/2007, -0/+1Where's the ALA link? I'm interested in that, being part of ALA and all...
- loffeecover, on 10/12/2007, -0/+0Oh, and another interesting link about this technique (with nice example):
http://www.fluidvision.net/index.php?subaction=showfull&id=1119350157&archive=&start_from=&ucat=1&fv=2 - gambl0r, on 10/12/2007, -2/+2Ripped off from ALA! No digg for that.
But in defense of the technique, those of you putting it down don't know what you're talking about. There is no text resizing issue. It is not a bad coding practice, it does not load slower. - Elranzer, on 10/12/2007, -1/+1"What if someone needs very large font etc? A div will expand to the right and down, causing the next image to be shown in the background."
Well you could always tile your images horizontally instead of vertically... - a1programmer, on 10/12/2007, -1/+1This is bad coding practice. It will look horrible if you try to resize it too (control + scroll wheel in Firefox).
- tejaycar, on 10/12/2007, -0/+0Isn't this problematic if you have some GIF and some JPG. You would have to make all your images at the same resolution as you largest image. That could make for a huge image.
- SenyWD, on 02/24/2009, -0/+0Download free standards compliant CSS layouts: http://www.free-css-layouts.com
- cadavreexquis, on 10/12/2007, -0/+0An excellent, accessible dropdown menu using sprites was covered by simplebits.com:
http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html - Voodooengine, on 10/12/2007, -1/+1I see thanks for the example.
Cheers.... - thelonious, on 10/12/2007, -0/+0Just as an update, the arrow that moved around a compass type dial (if you saw that) wasn't very friendly with some browsers (other than Safari, FF on WinXP, Opera and IE). Now it's just a blue arrow on a single horizontal slide, in 360 degree frames.
- opera, on 10/12/2007, -7/+6This is completely insanely stupid (like most stuff bonlebon posts).
Remember, keep the site simple, and readable for everyone (with eyes). What if someone needs very large font etc? A div will expand to the right and down, causing the next image to be shown in the background.
Don't do this, unless you're certain it won't look like crap on twisted resolutions/dpi's.
Also, gif and png can take advantage of a very small palettes, resulting in minimum file size. Using several differently colored images in one, causes the palette to grow, maybe even into true-color domains. This causes much larger file sizes than the individual ones together.
It's just supa-lame. - cwmonkey, on 10/12/2007, -2/+1Horrible use of CSS. Not sure why people insist on sing CSS for functionality, that's JavaScript's job!
- sensibledriver, on 10/12/2007, -2/+0If you have coded a single Javascript roll-over in the last 3 years, you should be taken out back and shot for being a hack.
-
Show 51 - 57 of 57 discussions
Browsing Digg on your phone just got easier with our enhancements to the 
© Digg Inc. 2009
— Content created and posted by Digg users is 