By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,142 Members | 910 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,142 IT Pros & Developers. It's quick & easy.

Width attribute for <img> versus <img style="width:..."

P: n/a

Hello all,

I'd like to know and understand the difference between, say,

<img src="[path]/ImageFilename.png" width="123" height="456" alt="">

and

<img src="[path]/ImageFilename.png" style="width: 123px; height: 456px;"
alt="">

From a coding perspective, there is a difference. Also, from a webpage
design, I believe there is also a difference.

Why would the HTML form be deprecated or bad? ...versus the CSS form?

Gérard
--
remove blah to email me
Jul 24 '05 #1
Share this Question
Share on Google+
15 Replies


P: n/a
Gérard Talbot wrote:
I'd like to know and understand the difference between, say,

<img src="[path]/ImageFilename.png" width="123" height="456" alt="">

and

<img src="[path]/ImageFilename.png" style="width: 123px; height: 456px;"
alt="">
In the first form the width and height information is still present
when the CSS isn't used.
Why would the HTML form be deprecated or bad?


It isn't. Where did you read that?

Steve

Jul 24 '05 #2

P: n/a
Steve Pugh a écrit :
Gérard Talbot wrote:

I'd like to know and understand the difference between, say,

<img src="[path]/ImageFilename.png" width="123" height="456" alt="">

and

<img src="[path]/ImageFilename.png" style="width: 123px; height: 456px;"
alt="">

In the first form the width and height information is still present
when the CSS isn't used.

Why would the HTML form be deprecated or bad?

It isn't. Where did you read that?

Steve


I can't remember where I read that or who said so.

There are situations where it could be better to use the CSS form
(ie. the style="width: 123px; height: 456px;") code over the HTML
attribute code). Let's say you have 20 images on a page and they all
have the same width and height. Then you can do

img.SameDim {width: [valueX]; height: [valueY];}

but such kind of situation is not likely to appear often. So, when all
your images are of different dimensions, why would the CSS form be a
better coding practice or bring some benefits of some sort... I can't
see any...

Gérard
--
remove blah to email me
Jul 24 '05 #3

P: n/a
On Fri, 22 Jul 2005 08:17:54 -0400, Gérard Talbot
<ne***********@gtalbot.org> wrote:
There are situations where it could be better to use the CSS form
(ie. the style="width: 123px; height: 456px;") code over the HTML
attribute code). Let's say you have 20 images on a page and they all
have the same width and height. Then you can do

img.SameDim {width: [valueX]; height: [valueY];}


For what it's worth, I don't agree.

The size is an intrinsic property of the image, not a bit of
presentation like a margin.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you
Jul 24 '05 #4

P: n/a
Stan Brown a écrit :
On Fri, 22 Jul 2005 08:17:54 -0400, Gérard Talbot
<ne***********@gtalbot.org> wrote:

There are situations where it could be better to use the CSS form
(ie. the style="width: 123px; height: 456px;") code over the HTML
attribute code). Let's say you have 20 images on a page and they all
have the same width and height. Then you can do

img.SameDim {width: [valueX]; height: [valueY];}

For what it's worth, I don't agree.

The size is an intrinsic property of the image, not a bit of
presentation like a margin.


So, the general rule is everyone under normal circumstances should be
using the HTML form

<img src="[path]/ImageFilename.png" width="123" height="456" alt="">

and not the CSS form

<img src="[path]/ImageFilename.png" style="width: 123px; height: 456px;"
alt="">

That is pretty much what you're suggesting here, right? Just asking..

Gérard
--
remove blah to email me
Jul 24 '05 #5

P: n/a
On Fri, 22 Jul 2005 12:42:33 -0400, Gérard Talbot
<ne***********@gtalbot.org> wrote:

So, the general rule is everyone under normal circumstances should be
using the HTML form

<img src="[path]/ImageFilename.png" width="123" height="456" alt="">

and not the CSS form

<img src="[path]/ImageFilename.png" style="width: 123px; height: 456px;"
alt="">

That is pretty much what you're suggesting here, right?


Yes, that's what I'm suggesting, but I'd like to hear from folks who
are more expert than I am.
--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you
Jul 24 '05 #6

P: n/a
Stan Brown <th************@fastmail.fm> wrote:
The size is an intrinsic property of the image, not a bit of
presentation like a margin.


This implies, the image should always be displayed in its "natural"
size. But why should it be that way? The font size of a header is a
presentational attribute, but the area an image should be displayed in
is not?

How about a media=handheld stylesheet that scales big images down? How
about images using em values for height and width[1]?

With this point of view, src point to the "raw material" and the style
says how it should be displayed.
Bye,
Martin

