Disappearing pictures on web page -...

User 82558 Photo


Registered User
73 posts

I maintain the web page for our seniors computer club and recently I redid the page with the officers pictures.

Today I recieved a complaint that 2 of the pictures pop up then disappear!!!

I had briefly checked the site when updating the page and checked with both IE and Firefox.

Today I went in using Firefox and there was no problem. The pictures appear and stay there just like they should.

However, using IE ( beta 8 ) the page loads and the pictures all load but when the loading progress bar is about half way across two of the pictures disappear and there is the infamous red x in the corner of the space for the picture.

The disappearing pictures are .png format. Other pictures that don't disappear are also in .png format and some are .gif format ( I know I need to fix those old .gifs into .png ).

The page used to work just fine. The only changes I made was changing the name of the officer and their picture ... no other change to the page code.

I'm puzzled why everything works in Firefox and blows up in IE.

And I have no clue why two of the pictures appear then disappear.

Any help / solutions / suggestions / jokes appreciated :)

Here is a link to the page:

http://members.cox.net/lpcc/officers.html
User 463058 Photo


Ambassador
1,073 posts

I'm not sure why this is happening, but you should use jpegs instead and absolutely must reduce their dimensions so they are the same size as you want them to appear on the page. At nearly 2MB each, that's just tooooooo much.
User 463058 Photo


Ambassador
1,073 posts

Did some checking and, for whatever reason, those two images are bad. It could be they didn't get uploaded completely. Most of information's there, just not all of it.
User 37670 Photo


Registered User
2,138 posts

I agree with Cary. Your images are very large, not only in height and width, but also in file size. It takes a long time to load the page.
You are using the html to resize your images from very large to small on the web page, but the source image is way too big. Use an image editor to edit the height and width of the image you want to be the same size as what you want to show on your web page. Make sure to keep a backup of the original large image so you never loose it.

Your image of Shirley is 1906 X 1902 pixels. On your web page, you are trying to squeeze it down to 225 X 200, and that puts the proportions off. That also makes it more difficult for the web browser to display your image. The file size is 1.4 mb, which is huge. The browser has to load the large image into a small space, and it has a hard time doing that, so sometimes it fails.
Attachments:
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 82558 Photo


Registered User
73 posts

Thanks for the prompt responses.

I guess being on a good high speed connection the image sizes don't bother me much and I never thought about how big they were -- except when trying to fit them on the page so I used the HTML to make 'em fit.

I will fix that easily enough.

However, suggestions to use .jpg suprise me. I thought .png was the recommended format for web graphics.

The other day I tried re-uploading Shirley's pic but it didn't fix the problem. It is really surprising to me that Firefox can handle the pics with no problem but IE barfs. Wonder why it works for Firefox. Hmmm.

Oh well, I can easily fix the files sizes with Paint Shop Pro X and change format too if I need to.

Still kinda puzzled about using .jpg instead of .png.

I need to fix a couple of the other pics ont he page that are .gif format. Will have to update them all.

Many thanks for the help. It is much appreciated.
User 37670 Photo


Registered User
2,138 posts

Photos that have many colors and contrasts will compress better using .jpg and that is why some choose it over .png. .png is great to replace certain images, and everyone will have a different opinion on this, but I prefer to use .png when I need a transparent background because more programs will do that with .png than with .gif

As for the different browsers handling the size difference. If you have a 600 X 600 image, and use html to shrink it down to 60 X 60, it will probably work (not recommended). If you use html to shrink it to 200 X 50, you have distorted the image and made it really difficult to display. The browser has to reconfigure the image if you scroll the window, and everything gets jumpy and haywire.(or at least it used to when I.E. allowed it). So now, I.E. just says 'NO' and skips loading the image to save on poor browser performance.

Hope that makes sense as to why the image will not load. Your conversion to smaller is not too far off, but it is not in preportion to the actual image size. I.E. is doing what it is designed to do, and only showing valid code and rules.
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 463058 Photo


Ambassador
1,073 posts

Arizona Willie wrote:
However, suggestions to use .jpg suprise me. I thought .png was the recommended format for web graphics.


It's one of them. You also have .gif and .jpg. Each has its own strength and weaknesses.

PNG is good for colorful images where you need to keep things as sharp as possible, since it does not use a lossy compression like jpeg. It's also nice for most things you might otherwise use .gif for.

Jpegs should be used for photographic images where it's lossy compression isn't noticable, as it allows for the smallest files sizes with such images, and you always want your web pages to be as small in their total size as possible, regardless of whatever connection hardware you may be using.

Gif is the only choice if you want an animated image, or if you need transparency in an image without having to resort to hacks in IE6. Otherwise, PNG offers better transparency options.
User 82558 Photo


Registered User
73 posts

Thanks for all the info. I had quite a struggle this morning. I converted all pics to .png and reduced their sizes to the same size I had the html reducing them to or as close as the size reducer in PSP wanted to do it.

Then NONE of the pictures would show. So I tried .jpg AND NONE OF THE PICS WOULD SHOW.

I was really stumped. I had uploaded using Coffeecup and wsFTP and everything seem ok. Everything worked when testing in Coffeecup using both default browser and favorite browser ( Firefox) but wouldn't work when posted to the ISP.

So I finally went onto the ISP web site to the web management tools and discovered the web space allotment was full!!

They only give us 10 gb and it had filled up because of those large pics ( plus I have other pages for the club there and probably have some large pics there too that I need to reduce ).

So I deleted the large pics and then it let me upload the new ones I had made.

Strangely neither Coffeecup nor wsFTP gave me any warning at all that the files weren't uploading ok. Everything seemed normal when I sent them in.

The real mystery now is why Firefox displayed the pics that the web site wouldn't let completely upload. The directory of the web site showed the file name with a 1K size. After I deleted the large images and reuploaded using the web tools from the ISP the file sizes were more like 34K. When I saw that 1K I knew something wasn't right then looked at the bottom of the screen where it told me the directory was full. Aaarrrrgggg.

Anyone, got the problem solved and everything seems to be running smoothly.

Now I need to spend a couple of days looking for large images and replacing them with smaller.

Thank you very very much to all who offered their expertise and showed me the light.
User 463058 Photo


Ambassador
1,073 posts

Arizona Willie wrote:
The real mystery now is why Firefox displayed the pics that the web site wouldn't let completely upload.


It's just the different ways the programs handle things. It looked like you were using the progressive png format. FF displayed all the information sent, which was enough for the small sizes the images were being displayed at.

IE also displayed what it received, until it realized the files were bad because they ended prematurely, so it just dumped what it had.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.