Inline HTML vs CSS - Image Width

[derrickorama]

I was wondering... I know that it's better to define the width and height of an image file in the img tag, but I was wondering if it's the same/better using CSS. I can't seem to find any resources on the Web specifically stating that CSS is better or the equivalent of the HTML attributes width & height. Does anyone know?

 

[monksnake]

I think it's more accepted to put width and height on the <img> tag itself, instead of using CSS. I'll look up W3C to back my statement, if I can find it.

<.

 

[monksnake]

Snippet from

http://www.w3.org/TR/html4/struct/objects.html#visual

I'm thinking that my post above is incorrect.
(See highlighted)

13.7 Visual presentation of images, objects, and applets
[!]All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets.[/!]
13.7.1 Width and height
Attribute definitions

width = length [CN]
Image and object width override.
height = length [CN]
Image and object height override.
When specified, the width and height attributes tell user agents to override the natural image or object size in favor of these values.

When the object is an image, it is scaled. User agents should do their best to scale an object or image to match the width and height specified by the author. Note that lengths expressed as percentages are based on the horizontal or vertical space currently available, not on the natural size of the image, object, or applet.

The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.

13.7.2 White space around images and objects
Attribute definitions

hspace = pixels [CN]
Deprecated. This attribute specifies the amount of white space to be inserted to the left and right of an IMG, APPLET, or OBJECT. The default value is not specified, but is generally a small, non-zero length.
vspace = pixels [CN]
Deprecated. This attribute specifies the amount of white space to be inserted above and below an IMG, APPLET, or OBJECT. The default value is not specified, but is generally a small, non-zero length.
13.7.3 Borders
An image or object may be surrounded by a border (e.g., when a border is specified by the user or when the image is the content of an A element).

Attribute definitions

border = pixels [CN]
Deprecated. This attribute specifies the width of an IMG or OBJECT border, in pixels. The default value for this attribute depends on the user agent.
13.7.4 Alignment
Attribute definitions

align = bottom|middle|top|left|right
Deprecated. This attribute specifies the position of an IMG, OBJECT, or APPLET with respect to its context.
The following values for align concern the object's position with respect to surrounding text:

bottom: means that the bottom of the object should be vertically aligned with the current baseline. This is the default value.
middle: means that the center of the object should be vertically aligned with the current baseline.
top: means that the top of the object should be vertically aligned with the top of the current text line.
Two other values, left and right, cause the image to float to the current left or right margin. They are discussed in the section on floating objects.

Differing interpretations of align. User agents vary in their interpretation of the align attribute. Some only take into account what has occurred on the text line prior to the element, some take into account the text on both sides of the element.

<.

 

[harrymossman]

Absurd

 

[ca8msm]

What is "Absurd" and why?


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[monksnake]

I personally thought it was absurd to still be accepted to continue to use width and height <img> attributes since we have CSS.

<.

 

[monksnake]

However, I do notice that using width and height are not [!]yet[/!] deprecated, as all the other attributes are.



<.

 

[traingamer]

For stand-alone pictures, it makes sense to define the width and height in the img tag. For a block of pictures (e.g. thumbnails) that will be the same height and width, css makes more sense and is more compact.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Vragabond]

I do believe you should specify height and width in every img element. Think of browsers that will not (or refuse to) render CSS. If you provide image sizes in the img tag as well there was no harm done. And if someone has no CSS support and no pictures support, the sizes will still hold the space for images.

I do however set the image sizes for thumbnails and similar in a css document, overriding the html attributes (not really overriding because they are usually the same, but if I want to play around changing the size of a thumbnail, I can just switch the CSS sizes (that happens only during development and testing though, as I would replace images if I would resize them).

 

[ChrisHunt]

I continue to use the height and width attributes for the reasons Vrag suggests.

I'm not all that bothered with the finer points of CSS theology, but if you are you can think of it like this: The width and height of an individual image are an aspect of its content, just like its text equivalent (alt attribute) and tooltip (title attribute). As such they legitimately belong in the HTML rather than the CSS.

The existence/width/colour of any border around the image, the white space around it, its position on the page, are all ways in which the image is presented - so all should be done with CSS.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[derrickorama]

Thanks to all. I agree with Chris Hunt's statement about the height and width being an aspect of the images content. But does anyone know whether or not defining the image's height & width in the CSS increases download times? Does the browser use the size defined in the CSS or does the browser still parse the server for the image's height and width (because height & width was not defined in the img tag)?

 

[Foamcow]

Hmm

I would say that width and height are presentational since they can change without altering the meaning of the image.

The image 'content' would be the image itself (it's pixels), the alt attribute and a title. If any of these change, then the meaning of the image changes.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[BillyRayPreachersSon]

I'm with Vragabond and Chris on this one, preferring to specify an image's width and height as attributes in the tag.

does anyone know whether or not defining the image's height & width in the CSS increases download times?

I wouldn't have thought so. Even if you were showing a 1000x1000 image at 10x10, you'd still need to download all the image data to the browser.

Does the browser use the size defined in the CSS or does the browser still parse the server for the image's height and width

If you omit any sizing, the browser will work it out from the image header (it wouldn't require a new trip to the server for this, as the image data contains this).

I'd say the browser will always read this anyway, as it will require it for other reaons (scaling, internal calculations, etc).

However, omitting any sizing information could affect page rendering times, as the browser will have to re-jig the page content as it finds the dimensions of every image it loads (take a long tek-tips thread as a perfect example of this).

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]