Images don't load properly in IE 5.x

[dorayme]

Hmm... I tried your page in IE 5, it has the same problem, it either
doesn't load at all, or the other time only the picture "two.jpg"
loaded. I guess that's the one that you re-exported?

I'm still not sure what's going on.

How is the "re-exported" picture different from the original?

two.jpg was yours re-exported, correct.

one.jpg was just yours with a name change. Repeated in two links
to change the nature of the <a> link for a test (a sort of long
shot to see if .jpg or .html as destination could be affecting
IE5)

Well, that's it then, there is something about the way it was
prepared, the actual file, the names or servers having nothing to
do with the matter since I had very simple names and code.

As to what, who knows? The point is, you need to put them all
into a good quality pic editor and re prepare them to be sure. As
it happened I did this in Fireworks and exported, choosing the
jpg format and the compression etc (few of the latter choices
likely affecting the matter... except one possibility which i
come to soon) As it was a new file being created, whatever was
corrupting the old in some respect that was being picked up by
IE, was gone.

There are some odd things that happen in these matters, sometimes
some browsers might not like pics that are prepared to load
"progressively", over a number of "passes" (you know, where pics
get more and more detailed and focussed).

 

[Vince Morgan]

Please take a look at the following webpage:
http://www.princeton.edu/~puttc/gallery_PKU_visit.htm

I have tested with various versions of IE, Firefox and Opera, and for
some reason in IE 5.01 and IE 5.5, the page stops loading after a
couple of thumbnail images, and then never finishes loading. This
problem does not happen in IE 6 and non-IE browsers.

Is there any explanation? The issue does not occur when I view the page
locally (i.e. the files are on my hard disk). Is there some problem
with how the server interacts with IE 5.x in this case? I cannot
identify any problems in the HTML source.

Thanks,

Ivan

I've recently seen a jpeg that wouldn't load in IE6 either. I opened it
in PSP and saved it and it was fine.
The reason I did that was that I suspected there could be something in the
header info that caused IE to think it may have stack overflow intentions.
Malformed headers in a jpeg could facilitate a stack attack a little while
back. That was fixed, however, I do believe that some jpegs (ones with
errors in the header info) will not display in some software (including
browsers) as a result.
I could be wrong, but Dorayme's example seems to confirm my already well
established suspicion.
Fortunately, if that actualy is the problem, simply resaving the file in
software that creates good headers will fix them.
You could compare the headers in the file Dorayme made, that works, against
the original in a text editor and see if thee are any obvious difference.
In fact, I'll do that now myself.
HTH
Vince Morgan

 

[Vince Morgan]

Please take a look at the following webpage:
http://www.princeton.edu/~puttc/gallery_PKU_visit.htm

I have tested with various versions of IE, Firefox and Opera, and for
some reason in IE 5.01 and IE 5.5, the page stops loading after a
couple of thumbnail images, and then never finishes loading. This
problem does not happen in IE 6 and non-IE browsers.

Is there any explanation? The issue does not occur when I view the page
locally (i.e. the files are on my hard disk). Is there some problem
with how the server interacts with IE 5.x in this case? I cannot
identify any problems in the HTML source.

Thanks,

Ivan

On opening it I see what BootNic observed, the file contains a lot of xml.
That is the problem.
The one that Dorayme re-exported has a new header without the extraneous
xml, so it works fine.
Vince Morgan

 

[=?iso-8859-1?B?SXZhbiBC+nRvcmE=?=]

On opening it I see what BootNic observed, the file contains a lot of xml.
That is the problem.
The one that Dorayme re-exported has a new header without the extraneous
xml, so it works fine.

Thanks to all for figuring this out!

Interesting to notice that IE will display the original picture fine
when viewing locally, but not when viewing on the internet.

One more quick question, when I resave the file in .jpeg, if I choose
the highest quality, the file size of the full picture will grow from
1.25 MB to 3.42 MB - any way to cut down on the size? I don't have any
professional image software, I'm limited to the freeware IrfanView or
XnView, which, so far, have satisfied my needs just fine. However, I
had to first save as .bmp and then again as .jpeg to get rid of the xml
headers.

 

[=?iso-8859-1?B?SXZhbiBC+nRvcmE=?=]

What everyone else said. After that, learn how to properly optimize
images for the web.

47KB for a 133x100 thumbnail is un-freakin' believable!

I have used batch resize and resample in irfanview to generate the
thumbnails. However, I see now that for the file which is 47 KB, if I
first save the original as .bmp, then resize to 100 px height and then
save as .jpg, it comes out to 12 KB instead. I'll have to see if there
is a batch way to do this. (I don't have any professional image
software.)

Thanks,

Ivan

 

[Jonathan N. Little]

Thanks to all for figuring this out!

Interesting to notice that IE will display the original picture fine
when viewing locally, but not when viewing on the internet.

One more quick question, when I resave the file in .jpeg, if I choose
the highest quality, the file size of the full picture will grow from
1.25 MB to 3.42 MB - any way to cut down on the size? I don't have any
professional image software, I'm limited to the freeware IrfanView or
XnView, which, so far, have satisfied my needs just fine. However, I
had to first save as .bmp

Don't ever use BMP on the web, Firstly it is uncompressed and secondly
it is OS specific (i.e., Windows) and the web spould be OS-indepedant

and then again as .jpeg to get rid of the xml
headers.

Lastly even as a JPG 1290.96 KB for an image is outrageously too big!
That may be part of your trouble. Rethink your design.

 

[Neredbojias]

To further the education of mankind, "Jukka K. Korpela"

Scripsit Neredbojias:


What makes you think so?

In the (-fairly distant) past, I've had trouble with things loading if
there were dashes in the filenames. These "things" were probably .htm
pages rather than images, but there was a problem therein which removing
the dashes corrected. I never analyzed or unambiguously identified the
exact cause of the problem because my real goal was just to prepare a
working page.

I've never seen them cause trouble on web
pages. I presume you're referring to the ASCII hyphen, i.e.
hyphen-minus; other dashes and hyphens surely cause problems.

Hyphens cause problems when URLs are presented in print media, since
word processors and typesetting programs typically treat a hyphen as
allowing a line break after it, resulting in ambiguities (is the
hyphen at the end of a line part of the URL or not).


They may confuse people, but technically they're safe.

Since you state what you do (-and I have little doubt that you are
correct), I suppose either modern browser/programming has eliminated the
effect I ran across or there was actually some other problem I failed to
identify.

 

[Neredbojias]

To further the education of mankind, dorayme

I put your pic up on a different server, at the same time
re-exporting it to jpg in a copy. Just tell me if you see 3
images ok in IE5

<http://members.optushome.com.au/droovies/test/test1.html>

By examining the code and seeing the differences between yours
and mine, the appearance or non-appearance of the image, you
might get a clue as to what is going on.

Good hunting (-literally)! After reading your and Bootnic's post, I
examined the unadulterated file in a hex editor. Sho' 'nuff, there's some
markup embedded in the jpeg which is undoubtedly causing the problem.
"Cleaning" the file with Irfanview's jpeg lossless plugin would probably
solve this while coincidentally leaving the original file image data
intact.

 

[Ed Seedhouse]

I suspect that may be the problem. I haven't had anything less than IE
6 for years. However, latest Web stats for browsers shows IE5 at 3% or
thereabouts. I'm not sure you should spend too much time on this unless
you have a very specific audience that is locked into 5.5.

And furthermore, since IE5 can't even be forced to be standards
compliant, of course pretty well any page is going to look different on
it. You might as well complain that the sky is blue. IE5 is what it is
and you can't change it.

 

[dorayme]

And furthermore, since IE5 can't even be forced to be standards
compliant, of course pretty well any page is going to look different on
it. You might as well complain that the sky is blue. IE5 is what it is
and you can't change it.

I don't think so. It is about the only thing in the universe that
is not what it is. You simply underestimate its uniqueness.

 

[Bergamot]

I have used batch resize and resample in irfanview to generate the
thumbnails. However, I see now that for the file which is 47 KB, if I
first save the original as .bmp, then resize to 100 px height and then
save as .jpg, it comes out to 12 KB instead.

12KB still seems pretty large for such a small graphic. I'd expect it to
be rather less than 5KB. Make sure your batch settings are set
reasonably, for example 70% quality, 72dpi should be plenty good enough
for thumbnails.

 

[Vince Morgan]

Thanks to all for figuring this out!

Interesting to notice that IE will display the original picture fine
when viewing locally, but not when viewing on the internet.

One more quick question, when I resave the file in .jpeg, if I choose
the highest quality, the file size of the full picture will grow from
1.25 MB to 3.42 MB - any way to cut down on the size? I don't have any
professional image software, I'm limited to the freeware IrfanView or
XnView, which, so far, have satisfied my needs just fine. However, I
had to first save as .bmp and then again as .jpeg to get rid of the xml
headers.

The quality of the site you are working on seems very good. There is
considerable image content on a couple of pages and with that in mind I
would like to make a suggestion.
PNG images have been around for a long time now and are well supported.
They offer good, truely lossless compression. Even master images can be
compressed without affecting the quality in any way.
They can also have an alpha channel, though there is little support for this
feature in browsers yet. In most cases they even compress better than a JPG
I realize that your resources are limited, but I would try very hard to find
a freeware image editor, that can save an image as a PNG, with as much
control over the compression as possible. Agonising over the degree of loss
you are prepared to accept to allow lower bandwith users reasonable access
is a thing of the past with PNG, IMHO.
All the best Ivan,
Vince Morgan

 

[Bergamot]

PNG images have been around for a long time now and are well supported.
They offer good, truely lossless compression.

PNG is not really suitable for all image types, at least not for web
images. It is ideal for vector art, pictures of text, and anything else
with a limited number of colors or when transparency is needed. It is
not really suitable for photos or art work with a lot of gradient colors.

They can also have an alpha channel, though there is little support for this

Actually, there is very good support for png alpha channel. IE is the
only "modern" browser that doesn't support it, at least not natively.

In most cases they even compress better than a JPG

Not true. A photo in png will probably weight several times more than in
jpg format.

 

[Vince Morgan]

PNG is not really suitable for all image types, at least not for web
images. It is ideal for vector art, pictures of text, and anything else
with a limited number of colors or when transparency is needed. It is
not really suitable for photos or art work with a lot of gradient colors.

I just tested a full color, highly saturated photo. The PNG was about 40%
larger than a relatively lossless JPG, so you are certainly correct.

this

Actually, there is very good support for png alpha channel. IE is the
only "modern" browser that doesn't support it, at least not natively.

Unfortunately, the number of browsers that are IE is very much in the
majority.
It would be a lot better for everyone if this were not the case IMHO, but
for the time being it's the unfortunate reality.

Not true. A photo in png will probably weight several times more than in
jpg format.

Are photos the majority of images on the net? Though, with all due respect
the OP is using photos, and I was directing my reply toward him, so my point
is mute regards,
Vince

 

[Bergamot]

Are photos the majority of images on the net?

That's not really relevant. The point is to use the correct format for
the image content. PNG isn't always the right choice.