img width height attributes vs. inline styles

[yb]

Hi,

is the following html markup:

<img src="xyz.jpg" width="100" height="100" alt="whatever" />

equivalent to:

<img src="xyz.jpg" style="width : 100px; height : 100px;"
alt="whatever" />

i.e. is setting width and height as attributes for img the same as
setting it in the style sheet?

Thank you.

[Stephen Poley]

On 21 Oct 2005 13:00:08 -0700, "yb" <ba*********@ya hoo.ca> wrote:

is the following html markup:

<img src="xyz.jpg" width="100" height="100" alt="whatever" />

equivalent to:

<img src="xyz.jpg" style="width : 100px; height : 100px;"
alt="whateve r" />

i.e. is setting width and height as attributes for img the same as
setting it in the style sheet?

Not quite. Often they will produce the same results, but not always.

Firstly, if you have non-zero margin and/or padding set on img elements,
the results may be different (I can't immediately recall which browsers
do what).

Secondly, using the first method enables browsers to quickly render
pages with several images, because they know how much space to reserve.
I don't think this is true of the second method - at least not for all
browsers.

Thirdly, if you have other CSS definitions which interact with these,
they may end up at different positions in the cascade. (I suppose this
may be a generalisation of my first point).

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Jim Moe]

yb wrote:

is the following html markup:
<img src="xyz.jpg" width="100" height="100" alt="whatever" />
equivalent to:
<img src="xyz.jpg" style="width : 100px; height : 100px;"
alt="whatever" />

i.e. is setting width and height as attributes for img the same as
setting it in the style sheet?

AFAIK, yes. Though it is not worth the trouble to put it in a
stylesheet unless it is a repeated feature. For one-off's it's easier and
more versatile to have it in the body.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Jukka K. Korpela]

Stephen Poley wrote:

Not quite. Often they will produce the same results, but not always.

In addition to the points mentioned, there are some other possibilities
for differences:

When style sheets are disabled (or at least the author style sheet is),
the settings in inline styles have no effect of course. The settings in
HTML attributes still take effect (unless the browser gets formal and
thinks that presentational attributes need to be really mapped to
corresponding CSS rules).

Some programs that filter out images based on their dimensions
(detecting e.g. common ad sizes) may simplistically look at information
at the HTML level only (because parsing and interpreting CSS is much
more work).

[Mellow Crow]

yb wrote:

is the following html markup:

<img src="xyz.jpg" width="100" height="100" alt="whatever" />

equivalent to:

<img src="xyz.jpg" style="width : 100px; height : 100px;"
alt="whatever" />

i.e. is setting width and height as attributes for img the same as
setting it in the style sheet?

Setting it via (X)HTML, rather than CSS, is the only way to ensure the page
layout remains "still" as downloading occurs. This might only be apparent
with a page with a number of images.

It is often claimed, eg as Stephen Poley did in an earlier post, that
explicitly setting the dimensions (in XTHML) gives speedier rendering of the
page. However, my crude experiments in IE6 and Firefox 1.x showd this to be
negligible.