Impact of images on load performance

[Ben Long]

Hi All,

A partner of mine has been charged with identifying a performance /
load problem currently experienced on one of our websites.

I'm thinking it may be a combination of HTML formatting and syntax
along with the number of images (<img> tags) being used on a single
page. The problems seem to persist around IE (5.0+ on multiple win OS),
however FF 1.0 sometimes chokes but usually clears once the images are
loaded.

If I understand correctly, IE will wait until the contents of a table
are loaded/rendered before displaying the table. This could certainly
explain what we are experiencing - I'm looking for a consistant
explanation of a random behavior.

I reviewed some of the source, and at times there are 60+ <img> tags on
a single file read by the browser. Most of these img tags are 'spacer'
images but imgs all the same. Does anyone know the impact of img's on a
web page - i.e. the number of http connections, etc. Any help is
appreciated.

Thanks,
Ben

[jmm-list-gn]

Ben Long wrote:

A partner of mine has been charged with identifying a performance /
load problem currently experienced on one of our websites.

I'm thinking it may be a combination of HTML formatting and syntax
along with the number of images (<img> tags) being used on a single
page. The problems seem to persist around IE (5.0+ on multiple win OS),
however FF 1.0 sometimes chokes but usually clears once the images are
loaded.

It depends:
- on the number and size of the images. Obviously, large images take
longer to download. A lot of small images can time-consuming too if they
are all different and the server is busy. Most browsers are smart enough
not to repeatedly download the same file.
- on whether the <img> tags have width and height attributes. Without
width and height, the browser must wait until an image is fully downloaded
before discovering its size. This slows down layout.
- on how images are scaled. Are large images scaled down to a smaller size
using width and height? If so, bad plan.
- on how heavily tables are used for layout. It's somewhat browser
dependent but generally tables are rendered late, when enough of the page
is received to guess at the sizes for the rows and columns.
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Mark Tranchant]

Ben Long wrote:

If I understand correctly, IE will wait until the contents of a table
are loaded/rendered before displaying the table. This could certainly
explain what we are experiencing - I'm looking for a consistant
explanation of a random behavior.
Table-based layout? Tsk.
I reviewed some of the source, and at times there are 60+ <img> tags on
a single file read by the browser. Most of these img tags are 'spacer'
images but imgs all the same. Does anyone know the impact of img's on a
web page - i.e. the number of http connections, etc. Any help is
appreciated.

One connection per file. Sounds to me like you need to redesign the page
not to use image slicing and tables.

A URL would help us diagnose further.

--
Mark.
http://tranchant.plus.com/

[Bruce Lewis]

Mark Tranchant <ma**@tranchant.plus.com> writes:

One connection per file. Sounds to me like you need to redesign the
page not to use image slicing and tables.

It isn't likely to be one connection per file. Few browsers or servers
are stuck with HTTP 1.0. Since HTTP 1.1 it's been possible to serve
multiple requests over a single connection. If the image files are
reasonable size and the IMG tags have WIDTH and HEIGHT attributes, the
page should load quickly.

I'm looking at a page on ourdoings.com that has 12 50k images, but loads
quickly. Then again, they all get WIDTH and HEIGHT tags, and I don't
use table layout. Additionally, even the dynamic pages use persistent
connections.

--

http://ourdoings.com/ Let your digital photos organize themselves.
Sign up today for a 7-day free trial.

[Ben Long]

Thanks - table based is bad - I know. It's not image sliced layout but
the navigation is heavily image based. I've already recommended they
change it. Thanks for the feedback.

[DU]

Ben Long wrote:

Hi All,

A partner of mine has been charged with identifying a performance /
load problem currently experienced on one of our websites.

I'm thinking it may be a combination of HTML formatting and syntax
along with the number of images (<img> tags) being used on a single
page. The problems seem to persist around IE (5.0+ on multiple win OS),
however FF 1.0 sometimes chokes but usually clears once the images are
loaded.

If I understand correctly, IE will wait until the contents of a table
are loaded/rendered before displaying the table.
Yes and no. Usually, IE will wait until the contents of the table is
loaded/rendered before displayin the table unless... table-layout: fixed
is used and is accordingly triggered. See the specs on this.

This could certainly explain what we are experiencing - I'm looking for a consistant
explanation of a random behavior.

I reviewed some of the source, and at times there are 60+ <img> tags on
a single file read by the browser. Most of these img tags are 'spacer'
images but imgs all the same.
Then they each need a single http connection.

Does anyone know the impact of img's on a web page - i.e. the number of http connections, etc. Any help is
appreciated.

Thanks,
Ben

The impact of images is usually big for 2 sorts of reasons:
- size of each individual image files; that's one reason why PNG images
are preferred
- number of each images which requires a single http connection to the
server.

There is also a possible 3rd reason why and it's given by Microsoft:

{ When you run Internet Explorer, the Internet Explorer cache is not
used as you expect when you run innerHTML code to insert the same image
multiple times. Notice the following code samples:

myDiv1.innerHTML = "<IMG SRC='image.gif'>"

myDiv2.innerHTML = "<IMG SRC='image.gif'>"

The preceding code results in sending two GET requests to retrieve
the Image.gif file in Internet Explorer 6.0. Three GET requests are sent
to retrieve the Image.gif file in Internet Explorer 5.5. Your
expectation is that the Web server would be hit only one time.

STATUS
This behavior is by design.
}
excerpt from
http://support.microsoft.com/default...b;en-us;319546

I recommend to avoid spacer images, images of text (very bad) and table
design (in particular nested tables).

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.5 :)