Image Attributes

[owerio]

Hello. It is said that adding width and height attributes to img tag help browsers render image file better.

<img src="#" id="first" width="50" height="50" />

But do these width and height attributes belong to semantic html and should always reside in html or do I have to transport these attributes to css, as below?

#first {

width:50px;
height:50px;

}

And lastly if css is to be used, is same improvement of image rendering still retained?

Thanks in advance.

[AutisticCuckoo]

I'd say they belong in the CSS. The improvement in rendering consists of the browser knowing how much space to reserve for the image. If the dimensions aren't specified in the CSS or through HTML attributes, the browser uses a (usually very small) default size. Once it starts downloading the image and finds out the true dimensions it has to reallocate space for it, which usually means reflowing all subsequent content. The effect, as far as the user is concerned, is that the content of the page keeps moving around for a while.

[aldomatic]

I always wondered this myself, great to see some insight on the topic.

[Black Max]

Correct me if I'm wrong, but haven't IMG height and width attributes been deprecated?

[logic_earth]

I myself consider the width and height attributes of an image element as added information more then presentation. [They describe the image.] When it represents the actual width and height of the image. Use it to change the width and/or height then I would consider it presentation and should be offloaded to CSS.

Thats my personal opinion.

Correct me if I'm wrong, but haven't IMG height and width attributes been deprecated?

Nope its part of the strict doctype
http://www.w3schools.com/tags/tag_img.asp

[Karpie]

I would never even consider putting image height and width in CSS. The attributes aren't presentational; they're attributes of the image.

And if you put it in the CSS, you'd have to stick an ID on every single image, reference all those images in your stylesheet.... which would add a lot of pointless bulk everywhere.

[Dan Schulz]

I agree with Karpie on this one - leave them in the HTML. That way even if the CSS doesn't get applied, the browser can still render the image without having to guess the dimensions of the file.

[AutisticCuckoo]

And if you put it in the CSS, you'd have to stick an ID on every single image, reference all those images in your stylesheet.... which would add a lot of pointless bulk everywhere.

For aesthetic reasons, I think it's likely that you won't have different sizes for every single image. You might use two or three different sizes on a site, which means you can use one or two classes instead of IDs.

And the width and height are presentational, in my opinion. The meaning (semantics) of the image doesn't change whether you include them or omit them.

[logic_earth]

And the width and height are presentational, in my opinion. The meaning (semantics) of the image doesn't change whether you include them or omit them.

But you have to download the image in order to get those semantics.

[AutisticCuckoo]

But you have to download the image in order to get those semantics.

No, the semantic meaning of the image is whatever text equivalent you've specified in the alt attribute. That doesn't change whether the image is visible or not, or whether the dimensions are specified in the markup or not.

The only difference after downloading the image is that the presentation of the information is different (as an image rather than as the text equivalent).

[croatiankid]

I agree with Karpie and Dan here.

[mcaulay]

Alongside others here, i'd add my weight to defining these attributes in the html. There is however another method not discussed here yet...that is to output your images at the size required for display, (this should be done anyway in my opinion), this way there is the option to not include width and height attributes in the html nor to define it in css, instead you offload that task to the browser itself, which will know the width and height when it downloads the image...of course, you're making the browser do more work than it needs to...hence just define it in the html.....just added this method in the interests of the bigger picture in this discussion

[C. Ankerstjerne]

The way I see this, there are three issues here: the semantic, syntax and the practical.


From a syntax point of view, the height and width attributes are perfectly legal, in that they are part of the DTD. They are listed as implied, though, so they are technically required to be present at all.


From a semantic point of view, it can be argued that the attributes are presentational. The W3C does not consider the attributes presentational, however, as can be deduced from the quote below, and the fact that the attributes are not listed as deprecated:

All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets

Of course, W3C's perception of the world isn't gospel, but I would still consider it a very strong indication.


