[whatwg] <img> element comments

[Matthew Raymond]

Lachlan Hunt wrote:
> I disagree.  Specifying the size is very good for incremental rendering, 
> but the alternatives are awful.
> 
> 1. <img ... style="height: 100px; width: 100px;">
> 
> The style attribute is far more presentational than the height and width 
> attributes.

   I don't see how either is more or less presentational. The |height|
and |width| attributes are entirely presentational, since their sole
purpose is to define the sizing of the image in the document layout.
They do not give the dimensions of the image itself, nor could you
define them in such a way without breaking pages. Therefore, the |style|
attribute with width and height properties, however undesirable, is no
worse than using |width| and |height| attributes.

> 2. <img ... id="foo">
> 
> #foo { height: 100px; width: 100px; }

   This is not entirely true:

| <img src="foo">

| img[src="foo"] { height: 100px; width: 100px; }

   And the above will style all instances of the image, not just the one
with the |id| "foo".

   However, even if this weren't the case, and you has to use |id|, if
we're talking about images that have non-presentational value and their
own unique dimensions, aren't we also talking about content that we
might want to link to directly rather than simply linking to the
containing page?

> This is simply not feasible in most cases, unless there are very few 
> images on the site.  Think about flickr, it just wouldn't be possible to 
> specify the dimensions of all their images in a stylesheet.

   You can specify the sizes in an additional <style> element. The
primary site styling will be in a separate CSS file, while the
page-specific (and image-specific) styling can remain in the document,
and therefore can be dynamically generated on the server. (Not to
mention that the style sheet itself could be dynamically generated on
the server, although that would negatively impact caching.)

   Also, Flickr is a bad example, because when you perform a search,
images often have widths and heights of 240, so you could use a |class|
attribute on the images that sets the initial styling...

| thumbnail { height: 240px; width: 240px; }

...and then you only have to set at most one CSS property per thumbnail
image.