PDA

View Full Version : Why do the images on my web site load so slowly?



Lattman
04-27-2006, 04:11 AM
Hey!


Here's my web site, www.global-uniforms.com, if you browse the product categories on the left, you will see that the images load very slowly, yet the files are not that big, about 60Kb each...

Any suggestions as to how I can make them load faster or in such a way that looks a bit more professional?

Thx
Lat

T-B0N3
04-27-2006, 09:13 AM
As for me they don't load at all ...

Twey
04-27-2006, 11:43 AM
Load fine here.

djr33
04-27-2006, 11:57 AM
There's a big white blank spot. The rest loaded fine, and quickly.

Lattman
04-27-2006, 04:48 PM
The first page is not finalized yet, I was wondering if you guys could check out the left portion of the web site and press on the categories ....You will see that the pictures load slowly...

How small should be each jpg image anyways?

Twey
04-27-2006, 05:10 PM
Ah. Now those don't load at all, since they're not actually there, and return 404s.
As a rough guideline, on today's internet connections, I'd say that a total of 1MB of pictures on the page is probably acceptable; maybe two if really necessary.

mwinter
04-27-2006, 05:29 PM
As a rough guideline, on today's internet connections, I'd say that a total of 1MB of pictures on the page is probably acceptable; maybe two if really necessary.What sort of 'page' are you considering, though?

Though there are a large number of broadband users, there are still a significant number of dial-up users. It would take the latter at least three-and-a-half minutes to download a megabyte of data. If they needed to get it all before they could begin navigating, you can almost guarantee that they'll be long gone.

There are some exceptions for blatently media-rich parts of a site (photo galleries, being the most obvious), but nearly everywhere else should be limited to around 200KB for the entire document (including style sheets, images, scripts, etc.) for general audiences and e-commerce.

Mike

Twey
04-27-2006, 05:33 PM
Though there are a large number of broadband users, there are still a significant number of dial-up users. It would take the latter at least three-and-a-half minutes to download a megabyte of data.Yes, but this seems to be common on the Web; a client I had recently needed me to fix his connection, and one site in particular (I think it may have been Amazon or Dabs) took a good five minutes to download.

Lattman
04-27-2006, 05:36 PM
How come the pictures load on all 3 computers at my office (slowly) but you get 404?

The pictures are nout 70K each, there's 2 on each page.



Ah. Now those don't load at all, since they're not actually there, and return 404s.
As a rough guideline, on today's internet connections, I'd say that a total of 1MB of pictures on the page is probably acceptable; maybe two if really necessary.