The conclusion of the practical point of view might depend on the required usage. If all images are to be of the same size, moving the height and width specifications to a style sheet will save some bandwidth (and possibly some time, at least if the pages are hand-coded). If the images are not all the same size (such as the images on my websites, none of which have the same size), setting up classes and applying them would take more time and require more bandwidth than using the attributes. In that case, the size could be set up through an inline style, but this would not save bandwidth and would not give any of the benefits CSS would usually give.

The main practical problem is if the user has disabled style sheets. My guess if that these users would often be those who either have a slow connection or who have visual impairments. These users will also suffer the most from 'skipping' pages, either because it would do so for a long time or because it would be very difficult to follow the text. Still, this is a fairly small minority, and therefore a minor issue.


Therefore, the way I see it, there is no right or wrong in this case. The syntax doesn't require anything, the semantic question is ambiguous and the practical benefits either depends on the usage or are negligible. Personally, I will continue to specify the attributes in the HTML document itself, as it is far easier for my purposes.

[Eudanil]

IMG height and width tags are necessary in my opinion. Also I always CSS unless its a mock up for a customer.
If I don't use the tags then I make sure the images are inside tables with the same set height and width for all images. I do this when the images have a max height & width but are meant to be different shapes.

Both ways keeps the images neat and tidy, also reserving room for the text. This option leaves your site with the same form of layout, whether the images load or not.

Also I would never do CSS for each ID, I would class my images into each area of width and height they are..

[C. Ankerstjerne]

Also I would never do CSS for each ID, I would class my images into each area of width and height they are..

That's still rather impractical, when your images' size varies so much, that you'd need to set up around 200 classes.

[Eudanil]

I've never needed to set up that many classes. If your images range that much in size then you have a crappy looking site

[Karpie]

Says you, who uses tables for images. Look who else can make gross generalizations

[Eudanil]

I used it once, on one for class cos our lecturer was on at us quite often over how much time we spend on the site.

But one wouldn't do that many classes for a site unless they were very messy

[JimmyP]

Wow, quite a debate going here...

Why are the height/width attributes necessary at all?

I always save my images in the size they'll be used so is there even a need to specify?

[C. Ankerstjerne]

If your images range that much in size then you have a crappy looking site

[...]

But one wouldn't do that many classes for a site unless they were very messy

Or maybe I just have a website with antique photographs, all of which are of difference height, because there were no image size standards at the time? Actually, that is a pretty likely reason, since I have a website just like that. It is even listed in my signature, but for your convenience, I will write the address here: http://www.panzerphotos.dk/index

Now, you can of course argue that you find this site 'crappy looking', but I know that other people would disagree.

Since you statement was written as fact, and I have proven above that it is at least up for discussion, your statement is invariably false.

JimmyP
If you don't set the width and height, the page will 'skip' until all the images have been downloaded, which is very annoying while reading.

[Stomme poes]

I've been told, unequivically, that I must add height and width attributes in the HTML, and not the CSS (unless I want to repeat myself). I was told at IWDN that without the attributes, the browser will go through the page twice, once for content and then again after it has all the images loaded and can see what their measurements are (what Christian said).

Unless it's used to change the display of the height and width, setting them in the HTML is not presentational in my mind, any more than the src is presentational. The image IS so-many pixels by so-many pixels. It just IS. I am not describing it. It is an intrinsic value just like the other values that are in that image file like EXT data, whether it's indexed or RGB, whatever.

I could wobble on this when talking about vectors, but since I cannot display them properly on a website (ahem, IE), I am only referring to raster images then.

[owerio]

I want to ask another related question. Say I have three images on the page. They are all 500x500 px sizeds. I dont add width and height attributes to images. But I wrap each image with a div and assign 500px values to height and width css properties of those divs. In other words I preserve a wrapper area for those images. In that case does the page skip or not?

[croatiankid]

If the div exists just to wrap the images then it's extra markup for no reason. Just put the dimensions on the images directly. It would preserve the space, but if that's all you're using the DIV for then there's no reason to use a DIV. However keep in mind that IMG is inline and DIV is block at default display if you're still going to use DIV.

[StylizE]

you need to declare IMG width and height so you will not encounter any problem especially on IE Browsers.