Flog — Web super–hero in training

HTML Image Attributes: Do they still belong?

I’ve been reading Dave Shea‘s recent post entitled “Image Attributes” and the related Glazkov post with some interest.

These posts discuss the use of the img elements’s height and width attributes, and if they have a place in modern web development.

Dave Shea’s argument boils down to the following points:

• Maintainability: Keeping height and widths within CSS would require a major effort as each image would require it’s own class and definition. This would also add to the file size significantly.
• Presentational: (He sort of goes off moot here) since height and width are presentational it would make sense to place them within the CSS. In some cases I agree this is the correct approach.
• Metadata: His most interesting argument is that height and width attributes are actually metadata associated with the image, so should logically remain in the HTML since it’s ‘content’.
• Renderability: Having the height and width within the HTML means the browser can render the page better with placeholders for images constant throughout the process. I don’t think this is too much of an issue, as the CSS would take over from the HTML in this case.

Discuss…

I agree with most of Dave’s points, mainly for the reasons of keeping metadata associated with the image and page maintenance.

Glazkov post “Graphics and Structural Markup: Keeping ‘pretties’ out of content” categorises images into a couple of categories: content graphics, and presentational graphics. The distinction obviously being that content graphics have a contextual link to the text content of the page, and presentational graphics are merely the pretties of the page design.

As I see it, content images and it’s metadata are intrinsically linked to the page’s content. So all content images should include height and width attributes.

Presentational images (that nice gradient button background, etc) SHOULD already be defined within the CSS. If there are any images left within the HTML source that aren’t content, then you probably should separate your presentation from content and move them to the CSS file anyhow.

If for some reason presentational images are required in the HTML source (such as your site logo, avatars, etc) then these for the sake of maintainability should not be specifically set. My argument being that my site’s appearance should be easily modified by replacing my current presentational files (CSS and images).
If my altered images are of a different dimension and the HTML source specifies fixed height and width attributes for any images, then the result will be ugly stretched graphics.

Summary of my approach

• Specify attributes for content images: Since height and width are metadata for an image
• Do NOT specify attributes for presentational images: Make modifying your site’s style painfree, replacing your site’s img coded logo should not require you to modify a single line of HTML.