...

View Full Version : Image height and width



kosstr12
05-27-2007, 02:08 AM
Personally i dont think that you need to use height and width attributes on images. I mean, i think they are ok if you are trying to make an image smaller. But, if you try to make the image bigger it blurs, and doesn't look well.
What do you think about the attributes?


Thanks,
kosstr12

_Aerospace_Eng_
05-27-2007, 02:20 AM
Some browsers actually load the page faster if it knows the image width and height. I recommend that you set them. When not set some browsers will actually render the page incorrectly but will render correctly on next page load because it has the images cached and knows their height and width.

whizard
05-27-2007, 02:21 AM
They're good to use, because they let the browser know how big the image is so it can leave enough space while the image is still loading. If you don't use them, the page seems to load, and then you start to read, only to have the page shift all around in a very bothersome manner.

Be nice to your users
Dan

rmedek
05-27-2007, 05:14 PM
When not set some browsers will actually render the page incorrectly but will render correctly on next page load because it has the images cached and knows their height and width.

I ran into that issue and it drove me insane for over a year before I figured it out.

Besides, anything to help prevent the page from half rendering, then moving into position (like a page does when it's using a table layout) is okay with me.

koyama
05-27-2007, 06:06 PM
The main arguments above for including a width and height attribute seems to be to avoid disturbed rendering. That makes good sense to me. Still, it seems that the question is still open whether one should specify width and height as HTML attributes or CSS properties. I'm quite sure that both methods would prevent the rendering issue.

I imagine that one may argue that HTML width and height attributes should refer to the images intrinsic dimensions while CSS width and height properties should refer to the dimensions that should be used for presentation. In fact, these may differ. Following that idea, the HTML width and height attributes would ensure smooth rendering of the non-styled page as when styles are disabled while CSS width and height properties would ensure smooth rendering of the styled page.


I ran into that issue and it drove me insane for over a year before I figured it out.
Anyone knows of a source describing this bug? Which browsers does it happen in? It would be interesting to see a demo where the bug shows up every time. Even if it is a caching issue, it should be possible for demonstration purpose to prevent image caching e.g. be appending a random string to the image url.

_Aerospace_Eng_
05-27-2007, 06:28 PM
Firefox seemed to do this. It may have been earlier versions though. Hmm I did a search in google and it seems it happens in other browsers as well mainly the standard compliant ones. This is what I searched for "firefox renders page incorrectly on first load"

rmedek
05-27-2007, 08:50 PM
it seems that the question is still open whether one should specify width and height as HTML attributes or CSS properties. I'm quite sure that both methods would prevent the rendering issue.

When I was more pedantic about keeping everything in the stylesheet I attempted to keep the width and height attributes as CSS styles. After a while, though, I realized that an inline image _was_ content (albeit a picture rather than text) and so it makes perfect sense to keep the attributes in the HTML. But either way helps the rendering.



Anyone knows of a source describing this bug? Which browsers does it happen in? It would be interesting to see a demo where the bug shows up every time.

The site where I had the issue was http://cathyrivers.com, one of the first sites I've ever built. I was using png images for the headlines (News, Music, etc.) that were placed in div containers and without height and width attributes. The rendering drove me batty for a long time, it consistently loaded incorrectly in any Mozilla-based browser, until refresh. I ended up adding a height to the container div and that solved the problem.

koyama
05-28-2007, 03:03 AM
Firefox seemed to do this. It may have been earlier versions though. Hmm I did a search in google and it seems it happens in other browsers as well mainly the standard compliant ones. This is what I searched for "firefox renders page incorrectly on first load"
Thank you for your input. I did some searches on Google as you suggested, but seemed to get mixed results with no answers.

I am sure that there is an issue with Firefox 2.0.0.3 with occasionally incorrect rendering since I have seen it myself. Recently, there was a discussion here at CF with a similar issue. Remember? http://codingforums.com/showthread.php?t=114316

I managed to do some further testing and excluded some possibilities. I will shortly update the thread will a live example and provide some screenshots.

After a while, though, I realized that an inline image _was_ content (albeit a picture rather than text) and so it makes perfect sense to keep the attributes in the HTML.
This sounds reasonable. The intrinsic width and height of the image are 'real' properties of the image. As such they belong in the HTML document.

The site where I had the issue was http://cathyrivers.com, one of the first sites I've ever built.
Thanks for showing me that page. I do not doubt that you had such an issue. However, I downloaded the page and tried to reconstruct the buggy page by removing the height for #container. Unfortunately I didn't have success with that.

Maybe I am missing something, but I was just wondering why I didn't see width and height attributes for the images on that page? I thought that you had found that they were necessary for the page should render correctly?

rmedek
05-28-2007, 03:11 AM
Maybe I am missing something, but I was just wondering why I didn't see width and height attributes for the images on that page? I thought that you had found that they were necessary for the page should render correctly?

I should stress the “one of the first sites I've ever built” part. :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum