Do not use width and height on images?

[espresso]

I could have sworn you should no longer specify width and height in images, best practice right?

[EricWatson]

Doing so, just preserves the alotted space for the image before it appears. I've never used a height and width. But doing so is perfectly fine, and even suggested.

[ralph.m]

This came up recently. It is probably still good practice, because when height and width are set, a space is reserved for the image even if it has not yet loaded. Without this, a user may be trying to read the text before images have loaded, but the text keeps jumping around violently as each image loads, which can be both annoying and even upsetting.

[Erik J]

Best practice would be to use the width and height attributes in the tag. Because then the browser knows what space the image will take before it is downloaded. (In IE you have also the advanced option to "Show image download placeholders" that iirc reads the size in the tag.)

[RyanReese]

Hi, in tables in IE if you don't specify the height/width in the actual <img> via the attributes, then IE will jump the page around allocating space one image at a time, so yes you should include them .

It can be fiixed by table-layout:fixed; on the table however the easiest route is pututing them on there

[AutisticCuckoo]

Specifying the image dimensions via CSS should be equally good for reserving space, with the arguable benefits that you don't have to specify two presentational attributes and that you may reduce markup bloat somewhat.

There may be issues with some ancient browsers, but I don't think they are worth worrying about. IIRC, old Netscape versions wouldn't load more than 4 images in parallel if the dimensions weren't hardcoded into the markup.

I almost never use the width and height attributes for images any more. I use CSS instead.

[felgall]

You need to specify them in the HTML in order to reserve the right space for the image. This means the page doesn't have to be rearranged after the CSS and images load and it also handles the situation for browsers that do not understand CSS.

Unlike the textarea tag where the rows and cols are mandatory in the HTML the width and height are optional in the img tag as they can be worked out from the image once it has loaded.

Since the width and height are a part of the image it is semantically correct to include them in the HTML.

[AutisticCuckoo]

Originally Posted by felgall

You need to specify them in the HTML in order to reserve the right space for the image.

Only on the first load (before the CSS has been cached).

The HTML4 specification hints about the intended use for those attributes:

<!ATTLIST IMG
...
  height      %Length;       #IMPLIED  -- override height --
  width       %Length;       #IMPLIED  -- override width --
...
  >

It seems as if those attributes were meant to be used for overriding (i.e., resizing) images, not for specifying their natural dimensions.

[AlexDawson]

I tend to follow the convention of using width and height for images within the CSS as well, how I see it is if your going to follow standards, be consistent with your implementation. We don't debate or quibble with having those attributes elsewhere in the document however with images people seem to feel it's worth using them. My point of view is that width and height are stylistic elements, even when it comes to the IMG element (as it can manipulate the visual dimensions), ergo for the same reason as other elements it's better to just keep style and structure separately (even if the dimensions are fixed) for the sake of consistency.

