SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Width and Height Attributes?

    Is it still best practice to include width and height attributes in an image tag? I ask because a colleague told me last week that itís not necessary if you use CSS to set width and height properties on a block-level element which contains the image.

    Itís been so long since Iíve even considered this - I include the width and height attributes as a matter of habit, but now Iím curious if my colleague is right.

    I did see this same issue discussed in this thread, but that was in late 2008, so I'm curious to know if people's opinions have changed.

    Thanks,
    Frank

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    That thread is up to date, I'd say. Basically, if it doesn't make your CSS too messy, declare ehight and width in the style sheet, but if there are lots of images of different sizes, state dimensions in the HTML. The main thing to note is that you should do one or the other. With neither, browsers tend to jump around a lot while images are being downloaded, which is quite annoying.

  3. #3
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    if you would have container block width and height defined that would not contain the image. unless you have a overflow hidden set. which is not what you might want.

    if you know an image is bigger then your expected dimensions, you should set the dimensions on attribute IMO.
    you can also set the image width/height from css.

  4. #4
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph.m.

    webcosmo - I'm not sure what you're saying here:

    if you would have container block width and height defined that would not contain the image
    Could you elaborate?

    Thanks,
    Frank

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    It's still best where possible to supply the image height and width via the image attributes. Even if you supply these via css some browsers will not allocate the correct space for them and layouts can in certain circumstances get misplaced or at the very least jump around while loading.

    We still get one or 2 problems a month in the forums that specifically relate to this issue. It depends on what else is going on in the page but why risk it when the fix is so easy.

    There was another longer thread about it here.

  6. #6
    SitePoint Member
    Join Date
    May 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its a best practice if you will declare it through CSS,simply because it makes your code clean and neat.

  7. #7
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markme View Post
    Its a best practice if you will declare it through CSS,simply because it makes your code clean and neat.
    As Paul has pointed out, that may not work very well. There's no point having "clean and neat" code if the page misbehaves because of it.

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you are going to leave it out of the HTML then there's no point in making a mess of your CSS by adding it there as the pictures already know how big they are and can display to their correct size just as quickly without the CSS as they can with. It is only when you put the size in the HTML that you allow the browser to reserve the space while the images load.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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