[1] Not that useful for now, the image scaling algorithms are of low
quality so far
Jul 24 '05 #7

P: n/a
On Sat, 23 Jul 2005, Martin Bialasinski wrote:
Stan Brown <th************@fastmail.fm> wrote:
The size is an intrinsic property of the image, not a bit of
presentation like a margin.


This implies, the image should always be displayed in its "natural"
size.


No. One could take the view that the HTML defines the inherent size
of the image object, whereas the CSS proposes a display size - which
may be different from the inherent size. That would seem entirely
logical, for objects which are sized in pixels.

However, close reading of the W3C specifications suggests that they
hadn't entirely decided on these points, so their real intentions are
going to be guesswork to some extent.

Jul 24 '05 #8

P: n/a
Hi,

Martin Bialasinski wrote:
Stan Brown <th************@fastmail.fm> wrote:
The size is an intrinsic property of the image, not a bit of
presentation like a margin.
How about a media=handheld stylesheet that scales big images down? How
about images using em values for height and width[1]?
[1] Not that useful for now, the image scaling algorithms are of low
quality so far


The new AOL-Beta-Page (http://www.aol.com/) uses an elastic layout and
some (not all) images have relative sizes.

Chris

Jul 24 '05 #9

P: n/a
"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote:
One could take the view that the HTML defines the inherent size of
the image object
But it never did. They were always presentational attributes.
This is the definition as in HTML4, HTML3 was similar:

"When specified, the width and height attributes tell user agents to
override the natural image or object size in favor of these values."

The inherent size never was a concern, as the image data itself defines
it (or not as in vector graphics).
However, close reading of the W3C specifications suggests that they
hadn't entirely decided on these points, so their real intentions
are going to be guesswork to some extent.


There is no width and height for img in XHTML2. They seem to stick to
the definition in HTML. Or is this still undecided on?
Bye,
Martin
Jul 24 '05 #10

P: n/a
On Sat, 23 Jul 2005, Martin Bialasinski wrote:
"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote:
One could take the view that the HTML defines the inherent size of
the image object

Just to make clear that I was expressing that opinion from my
interpretation of first principles, not trying to second-guess what
the W3C specifically intended.
But it never did. They were always presentational attributes.
This is the definition as in HTML4, HTML3 was similar:
If by "HTML3" you mean the disreputable HTML/3.2 specification: that
did nothing more than to document what the "popular" browsers were
doing at that time, i.e presentational quasi HTML and no stylesheets.
I wouldn't draw any conclusions about what the W3C collectively
/wanted/ to happen, except in so far as can be deduced from subsequent
developments (i.e content-related markup in HTML, presentation
proposal(s) in a stylesheet, as we see in the movement to HTML4
Strict).
The inherent size never was a concern, as the image data itself
defines it (or not as in vector graphics).
That's true enough, although it means that until the image has been
fetched, the browser has no clue how big (in pixel size, I mean, not
in file size) it's going to be.
There is no width and height for img in XHTML2. They seem to stick to
the definition in HTML. Or is this still undecided on?


You know, IMG was supposed to be long since phased out by now.
Already in the discontinued HTML/3.0 proposal (which at least had some
meat in it[1], unlike the horrible HTML/3.2) it was to be phased out
in favour of the FIG, which in later versions of HTML became OBJECT.

Blame IE for making OBJECT so useless that no normal author seems to
trust it, despite the encouragement in the WAI! (But lots of nuisance
pages seem to abuse it, nevertheless...)

cheers

[1] Sure: with hindsight some of the things in the HTML/3.0 draft
could be done better now, but I reckon it was a fine proposal for its
time.
Jul 24 '05 #11

P: n/a
Steve Pugh wrote :
Gérard Talbot wrote:

I'd like to know and understand the difference between, say,

<img src="[path]/ImageFilename.png" width="123" height="456" alt="">

and

<img src="[path]/ImageFilename.png" style="width: 123px; height: 456px;"
alt="">

In the first form the width and height information is still present
when the CSS isn't used.


Even that is not true as I found out with Mozilla. It appears that width
and height attributes are mapped in style information in browsers,... at
least Mozilla. When one turns off, disables style support in Mozilla
browsers (Firefox included), then width and height attribute values for
<img> are ignored.

So, I do no see a lot of differences between both forms of declaring <img>.

The only possible difference would apply for non-CSS capable browsers
which render images.

Gérard
--
remove blah to email me
Jul 26 '05 #12

P: n/a
Stan Brown a écrit :
On Fri, 22 Jul 2005 08:17:54 -0400, Gérard Talbot
<ne***********@gtalbot.org> wrote:

There are situations where it could be better to use the CSS form
(ie. the style="width: 123px; height: 456px;") code over the HTML
attribute code). Let's say you have 20 images on a page and they all
have the same width and height. Then you can do

