Welcome to WebmasterWorld Guest from 3.228.24.192

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Sprites and HTTP Requests

     
5:17 pm on Oct 14, 2014 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


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.
5:31 pm on Oct 14, 2014 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


Mystery solved, I eliminated the need for the image element by moving my sprite to the original parent element of the image.
7:51 pm on Oct 14, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15889
votes: 876


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.
8:18 pm on Oct 14, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4521
votes: 350


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.
8:35 pm on Oct 14, 2014 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


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.
9:14 pm on Oct 14, 2014 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:11846
votes: 242


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.
9:19 pm on Oct 14, 2014 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


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?
10:00 pm on Oct 14, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4521
votes: 350


just one.
1:00 am on Oct 15, 2014 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


not2easy, thanks!

I've been searching for an answer to that.
10:06 am on Oct 15, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15889
votes: 876


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.
11:12 am on Oct 15, 2014 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:11846
votes: 242


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.
12:58 pm on Oct 15, 2014 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


No confusion, but thank you for summarizing everything above.