[Paul O'B]

Firefox2 and under will misplace content very badly if image height and width attributes are missing. It doesn't matter if the css has the dimensions specified and the page loads with the content and images misplaced.

Once images and css are cached this no longer happens but it was a very common problem with gecko and occasionally IE.

Modern browsers seem to behave better but we still see the odd hiccough in the forums that boils down to the attributes being missing so I always prefer to use them when possible.

It's just another choice you have to make for yourself

[felgall]

Placing the width and height in the HTML saves you from having to put them in the CSS.

Also placing the actual width and height of an image in the CSS seems inappropriate since the CSS is supposed to be defining the appearance you want the page to have and not attributes that the content has already got even before it loads.

[AlexDawson]

Hmm that's interesting, do we have any statistics on usage numbers for Firefox 2? Most Firefox users tend to be passionate upgraders who don't linger on old version numbers for too long (the only usual hold-back is related to incompatible plug-ins), perhaps with some general numbers it would make the decision a bit easier.

PS: Felgall, arguably all HTML will have content which defines a set of dimensions (to hold the contents), and all of this will occur before the style is applied (manipulating such figures), what I would say is if you are going to claim that giving dimensions to an element which has predefined and existing dimensions set is unncessary then surely we should omit width and height entirely (for images) as those have already been preset by the content of that element.

[cydewaze]

What if you have your browser set to hide images, or if you have something like Adblock in FF that hides certain images? It seems like by not including the width and height attributes, the page structure could be rendered in an unexpected manner.

[RyanReese]

Originally Posted by cydewaze

What if you have your browser set to hide images, or if you have something like Adblock in FF that hides certain images? It seems like by not including the width and height attributes, the page structure could be rendered in an unexpected manner.

Adblock in FF generally don't hide images unless they are ads lol. So the OP should be fine in those reguards

[Paul O'B]

Originally Posted by AlexDawson

Hmm that's interesting, do we have any statistics on usage numbers for Firefox 2? Most Firefox users tend to be passionate upgraders who don't linger on old version numbers for too long (the only usual hold-back is related to incompatible plug-ins), perhaps with some general numbers it would make the decision a bit easier.

I don't suppose there are very many FF2 users at all but it does apply to all gecko versions that are equivalent to FF2 (and others based on that).

It used to be such a common problem that there is still a FAQ about this problem in the sticky thread at the top of the forum (but that was in 2005 ).

[AlexDawson]

I might re-evaluate my reasoning if there was enough Gecko2 users to justify the point, but as it currently stands I tend to just keep all stylistic elements separately as I tend to get a bit neurotic if I see code which "looks" out of place, and for me width and height attributes in the HTML is one of those things which tends to make me grit my teeth, though out of consideration for the reasons above, I don't tend to pick people up on it if they choose to use it (as it's technically valid).

[felgall]

Originally Posted by AlexDawson

PS: Felgall, arguably all HTML will have content which defines a set of dimensions (to hold the contents), and all of this will occur before the style is applied (manipulating such figures), what I would say is if you are going to claim that giving dimensions to an element which has predefined and existing dimensions set is unncessary then surely we should omit width and height entirely (for images) as those have already been preset by the content of that element.

that isn't true.

display:block elenemts have their default width and height calculated based on both the content and the browser viewport size.

display:inline elements do not have a width or height definable at all as they take up however much space they require.

only replaced elements such as images have a width and height that are a part of the actual content itself. If the width and height were not a part of the image itself then you would always have to specify it somewhere whereas you don't necessarily need to specify the width and height for images anywhere. If you do decide to specify the width and height then in te HTML is a more appropriate place than in the CSS since the width and height of the image are a part of the image itself and hence a part of the content.

[AlexDawson]

While block and inline elements are calculated by the content (and other relevant factors) their still calculated and determined unless otherwise overridden by those said items (which is what I was trying to put across). While replaced elements like images have their width and height automatically assigned by the image once it has been loaded (unless otherwise explicitly defined) the fact of the matter remains that they are still generated with or without the width and height being assigned, your arguing semantics when the issue of width and height on images is the same as determining cells for a table and whether the browser should calculate before or after to placehold the content. Sorry to say it but I don't really see your point, whether automatically or through code, the factors are the same from my perspective.

[ralph.m]

I may be missing something, but it seems that adding width and/or height to the CSS would potentially mean specifying a class or id for each image, or at least writing awkward rules to target specific images. Sounds more trouble than it's worth to me.

[felgall]

Originally Posted by AlexDawson

I don't really see your point, whether automatically or through code, the factors are the same from my perspective.

I agree. Whether automatic OR through the code the factors are the same but images require NEITHER of those. The width and height are a part of the image itself. Open the image file in any program and the image has the same width and height. The width and height of an image are independent of the computer.

With any other element in your web page other than replaced elements there is no inherent width and height. In all those cases the width and height are calculated automatically or provided through the code. Open those elements in a different program and the width and height can be totally different as the width and height are not a part of the actual element but are dependent on factors external to the actual element.

If you ask "how wide is xyz.jpg?" the question can be answered without reference to the web page. If you ask "how wide is the ABC data table?" the answer is unknown as it will vary depending on a whole lot of criteria not included in the question and not an inherent part of the table itself. You can'e even ask how wide a single letter is since letters of the alphabet do not have a specific width and height inherent in their mere existance the way that images do have.

If you don't specify a width and height for your images anywhere in the HTML or CSS or anywhere else the browser still does not need to calculate the size of the image because the image itself contains that information. The width and height of an image are a part of the image itself completely separate from the web page.

[AlexDawson]

Agreed, though my point was that as the browser CAN calculate the width and height of the image successfully then surely it's not a necessity, granted it means that your content will bounce about as the images load however as it can be omitted I see no issue with using CSS to manipulate the visual width and height (I see the width and height applied in the image as more like the browser default style rather than as part of the content) as without CSS the height and width can be naturally given to the image from the information it receives, just like an H1 will default to a particular style (just playing devils advocate).

[cydewaze]

Originally Posted by RyanReese

Adblock in FF generally don't hide images unless they are ads lol. So the OP should be fine in those reguards

So? What if the ads are built into the page structure and they get hidden? Same result. Not that I'm going to be coding any ads into any of my pages anytime soon, but someone has to do that coding. I see lots of ads on news sites that are built into the flow of the page.

[RyanReese]

I don't think adblock would remove it (like display:none so the other elements would have to flow around it. I think the makers would realize that would ccause page flow issues. (I don't use adblock on my FF so this is just presumptions)

[felgall]

One thing to consider that hasn't been mentioned yet is what will happen if for some reason one of the images is unable to load. If you specify the width and height in the img tag then the page will retain the intended layout and the alt text will be displayed in the area that would normally be allocated to the image. If you don't specify the width and height then the page will be laid out differently to when the image is there with the alt texy inline with the surrounding content.

Whether or not to include the width and height in the HTML probably ought to be determined by which of those two outcomes you want for when an image fails to load.

[Paul O'B]

Originally Posted by felgall

One thing to consider that hasn't been mentioned yet is what will happen if for some reason one of the images is unable to load. If you specify the width and height in the img tag then the page will retain the intended layout and the alt text will be displayed in the area that would normally be allocated to the image. If you don't specify the width and height then the page will be laid out differently to when the image is there with the alt texy inline with the surrounding content.

Whether or not to include the width and height in the HTML probably ought to be determined by which of those two outcomes you want for when an image fails to load.

That's a good point and I often see pages with the image src missing and the alt attribute text is running all over the content because the width and height have attributes been omitted from the image.