Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Derrick Goostrey
4,281 PointsImage sprite
Hi Guys,
I just wanted to clarify something with regards to the use of image sprites in CSS. (and I guess the way images work in general on a web page)...and please forgive me if the question is one of those 'oh duh!' moments for more experienced web developers!!
If I reference the same image multiple times in CSS rules, does this result in a single server request for that image, or will a server request be created for every time that image is referenced?
ie: (html) <img src="graphics/userimage.png"> <img src="graphics/userimage.png">
or (css) background: url("graphics/userimage.png") no-repeat center; background: url("graphics/userimage.png") no-repeat center;
Do these references create a single or multiple server requests? Or does the browser automatically reference the stored/cached image for each subsequent reference?
Cheers ~D
2 Answers
Nachiket Kumar
3,590 PointsIt's a single HTTP request if it's just that one image. See Chris Coyiers article about CSS Sprites, which should give you all the details you want to know!
James Barnett
39,199 PointsYou might want to consider using font icons & data-uris instead of image spirtes as they require less work to use.