anyone use css sprites? 1

[j4606]

http://www.websiteoptimization.com/speed/tweak/css-sprites/

just found this article was wondering if anyone here has used this method of web optimization. What were the results you had? one of our higher traffic site averages about 250,000 visitors daily and i noticed we have 18 images that could easily be scaled down to three images. Just wanna see if anyone ever used this method and the results you had.

Thanks in advance.

 

[BabyJeffy]

I never used this technique on such a high traffic site, but there is no reason not to use it - it ticks all the boxes in terms of optimisation for the end user. Academically, it's a no-brainer...

The one concern I would have relates to cost. Cost to the company serving the site. Bear with me on this

I would place the number of pages that a unique visiter hits on their (only) visit to a site such as the main landing portals on AOL or Yahoo (but this could easily include BskyB and MSN) at around 6-8 page impressions.

So why serve all the images for the navigation states (using the example they cited in the link)?

> Academically you would argue that you open just one socket to download and cache the image that handles all the navigation states - so all further site access doesn't require new navigation furniture to be downloaded and ensure the fastest possible delivery of the appropriate image.

This doesn't equate to a very big real-time wait for modern internet users, one way or the other.

From the point of the web site owner (who is charged per byte that departs their server) they are serving all the navigation image states at X bytes when they only actually need to serve a single tiny image at Y bytes... where X is a significant increase in size over Y.

With my estimate of 6-8 page impressions per visitor, it would make economic sense for such web site owners to avoid the Sprite technique!

Sure, they would have to do the sums... but when you are serving many millions of page hits a day, making the wrong decision on even something as simple as this could cost them some serious cash.

Am I over-reacting? Sure I am! Why not? I'm right though

As an example of how you could use this in such an environment, if I were running the US AOL home page portal, I would use the sprite technique to serve to logged-in users only. Other users would get the tiny versions... since there is less chance the non-logged in users would revisit.

Sorry to hijack the thread in such a manner (but it is on topic)... what do others think about this technique?

In New Zealand (for instance) you pay for out bound traffic as well as incoming. So this has some relevance.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[BillyRayPreachersSon]

While it can potentially offer quicker rollover behaviour, I agree with Jeff that it isn't always necessary (and as he pointed out, you might end up wasting more bandwidth).

I think it's a case of looking at your server logs and working out if you would benefit or not.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[j4606]

hmm, I can't find too much information, but i ordered a few books that should breifly cover the subject. I'm thinking the users browser will need to manage 3 images instead of 18 or so. If you also take into account that a browser can only handle a limited number of simaltanious requests it does make sense that 3 images might be better than 18. Also I have to take into account http request size and extra markup vs additional css. On some parts I'll probobly wan't to keep images separate incase someone with images disabled or a screen reader visits? I dun know yet, but I'm gonna keep researching this. I'm pretty sure i could probobly set up a test case on a lower traffic portion of one of our pages. I think maybe it's not worth the effort but with so many page visits even a little optomization goes a long way. It Would be fun to set up a javascript timer to catch page load times and then compare two pages one with sprites and one with out. Anyway I'll post back into this thread in a few weeks after I decide what to do.
Thanks for the suggestions.

 

[ChrisHirst]

More on CSS sprites at

http://www.alistapart.com/articles/sprites

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.