HighDots Forums  

background-image: url(images/whatever.jpg) a separate GET?

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss background-image: url(images/whatever.jpg) a separate GET? in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
salmobytes
 
Posts: n/a

Default background-image: url(images/whatever.jpg) a separate GET? - 12-10-2007 , 02:02 PM






Every img tag (<img src="xxx.jpg">) in the html source represents a
separate
GET roundtrip between client and server, no?

What about background images in css?
I'm starting to see more and more designs--coming from the
graphics design people--that call for ever increasing numbers of
repeat-x or repeat-y sliver-gradients as div backgrounds. Does each
such
background image require a separate GET to the server?
.....seems like it must.

And if so, lots of fancy css on a webpage will make for a chatty
website,
which, among other things, will degrade performance on high
latency connections, like satellite dishes, etc.

Is there a javascript way to test load times on the client, so you
could test load times for different css schemes, layered over the
same html source?




Reply With Quote
  #2  
Old   
Harlan Messinger
 
Posts: n/a

Default Re: background-image: url(images/whatever.jpg) a separate GET? - 12-10-2007 , 02:29 PM






salmobytes wrote:
Quote:
Every img tag (<img src="xxx.jpg">) in the html source represents a
separate
GET roundtrip between client and server, no?
Yes, except for the ones that are already cached. Depending on the
configuration, the client may send a conditional GET, with the date when
the cached version was retrieved in an If-Modified-Since header, in
which case the server will send a 304 Not Modified response if there has
been no change, saving time and bandwidth.

Quote:
What about background images in css?
I'm starting to see more and more designs--coming from the
graphics design people--that call for ever increasing numbers of
repeat-x or repeat-y sliver-gradients as div backgrounds. Does each
such
background image require a separate GET to the server?
....seems like it must.
Yes, subject to the comments above about caching.

Quote:
And if so, lots of fancy css on a webpage will make for a chatty
website,
which, among other things, will degrade performance on high
latency connections, like satellite dishes, etc.
Yes, unless the images on each page are more or less the same ones being
reused, in which case caching will take care of much of it.

Quote:
Is there a javascript way to test load times on the client, so you
could test load times for different css schemes, layered over the
same html source?
I don't think so, but there are tools you can use for this, such as WAPT
from http://www.loadtestingtool.com/. I used the previous version for a
couple of projects and found configuration a little more complicated
than I would have liked (it would have been nice, for example, if steps
could be copied; maybe they *can* be in version 5 and I don't know about
it) but the results were satisfactory, and it does let you time things
like image loading times and tallies bytes downloaded.

Quote:


Reply With Quote
  #3  
Old   
Rik Wasmus
 
Posts: n/a

Default Re: background-image: url(images/whatever.jpg) a separate GET? - 12-10-2007 , 02:30 PM



On Mon, 10 Dec 2007 21:02:39 +0100, salmobytes
<Sandy.Pittendrigh (AT) gmail (DOT) com> wrote:

Quote:
Every img tag (<img src="xxx.jpg">) in the html source represents a
separate
GET roundtrip between client and server, no?
If the UA chooses to fetch that image, and it isn't cached somewhere, yes
indeed.

Quote:
What about background images in css?
Same thing.

Quote:
I'm starting to see more and more designs--coming from the
graphics design people--that call for ever increasing numbers of
repeat-x or repeat-y sliver-gradients as div backgrounds. Does each
such
background image require a separate GET to the server?
....seems like it must.
If they are different images, then yes offcourse, everything has to be
retrieved, that's why we don't usually make print quality images for the
web.

Quote:
Is there a javascript way to test load times on the client, so you
could test load times for different css schemes, layered over the
same html source?
Javacript would not be the most perfect tool to test this, as it is
dependable on the same UA, and can actually slow things down. There is
also a difference between load (getting the content) and render (try to
figure out how to display it) time. I don't know a tool that does what you
want specifically, however, the 'speedreport' at
<http://www.websiteoptimization.com/services/analyze/index.html> might
give you some indication of bottlenecks.

And offcourse, while laying out pages, you make sure they:
- display properly without any images whatsoever.
- display properly without any css whatsoever.

... nothing more irritating then waiting for an image to load before you
can read any text..
--
Rik Wasmus


Reply With Quote
  #4  
Old   
Jeff North
 
Posts: n/a

Default Re: background-image: url(images/whatever.jpg) a separate GET? - 12-10-2007 , 04:51 PM



On Mon, 10 Dec 2007 12:02:39 -0800 (PST), in
comp.infosystems.www.authoring.stylesheets salmobytes
<Sandy.Pittendrigh (AT) gmail (DOT) com>
<76e9e382-1334-4915-b608-b90d772cdaf3 (AT) i29g2000prf (DOT) googlegroups.com>
wrote:

Quote:
| Every img tag (<img src="xxx.jpg">) in the html source represents a
| separate
| GET roundtrip between client and server, no?
|
| What about background images in css?
| I'm starting to see more and more designs--coming from the
| graphics design people--that call for ever increasing numbers of
| repeat-x or repeat-y sliver-gradients as div backgrounds. Does each
| such
| background image require a separate GET to the server?
| ....seems like it must.
|
| And if so, lots of fancy css on a webpage will make for a chatty
| website,
| which, among other things, will degrade performance on high
| latency connections, like satellite dishes, etc.
|
| Is there a javascript way to test load times on the client, so you
| could test load times for different css schemes, layered over the
| same html source?
If you are using Firefox then download the Firebug plugin.
Once installed and activated you will find a tab labeled Net.
This displays a graph of load times for each item on your page.
It's a quick and dirty way of finding what is loaded, when and how
long it takes.
-- -------------------------------------------------------------
jnorthau (AT) yourpantsyahoo (DOT) com.au : Remove your pants to reply
-- -------------------------------------------------------------


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.