What is Digg?75 Comments
- markr, on 10/12/2007, -1/+20In the given example, a single .gif icon was 574 bytes and the concatenated image was 1,802 bytes - the concatenated image had 6 icons in it, which gives a saving of 1642 bytes compared to the 6 individual icon files.
(and then you have the extra socket connection etc savings as well...) - roxya, on 10/12/2007, -1/+19The point is, it cuts down on the number of requests you make to the server asking for various image files. If you use Firebug, you can easily see how much extra time is spent downloading lots of small images.
- CountryBoyRI, on 10/12/2007, -3/+20Wow. Way to make a gross over-generalization. Software is a vastly complex field, and no one, and I mean NO ONE masters all of it right out of the gate.
What you should have said was "Any web developer learning about this now would do well to consider how it could be used to improve their application's design and performance."
Instead, you came out sounding like a pretentious ass with an ego the size of Texas. - brownspank, on 10/12/2007, -1/+14And in the Web design world, this is more commonly known as CSS sprites.
- robcornelius, on 10/12/2007, -2/+13This is nothing new. ALA had the following article http://www.alistapart.com/articles/sprites/ dated March 05 2004.
I seem to remember Excite or some simillar site did this for all their images back in the bubble as well. - phej, on 10/12/2007, -0/+11Instead of using spacer gifs, which offer nothing to people with disabilities or those who have css turned off, why not something more semantic, like text links?
You can hide the text and still use css to display the backgrounds. That way everyone can 'see' and use the utility navigation. - KibibyteBrain, on 10/12/2007, -3/+11The only problem with this is it requires a bit more grunt work on the user end. And as embarrassing as it is with our dual core, multi gigahertz processors and DDR 2 RAM, rendering a complex web page is still not a nominal processing task on most systems.(i.e., it takes more than a human non-perceivable period of time) To add more to that might be painful to some users struggling as it is due to old hardware, Terminal Server/NX/VNC type access on thin clients, or crapped up OS installs(the latter being, aka, most people).
Also, while on topic about optimization, I was quite impressed with Digg this week. I was limited to 56kbps for the first time in years, and basically only Digg and Google were zippy in loading up in a responsive fashion. Good work. - jerbaker, on 10/12/2007, -1/+9@rodgy: "As you can't embed images into HTML code,"
Yes, you actually can do exactly that. See RFC 2557 (http://www.ietf.org/rfc/rfc2557.txt). You can see it yourself by pasting the following link into your browser or HTML page:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAClUExURcA/P5APD5wcHJgXF40MDMJBQZMTE/r6+qEgIOjo6PHx8aw5ObZDQ79MTLU0NN7e3qYlJbk4OKsqKrAvL+Pj4+3t7fb29sxgYKA5OdXV1d+fn708PKU6OrxUVKc0NJ4qKshcXOCgoLJKSqhAQPns7PPm5tDQ0LE+PsVdXdnZ2caFhbtHR6A0NMeHh9qXl81wcM6EhMNPT8VoaMV7e798fK5HR7tfX0Qr1q0AAADCSURBVHjaYlBRFGeFAnFFFYAAYpBiQAJSAAHEoCCtxw4B+obSCgABxCAoKKbBy8sLxGJigoIAAcTAx8cFBAZG2tpcXHx8AAHEICwsKsvDwwPEoqLCwgABxCAkxAkExmbq6pycQkIAAcQgICCixM3NDcQiIgICAAHEwMFhws/Pbyonx88BBAABxMAEBprKypogGiCAGJjBQFJeXhJEAwQQgwwbCEioqUkAKRmAAGLQZUQCugABxKCqpcMCBTpaqgABBgA0Xgxlx6wWOwAAAABJRU5ErkJggg==
EDIT: Digg may not allow a link that long - swordphish, on 10/12/2007, -2/+10Very smart. This is the same method used in video games (aka "texture atlasing")
- aschepis, on 10/12/2007, -2/+10If i'm not mistaken, this might be even faster due to the reduction in TCP overhead that would occur in creating multiple connections, checking multiple cache values to see if you really need to download the image, etc. This would be particularly true for HTTP 1.0, less so for HTTP 1.1
- dogshaft, on 10/12/2007, -1/+8He was doing so well until he mentioned using img tags for applying the background images to, which pretty much ended up with having a garbage 1x1 transparent gif spacer image being used inside of links. Wouldn't it be semantically correct to apply the background to the A tag and and then fill the link with descriptive text, instead of a garbage image tag?
phej beat me to it.... - psykr, on 10/12/2007, -1/+8The perceived delay in loading a web page is caused by downloading the page, parsing for external files, waiting to download those, looking for more external files, etc. The "overhead" of rendering it is nowhere near as significant
- rodgy, on 10/12/2007, -3/+9Very few people know that images aren't downloaded the 2nd time you load a page, but most browsers (not Opera) *do check* if the images have been updated on the server of not. On a broadband connection, it takes as much time to check for newer versions of the files as downloading them, because it's a 3-way TCP connection (http://en.wikipedia.org/wiki/Transmission_Control_Protocol#Connection_establishment) and file size is unsignificant. This is why Google pastes all the CSS and Javascript code into the HTML pages themselves. The equivalent to this for images is concatenation. As you can't embed images into HTML code, you can at least reduce the number of TCP connections from tens (tens of images x 3) into just 3 (1 three-way TCP connection) with a single image file.
The result is a page that loads this fast:
http://www.freshports.org/DesignContestVoting/A/index.html
http://www.freshports.org/DesignContestVoting/A/bacula.html
http://www.freshports.org/DesignContestVoting/A/sysutils.html
http://www.freshports.org/DesignContestVoting/A/categories.html
http://www.freshports.org/DesignContestVoting/A/search.html
Only 3 small files to download (3 three-way TCP connections): a .css file, an .html file and a .png file but it could be reduced to two if we embedded the .css file or one if we didn't use an image file!
More info here: http://www.die.net/musings/page_load_time/ and here (in the end): http://osresources.com/9_3_en.html - drvelocity, on 10/12/2007, -1/+7I'm skeptical that the savings in latency time would be worth the trouble - after the images are cached the impact is zero anyway, correct? Also is there any overhead on the browser itself, having to repeat and arrange a large sprite image multiple times? To me this reeks of creating a problem where there never was one simply because there exists another way of doing it.
Also interesting to note that on this very page, the author used individual images instead of sprites.. lol. - arizonagroove, on 10/12/2007, -0/+61994 called, they want their spacer gif back.
- tempusrob, on 10/12/2007, -0/+4"after the images are cached the impact is zero anyway, correct?"
Nope ... less than the initial impact, of course, but not zero. See comments above about how browsers still check to see if there's an updated image, etc... - CountryBoyRI, on 10/12/2007, -0/+4You wouldn't necessarily use it for *all* graphics. However, many web sites involve lots of smaller graphics to render the background and the navigation system. Since those buttons tend to be fairly static once rendered, they would be ideal candidates for image concatenation.
You'd only concatenate where it made sense to do so. It wouldn't be an all-or-nothing thing. - CountryBoyRI, on 10/12/2007, -0/+3No more so than the average snarky Digg responder.
- codmate, on 10/12/2007, -0/+3This is an interesting idea - but not very practical IMO.
How could this be integrated into a CMS for instance?
And think of the content-management and meta-data issues (you are keeping track of all your assets and applying meta-data to them aren't you?).. - jgc7, on 10/12/2007, -0/+3Just as a side note, Google uses this technique extensively in their google maps application. The popup windows and shadows are all created with the following two files regardless of the size or number of tabs:
http://www.google.com/intl/en_us/mapfiles/iws2.png
http://www.google.com/intl/en_us/mapfiles/iw1.png
And for those that keep blabbing about TCP connections... please do a search for "Keep Alive" - borkweb, on 10/12/2007, -0/+3Well, the site I'm currently developing has quite a large number of icons (47...that's icons & similar type icons). Concatenating the image into a single image has given a performance boost of 6 seconds; because of the reduce in latency and the savings of ~23K (due to compression).
- rasensio, on 10/12/2007, -0/+2Nothing new, but useful. Digg
- inactive, on 10/12/2007, -0/+2This is a nice fresh approach. I'm so tired of seeing the same "tips and tricks" regarding CSS but this was very nice.
I had actually tried this out in the past and it worked well but I never thought to use opacity for inactive icons. Great idea. - borkweb, on 10/12/2007, -0/+2@phej ...that is only useful if you don't want the text in the links. Obviously your method makes sense in that case. As soon as you want to show both images and text (as I do in the article), another method is needed. ...unless there is something I'm blissfully ignorant of.
- moltar2, on 10/12/2007, -1/+3This approach has a major flaw though. If you try to resize the text in your browser, then the other icons start showing up. Here is an example given by rodgy:
http://www.freshports.org/DesignContestVoting/A/search.html
Open it up and hit Ctrl-+ on your keyboard a few times. - willcode4beer, on 10/12/2007, -0/+2When I first saw the description, I thought it was going to be another wacky article using css clip. I'm glad I read and saw he was playing the background image thing instead.
All in all, pretty cool. - willcode4beer, on 10/12/2007, -1/+3don't forget that caching behavior is very different on secure (https) connections.
- borkweb, on 10/12/2007, -0/+2Heh heh heh...you missed my point. I DO want text in my links, but to display the tiled icons while at the same time allowing the text to be resized WITHOUT having the other icons show through as font sizes increase, then setting a background-image on the A tag as you explained just doesn't work well enough.
My grandfather has poor eyesight...his browser text is set to an incredibly large size. When he goes to the Yahoo home page that uses the method you are describing, each link on the left has 2 icons on it...one that applies to the link, one that doesn't. That isn't usable. If an image tag (or whatever type of tag you prefer) is within the anchor tag, the text can be resized to your hearts content without the icon bleed-over.
I still hold that using an image tag is semantic for an image... That was my point. - borkweb, on 10/12/2007, -0/+2@moltar2
Actually, the flaw doesn't exist in the code I give in the article because of the use of img tags. It is when you style an A tag with a background image that the problem occurs.
Yahoo's new homepage is an example of the background-positioning problem on A tags. Note the icons on the left. - condour, on 10/12/2007, -1/+3Isn't the whole point of computers so that you don't have to do ***** like this?
- phej, on 10/12/2007, -0/+2Why wouldn't you want text in the links? The method in the article isn't accessible nor is it semantic. You can still hide the text so that normal users don't see it, but it just makes sense to design and develop for everyone and not just those that use the web the same way you do.
- borkweb, on 10/12/2007, -0/+2@citizenpain
Yeah, that's a good idea...unless you want both images AND text to display. Then that method falls through. - MondayJBlack, on 10/12/2007, -0/+2We just did this with a CMS. Typically your rollovers are going to be external to the content so there's no worries there. If you do have rollovers embedded into your content, you can still set up a default class and use the transparency tricks.
-Just launched this tuesday, all rollovers are CSS based.
http://www.dana.org - borkweb, on 10/12/2007, -1/+2@dogshaft
Your point is excellent until you start talking about links with text and designing with accessibility in mind. Placing the background on an A tag with text that can be resized by the user makes the tiled-image-as-a-background break and expose the other icons behind it. In that case, you have two options...1) having two A tags per link or 2) come to the conclusion that, yeah, an IMG tag is pretty semantic for an image and beats a useless A tag. - rodgy, on 10/12/2007, -0/+1Thanks for the tip! I didn't know that, I'll look into it, might come in handy :)
- coolspray, on 10/12/2007, -0/+1One thing this is good for is image based rollovers - there is no delay on the first time you put your mouse over the link.
- yahoofrom, on 10/12/2007, -0/+1Good article. Well at least I learned lots of small images slows down page rendering.
So... I am going to ad-block digg userimages.
FYI, it's http://digg.com/userimages/* - BlackAdderIII, on 10/12/2007, -0/+1I've worked on web apps that have used this kind of technique (in an appropriate context) but serialising the images into *one* stream isn't something I'd confidently call a one-size-fits all performance optimisation.
A little more forethought wouldn't have hurt this otherwise perfectly.. amiable article. - ishmal, on 10/12/2007, -0/+1Would be better if browsers could handle resource bundles like Jar or War files. If your web pages have exactly the same images every time, then caching of individual images gets you nothing. A War file's purpose is exactly that: to archice a webapp's resources.
- willcode4beer, on 10/12/2007, -0/+1how about alt and title attributes on the image and anchor tags?
- phej, on 10/12/2007, -0/+1That could easily be handled with title tags on the links
- phej, on 10/12/2007, -1/+2My thoughts exactly. Good technique, poor execution.
- Fab1anFab1an, on 10/12/2007, -0/+1On a sidenote, spacer gifs are making a come back thanks to Outlook 2007
- Klowner, on 10/12/2007, -0/+1What's wrong with clip? It's so magical! ;o)
http://www.w3schools.com/css/pr_pos_clip.asp - chaoskaizer, on 10/12/2007, -0/+1AFAIK This has been around for 2 years it was called 'sprite css'. ( the ideas is base on 16bit game sprites)
Anyway for ie6 'element-hover' work around try
* html #sidebar a:hover img.icon{
filter:alpha(opacity=100)
}
- borkweb, on 10/12/2007, -0/+1Hrm...You can't set the background image's width and height.
- novaworks, on 10/12/2007, -0/+1clever but kind of dumb to be honest, why go to all that extra work for something that isn't significant
- apex32, on 10/12/2007, -0/+1Why not just use the HTML MAP and AREA tags on your concatenated image? These tags have been around for many years, and even let you assign links to arbitrary polygon and circular regions of images.
code/example: http://www.htmlcodetutorial.com/images/images_famsupp_220.html - llemirtrauts, on 10/12/2007, -0/+0Actually, the image transparency trick on rollover is a fresh idea for me. That's a really good idea, thanks.
- jac1092, on 10/11/2007, -0/+0This tool will help you if you are looking for faster creation of concatenated images.
http://btqnet.com/csssprite.html -
Show 51 - 74 of 74 discussions
Digg is coming to a city (and computer) near you! Check out all the details on our 
© Digg Inc. 2009
— Content created and posted by Digg users is 