Twey
04-27-2006, 05:54 PM
I see backslashes in your URIs. There should never be backslashes in a URI.
Firefox appears to have stepped down slightly on this position; when I first used it, it wouldn't even load a page with a backslash in the URL. Now, it seems, it tries it as a directory seperator. However, there are deeper problems. Accessed as http://www.global-uniforms.com/index_files/aprons.htm, the base of your page is http://www.global-uniforms.com/index_files/, and so the images (let's take image7991.jpg as an example) are looked for under that directory (http://www.global-uniforms.com/index_files/image7991.jpg). However, when the file is accessed as http://www.global-uniforms.com/%5Cindex_files%5Caprons.htm, as you have your links, the backslashes do not count when Firefox is looking for the base, so it tries to load http://www.global-uniforms.com/image7991.jpg, which doesn't exist.

Lattman
04-27-2006, 06:00 PM
I knew there was something wrong with that...Say I have the following HTML, how can I fix the errors in the code? Thx

</STYLE>
<DIV id=Apron-Button>
<A href="\index_files\aprons.htm" target="FRAME1"><center>aprons</center></A>
</DIV>

Twey
04-27-2006, 06:01 PM
It should be:
</style>
<div id="Apron-Button">
<a href="/index_files/aprons.htm" target="FRAME1"><p style="text-align:center;">aprons</p></a>
</div>Although a better idea would be to apply text-align:center; to #Apron-Button.

Lattman
04-27-2006, 06:39 PM
Hmmm...Problem is the pictures still load slowly now that I fixed the backslash issue...+ when I load the housekeeping section, 1st picture on the top always has a line on it...weird...

Thx for all your help...If I may just ask one last tip before I do my "homework", what seems to be the issue with the pictures loading slowly, any way I can have them load progressively or something, so that we don't get the missing link icon before the pictures load?

Thx again!

Twey
04-27-2006, 06:53 PM
They don't load slowly at all for me; perfectly normal.

any way I can have them load progressively or somethingWhat you're talking about is called "interlacing," and it's possible with GIF and PNG images, but not, to the best of my knowledge, with JPEG.

NXArmada
04-27-2006, 06:57 PM
Load fine here

mwinter
04-27-2006, 07:26 PM
Firefox appears to have stepped down slightly on this position; when I first used it, it wouldn't even load a page with a backslash in the URL. Now, it seems, it tries it as a directory seperator.Not so. It just silently percent-encodes the backslashes. That's why it doesn't resolve relative URIs in the way OP hoped. IE, on the other hand, converts backslashes to forward slashes before sending the request.


<a href="/index_files/aprons.htm" target="FRAME1"><p style="text-align:center;">aprons</p></a>A paragraph within a link?!


To the OP: I really isn't a good idea to use MS Office products to produce HTML. They generate the most vulgar markup.

Mike

Twey
04-27-2006, 07:33 PM
A paragraph within a link?!Ouch, yes, good point.
</style>
<div id="Apron-Button">
<p style="text-align:center;"><a href="/index_files/aprons.htm" target="FRAME1">aprons</a></p>
</div>
Not so. It just silently percent-encodes the backslashes.Ah -- IIS then handles them?

mwinter
04-27-2006, 07:46 PM
Not so. It just silently percent-encodes the backslashes.Ah -- IIS then handles them?Presumably. I edited a comment along those lines out of post as I couldn't remember exactly what form the original link URIs took. If they were,

&#160;&#160;\index_files\aprons.htm

and the like, then yes, IIS does either map them to forward slashes, or to the filesystem directly, rather than doing the proper thing and returning a 404 status code.

Mike

Lattman
04-27-2006, 08:32 PM
At this point, I believe I've eliminated much of the bugs, the only thing I don't like is the fact that I get the broken link icon a slit second before a picture loads...Is there a possibility I can get ride of this?

Thx!

Brochures
04-28-2006, 11:51 PM
Did you use framesets in designing your site? I have check all the links in your links menu, and the address never changes in the address bar. And yes your are slow in loading. The page bacome choppy also when I scroll it. Try to load your web site using a dial up connection to test for performance. Avoid large graphics because this causes slow loading of the site. Minimize HTML file size and complexity to maximize page display speed.
Master CSS conversion and shorthand. Shrink and speed up your JavaScript.

Hendricus
09-19-2007, 04:14 PM
the only thing I don't like is the fact that I get the broken link icon a slit second before a picture loads...Is there a possibility I can get ride of this?

I hate that too! Has anyone found a way to get rid of this dumb icon? I mean it's alright for Firefox to show it when the link is broken indeed. But not when it's waiting for an image to donwload...

Cheers

boogyman
09-19-2007, 04:24 PM
you can assign a "loading" image as a placeholder

Hendricus
09-20-2007, 08:15 PM
But that means I need to replace all image with javascript once they're loaded... so that is even worse :) Too bad lowsrc isn't xhtml valid, that would have been the solution I guess...

Twey
09-20-2007, 09:17 PM
Interlace your images?

I don't suggest using XHTML, IE doesn't support it yet.

djr33
09-20-2007, 09:47 PM
If you don't use XHTML, then you could use that.

As for interlaced images, that's exactly what you should do to load them. Choose progressive loading in the export options. Not really sure how to do it in all programs, but if it's an option it should be easy. It also, at least in photoshop, actually makes the filesize lower. I do it with every jpg I save.

Twey
09-20-2007, 10:59 PM
If you don't use XHTML, then you could use that.If it's not in XHTML 1.0 Strict, it won't be in HTML 4.01 Strict either -- XHTML 1.0 is a direct port of HTML 4.01 to XML.
It also, at least in photoshop, actually makes the filesize lower.GIMP too (for JPEGs).

insanemonkey
09-27-2007, 05:03 AM
it might be the format you have the images in... and for some reason I can load them into a new page,, are you using javascript? and your coding might also be making them load slower then usual try formatting them into a gif or jpg or png....

Rockonmetal
11-05-2007, 01:54 AM
What type of internet at your office do you have... if it is fairly slow then that is most likely why... also if your running any programs it will slow down stuff a little bit, internet speeds at the office are low because you have 10-1000 computers accessing like 3 network monitors and they are a little overloaded. I have a fast internet connection and the pictures always load fast, I have know idea what you could do to make it faster,

tjustleft
11-18-2007, 05:18 AM
I see backslashes in your URIs. There should never be backslashes in a URI.

I am using Kompozer 0.7.10 for some of my editing. I noticed in the previous version that when I would insert an image the source would show back slashes.
This isn't happening in the current version.

This may not apply to the situation but if an editor is being used it may have a similar glitch that would account for the backslashes. Just a thought.

jscheuer1
11-18-2007, 05:14 PM
Many early editors used the \ for local resources. That might even have been required on early MS OS's for local use/previewing of the page. If it ever was, it no longer is and / is always required on the web.

tjustleft
11-19-2007, 04:23 AM
Many early editors used the \ for local resources. That might even have been required on early MS OS's for local use/previewing of the page. If it ever was, it no longer is and / is always required on the web.

You're right. I forget that at the time I was using the older kompozer I making websites to put on disk to send to my daughters so they could run them at home.
Now that i decided to make one for the web I haven't seen that. I'm trying to learn html and css from the web at the same time as taking care of my 86 yr old grandad. I think his forgetfulness is contagious.

BLiZZaRD
11-19-2007, 04:40 AM
Get your grandad a laptop and open notepad for him and let him go. You may be surprised at the creativity you come up with. :D