img.SameDim {width: [valueX]; height: [valueY];}

For what it's worth, I don't agree.

The size is an intrinsic property of the image, not a bit of
presentation like a margin.


I was thinking like you too. But then after checking with the HTML 4.01
spec, one can set the width and height attribute values to any positive
number or percentage. width and height attribute for <img> are not
attributes used to declare original physical dimensions of the image.

The gain from declaring a width value and an height value (which may not
be the original physical dimensions of the image) or from css
declarations (like width: [valueX]; height: [valueY];) is that it helps
speed up the rendering of the page. The browser knows how much space to
allocate a particular area of the page: it will even draw image
placeholders on a first draw, a first parsing+rendering of the page.
When one does not define any width and height, then the browser has to
download the image and then figure out its dimensions, space to allocate
and then redraw the page.

Gérard
--
remove blah to email me
Jul 26 '05 #13

P: n/a
Gérard Talbot wrote:
Steve Pugh wrote :
Gérard Talbot wrote:
I'd like to know and understand the difference between, say,

<img src="[path]/ImageFilename.png" width="123" height="456" alt="">

and

<img src="[path]/ImageFilename.png" style="width: 123px; height: 456px;"
alt="">
In the first form the width and height information is still present
when the CSS isn't used.


Even that is not true as I found out with Mozilla. It appears that width
and height attributes are mapped in style information in browsers,... at
least Mozilla. When one turns off, disables style support in Mozilla
browsers (Firefox included), then width and height attribute values for
<img> are ignored.


I believe that the technical term for this behavior is "bug".
So, I do no see a lot of differences between both forms of declaring <img>.

The only possible difference would apply for non-CSS capable browsers
which render images.


Please do not confuse the behavior of any particular browser with what
the specs say should happen.

Dave

Jul 26 '05 #14

P: n/a
Dave Anderson wrote :
Gérard Talbot wrote:
Steve Pugh wrote :
Gérard Talbot wrote:

I'd like to know and understand the difference between, say,

<img src="[path]/ImageFilename.png" width="123" height="456" alt="">

and

<img src="[path]/ImageFilename.png" style="width: 123px; height:
456px;"
alt="">
In the first form the width and height information is still present
when the CSS isn't used.

Even that is not true as I found out with Mozilla. It appears that
width and height attributes are mapped in style information in
browsers,... at least Mozilla. When one turns off, disables style
support in Mozilla browsers (Firefox included), then width and height
attribute values for <img> are ignored.

I believe that the technical term for this behavior is "bug".


Bug 301913: Width %tage attribute on img when style disabled is ignored
https://bugzilla.mozilla.org/show_bug.cgi?id=301913
was filed and resolved as invalid after discussion.

So, I do no see a lot of differences between both forms of declaring
<img>.

The only possible difference would apply for non-CSS capable browsers
which render images.

Please do not confuse the behavior of any particular browser with what
the specs say should happen.

Dave


Well, if you could elaborate and document what you seem to be suggesting
here, it would make a difference. I read the spec and nowhere did I find
something saying that disabling style in a browser should not affect
HTML attributes which are presentational.
Dave, I'm not trying to argue with you. I just don't see where precisely
in the spec says you're right (or support somehow your point of view)
and Mozilla is wrong.

Gérard
--
remove blah to email me
Jul 27 '05 #15

P: n/a
Gérard Talbot wrote:
Dave Anderson wrote :
Please do not confuse the behavior of any particular browser with what
the specs say should happen.


Well, if you could elaborate and document what you seem to be suggesting
here, it would make a difference. I read the spec and nowhere did I find
something saying that disabling style in a browser should not affect
HTML attributes which are presentational.
Dave, I'm not trying to argue with you. I just don't see where precisely
in the spec says you're right (or support somehow your point of view)
and Mozilla is wrong.


I think you've read more into my comment than I intended...

The point I was trying to make is just that any browser, no matter how
carefully designed and implemented and no matter how well its designers
understand all of the relevant specifications, will have bugs (and
usually also omissions and other glitches) -- so its behavior will
sometimes not match what the specifications say should happen.

Regarding your specific point, I'm not an expert on this spec but it's
impossible for *any* spec to specify all of the things which should not
happen. Especially in a case like this where the issue is whether one
spec modifies another, I believe that the only safe assumption is that,
in the absence of an explicit statement to the contrary, there is no
modification.

Dave

Aug 18 '05 #16

This discussion thread is closed

Replies have been disabled for this discussion.