Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts

    Question Image height and width

    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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    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
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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.

    Quote Originally Posted by rmedek View Post
    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.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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"
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by koyama View Post
    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.

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.
    Quote Originally Posted by rmedek View Post
    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.
    Quote Originally Posted by rmedek View Post
    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?

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by koyama View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •