473,287 Members | 1,663 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

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


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
15 122008
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
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
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
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
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
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
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
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
"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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

22
by: David. E. Goble | last post by:
Hi All; I have a few of these; sigsImages="sigs/finished1.jpg" sigsImages="sigs/foghorn.jpg" lower I have;
1
by: lwhitb1 | last post by:
I have been trying to load a javascript function from the body onload html tag, but I only want the function to load the first time the page is loaded: I have investigated but haven't found...
17
by: Alan Silver | last post by:
Hello, I have a page which I am converting to use themes. The page has an HTML <input type="image"> element that is used to post to another page. I would like to replace this with a server...
3
by: rkhurana | last post by:
Hi I am writing a JSF application that uses some third party charts. While I can see the chart but the javascript that is supposed to calla function to update chart periodically has a problem. It...
8
by: Ulysse | last post by:
Hello, I need to clean the string like this : string = """ bonne mentalit&eacute; mec!:) \n <br>bon pour info moi je suis un serial posteur arceleur dictateur ^^* \n ...
3
by: Aaron | last post by:
I'm trying to parse a table on a webpage to pull down some data I need. The page is based off of information entered into a form. when you submit the data from the form it displays a...
1
by: zaidalin79 | last post by:
I am in a JavaScript class, and we have to get all of our code to validate at the w3c website... Here is my code, it does what I want it to do which is require the user to enter the name and either...
7
by: Christian Hackl | last post by:
Hi everyone, I've got a question about what makes the "img" element's width/height attributes valid HTML or XHTML. First of all, this is a rather theoretical question, but digging through the...
3
by: blackrunner | last post by:
ERROR in my Query?! ERROR: Element GESCHLECHT is undefined in FORM. i think everything ok. Maby somebody can help me here Element GESCHLECHT is undefined in FORM. The error occurred...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.