Image appearance

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

museolog

Thread Starter
Joined
Jan 12, 2008
Messages
36
On some computers, the portrait images on the following pages appear compressed vertically. When refreshed or the properties are checked, they usually 'uncompress' but return to the compressed state if refreshed again. Does anyone have any idea why? I'm using Dreamweaver 8.0.2.
http://www.le.ac.uk/ms/contactus/richardsandell.html
http://www.le.ac.uk/ms/contactus/eileanhoopergreenhill.html
http://www.le.ac.uk/ms/contactus/annbrysbaert.html
http://www.le.ac.uk/ms/contactus/lisannegibson.html
http://www.le.ac.uk/ms/contactus/vivgolding.html
http://www.le.ac.uk/ms/contactus/suzannemacleod.html
http://www.le.ac.uk/ms/contactus/davidunwin.html
http://www.le.ac.uk/ms/contactus/sheilawatson.html

BTW, I know they're not great pix; they're an interim measure until I can get better portraits.

Thanks,

Jim
 

tomdkat

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
On some computers, the portrait images on the following pages appear compressed vertically. When refreshed or the properties are checked, they usually 'uncompress' but return to the compressed state if refreshed again. Does anyone have any idea why?
I just viewed some of the pages in Opera 9.52 on Windows XP and didn't experience the behavior you describe. What I do see is the alt text for the photo appearing first and then the photo appearing later.

One possible explanation is the behavior you see is a browser rendering issue. If the page is rendered before all of the content has been fully downloaded, the page can sometimes render strangely. I've seen instances where Opera or Firefox will "misrender" a page once and then render it fine when reloaded or when the cache is cleared and the page is loaded fresh again.

One thing you could do to address is this is preload the people's photos on the "staff list" page or something. That way, they should already be cached when the individual's pages are viewed and those pages might render correctly more consistently. Just a thought. :)

Peace...
 

museolog

Thread Starter
Joined
Jan 12, 2008
Messages
36
Thanks Tomdkat,

I'm grateful for your advice.

I'm not sure why it should happen with these particular images and not with any others on the Museum Studies website www.le.ac.uk/ms/. Also, I don't know how to preload the images, and finally, not everybody will go to the Staff list page first - there's a lot of searching by academic names because their publications are so well known.

J
 

tomdkat

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
I'm not sure why it should happen with these particular images and not with any others on the Museum Studies website www.le.ac.uk/ms/.
I think I might have found something. Look at the .photo class definition in your stylesheet:

Code:
/*style used for placing photos when used with a div*/
.photo {
	_margin: 0 5px 10px 5px;
	width: auto;
	height: auto;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
On this page:
http://www.le.ac.uk/ms/contactus/vivgolding.html

I see the slight lag in image loading as I described above. The photo on that page is assigned the "photo" class. On this page:

http://www.le.ac.uk/ms/research/research.html

The photo at the top had a slight lag in loading (which is fine) BUT the dimensions of the space for the image didn't change as the photo was loaded. On this page, the photo is NOT assigned the "photo" class.

I'm thinking the "height: auto;" in the photo class definition might be causing or contributing to the behavior you're seeing. In each case I've seen, an image of class "photo" also had the physical dimensions specified as inline attributes. I'm thinking the "height: auto" causes the space for the photo to be narrow until the photo loads and then it expands. Try removing "height: auto" from the "photo" class definition and see what happens.

Also, I don't know how to preload the images,
There are JavaScript scripts available for doing this and there are some CSS techniques you can use to preload images. Here is an example of using CSS to preload images.

and finally, not everybody will go to the Staff list page first - there's a lot of searching by academic names because their publications are so well known.
That's fine. You're maintaining the site so you should be able to find the best spot to preload images, if you decide to go that route. :)

One last thing, on this page:

http://www.le.ac.uk/ms/research/rcmg.html

The photo near the top is being scaled by the browser to 200px wide. If you prescale ALL images to the desired dimensions, you can make them have smaller file sizes which will cause them to download faster and therefore load on the page faster. Some of the photos have much larger file sizes than I think they really need. Here is an example:

http://www.le.ac.uk/ms/contactus/annbrysbaert.html

The photo on that page is 53kb when you should be able to get it well under 10kb without losing any image quality. Attached is an example of what I mean. See if you can distinguish between the attached photo and the one that's live on the site.

Peace...
 

Attachments

museolog

Thread Starter
Joined
Jan 12, 2008
Messages
36
Thanks again Tomdkat,

i was coming round to thinking about the css. Unfortunately, the templates and styles were all created while I was off ill for 5 weeks, so I'm not as au fait with them as I ought to be. I've taken out the width: auto; and the height: auto; but I'll have to wait until I get home to try it on my (slower) laptop - no wireless for it here - complicated story.

I do know about the pic sizes and ought to get to them because you're absolutely right about the larger file sizes and quality. A soon as I get my head above water, I'll get onto it. Meanwhile, many thanks. I'll mark this solved when I've checked it out.

Jim
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Members online

Top