Image Width and Height Attributes?

HTML & CSS
1

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

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

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

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

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.:slight_smile:

There was another longer thread about it here.

6

Its a best practice if you will declare it through CSS,simply because it makes your code clean and neat.

7

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

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.