Post Archive

› January 13, 2004

Image Height and Width: depreciated?

  • Reported by Tony

Anne van Kesteren has started a very interesting conversation based around the simple question “Do we need the HEIGHT and WIDTH attributes for the IMG element”.

Comments

1. January 13, 2004 03:34 PM

Quote this comment

Vuarnet Posted…

I have not idea about this subjet

I always use height and whidth, but the discussion in the Kesteren's post is very interesting.

I' m going to go to learn more and after speak about this point...

2. January 13, 2004 05:56 PM

Quote this comment

Anthony John Posted…

There's really no need that I'm aware of to use the height and width tags...if everything goes right. There are really only a few things I can think of that would make you use them: 1. Your page could be arranged in a funky way until the pics load, since the browser has no way of knowing how much space to reserve. 2. If, for some reason, the pic doesn't load...well, your layout could continue looking funky. 3. Some images, depending on your image creation program, will save 'one pixel off' its intended dimensions. For most people, the easiest fix is simply to place the correct dimensions in the code, stretching or shrinking the pic by one pixel, usually in only one direction. Other than those reasons, I'm not aware of any problems associated with NOT using the height and width tags.

3. January 13, 2004 11:56 PM

Quote this comment

Charles Posted…

I've heard a few people state that not using including height and width for img tags is an accessibility no-no... but maybe they didn't know what they were talking about.

4. January 14, 2004 07:54 PM

Quote this comment

liorean Posted…

Well, as for anyone stating they are deprecated, they are definitely not. This is from the XHTML 1.0 Strict DTD

<!ELEMENT img EMPTY>
<!ATTLIST img
  %attrs;
  src         %URI;          #REQUIRED
  alt         %Text;         #REQUIRED
  longdesc    %URI;          #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  usemap      %URI;          #IMPLIED
  ismap       (ismap)        #IMPLIED
  >

5. January 16, 2004 06:39 AM

Quote this comment

Rob Green Posted…

I don't think they are depreciated at all, although we should start relying on CSS for our layouts if we aren't already, there is almost certainly going to be an array of occasions where declaring the image size is neccessary.

The usage of the width and height properties of an image aren't really neccessary in all circumstances, but for images that are critical to the layout of the page and are not ‘content images’ I always include them.

6. January 16, 2004 12:35 PM

Quote this comment

Tony Posted…

Now when the DTD state that it's IMPLIED, what exactly does that mean? I know it doesn't mean required, as SRC and ALT are required. Just that they assume we're going to put it there? Which still leaves us the option of not using it, and using CSS.

7. January 16, 2004 01:22 PM

Quote this comment

liorean Posted…

#IMPLIED is kinda the default state, most attributes are implied. That means they are allowed but not required. #REQUIRED means they are required, and #FIXED value means, of course, that they may not be anything other than given value. The xmlns attribute for the html element in XHTML is an example of this.

The reason for the width and height attributes to not be depreceted is that they are metadata of the image, and not presentional data. They may be used for presentational reasons, but they are intended as metadata, in the same way the type attribute for the link element is.

8. January 16, 2004 04:27 PM

Quote this comment

Raknes Posted…

You can drop all the attributes that are #IMPLIED, BUT the browser need the data sooner or later and then get it by it self. It takes time.

For the same reason we close ALL tags... Write properly :)

9. January 16, 2004 08:22 PM

Quote this comment

Andreas Posted…

Only partly related (it's CSS, not XHTML), but pretty interesting: scaling images with CSS

  • with em = they scale when de-/increasing font size, in an Opera like way
  • with % = they scale to fit nicely into the browser window

Drawback is of course quality loss...

10. January 17, 2004 02:52 PM

Quote this comment

starvingartist Posted…

For repeating elements (such as graphical emoticons), I usually define the width and height via a single CSS class instead of using the equivalent HTML attributes in every single IMG tag.

This lets me:

  • use less redundant HTML code
  • I can easily change things like padding, border and vertical alignment for all the emoticons (if I wanted to).
  • the CSS is loaded pretty much instantly, so the browser applies the width and height before the image loads, just like HTML attributes.

But with the current use of FIR-style background images, many CSS websites don't use (or have to worry about) width and height attributes anymore anyway (in HTML or CSS).