CSS Sprites and HTTP Requests

[brandozz]

One of the benefits of using CSS Sprites is the fact that they reduce HTTP requests. My question is, if the src of the img cannot be blank:

<img src="">

and you load a transparent gif into it as a placeholder:

<img src="trans-img.gif">

aren't you defeating the purpose of using a CSS Sprite in the first place? Loading the transparent gif would result in a HTTP request.

[brandozz]

Mystery solved, I eliminated the need for the image element by moving my sprite to the original parent element of the image.

[lucy24]

What were you using the img src for in the first place? The only thing I can think of is to force a minimum size on the element-- and you can do that, itself, in CSS.

I changed one page from using 24 teeny images to two sprites. What I didn't consider until later was that the images themselves often came up in search results-- and it was the kind of search that leads people to the page. ###. (Moral: You Just Can't Win.)

If you do use a transparent gif, it would be the same one over and over again, right? So there's only one browser request. Even the world's dumbest browser --looking at you, MSIE 7-- knows when the same file is referenced twice on the same page.

[not2easy]

Yes, the point of using a sprite is to reuse the same image in different parts of the page by defining the portion of the image you want to use via positioning in the css for the parent element. If it was used here to define the size of the parent element, it would be kind of pointless. I understood the question to be about an image other than the placeholder clear gif mentioned.

[brandozz]

The sprite example provided by the W3Schools states that src in the image element cannot be empty so a transparent gif is put into it's place. This example had me scratching my head. I assumed that each gif image would be an http request.

So for example if I had

<a href="page1"><img id="one" src="trans-img.gif"></a>
<a href="page1"><img id="two" src="trans-img.gif"></a>
<a href="page1"><img id="three" src="trans-img.gif"></a>
<a href="page1"><img id="four" src="trans-img.gif"></a>

If I used a sprite to define my background image and position for each image element I assumed that you would have 5 http requests.

I ended up removing the imgs from each a element and also moved the id's to the a element.

[phranque]

If I used a sprite to define my background image and position for each image element I assumed that you would have 5 http requests.

that would be one http request.

[brandozz]

Thank you phranque.

What about a repeated background image?

background: url('background.gif') repeat;

Would there be a http request for each repeated image or would there be just one request?

[not2easy]

just one.

[brandozz]

not2easy, thanks!

I've been searching for an answer to that.

[lucy24]

The magic word is CACHE. Your browser remembers each separate file it has downloaded, and keeps them in its cache as long as it feels like it-- unless the file is explicitly labeled nocache. (Which you might actually do for some types of administrative gif, say if you're using it for tracking.) It's really the same principle as using a shared stylesheet for all pages: the browser only has to request it the first time. After that it uses the cached copy.

[phranque]

a lot of separate concepts being confused here:

One of the benefits of using CSS Sprites is the fact that they reduce HTTP requests.

http requests are reduced essentially by reusing pieces of an image.

aren't you defeating the purpose of using a CSS Sprite in the first place? Loading the transparent gif would result in a HTTP request.

a css sprite cannot be used in the src attribute of an image tag.
any resource referred to in an img tag (or elsewhere) would be requested once the first time it is encountered per page.

background: url('background.gif') repeat;

Would there be a http request for each repeated image or would there be just one request?

each url would be requested once per page.

the browser only has to request it the first time. After that it uses the cached copy.

the "cached copy" is really about availability for reusage on subsequent page requests.
even with caching explicitly disabled, each resource gets one request per page, not one per reference.

[brandozz]

No confusion, but thank you for summarizing everything above.