Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 4 down vote favorite

One of the tenets of responsive web design is responsive images: sizing images using percentages rather than concrete values. This is done via CSS.

The problem I have is the standard practice of including the width and height attributes on the img tag. This seems to be precluded by setting image sizes in CSS. For one, it's long been required to include the dimension attributes in the image tag. Also, these values were used to create space in the page before the image loaded.

As far as the sizing goes, I suppose it's possible to put the image into another element (e.g. figure) and set the image's width in CSS to be 100%. But that then requires sizing the container, possibly as a percentage of the parent element, and so on.

Am I not thinking straight on this, or is setting image size in CSS at odds with using the width and height attributes?

share|improve this question
I suppose it would really depend on what doctype you're using. HTML Strict might require you to use height and width attributes, however if you're using Transitional you could bypass the attributes and just use CSS. – Christopher May 9 '12 at 5:26
@Christopher The width and height attributes of the img element are not required under any DOCTYPE. There is no difference between Strict and Transitional in this respect. (If anything, however, it would be the other way around... less likely to be used under a Strict DOCTYPE since these are presentational attributes.) – w3d May 9 '12 at 9:08
I stand corrected. Therefore, you should be able to set the width and height with CSS just fine without penalty. – Christopher May 9 '12 at 10:20
@w3d That's interesting. I had figured those attributes were required, since web devs have for years had their importance drilled into our heads. Would you consider making your comment an answer? – Grant Palin May 9 '12 at 15:01
@Christopher I'm using the HTML 5 doctype, although it apparently makes no difference per w3d – Grant Palin May 9 '12 at 15:03

1 Answer

up vote 7 down vote accepted

The width and height attributes of the img element are not required under any DOCTYPE, if that is what were implying. There is no difference between Strict, Transitional and HTML5 in this respect.

As you suggest, these attributes were only 'required' to reserve the space on the page and prevent the page moving around as it loads - which is important. This can be achieved using CSS instead providing the CSS loads quickly enough - it is likely to load before the images anyway, so all should be good.

It is also possible (and valid) to specify just one attribute, width or height and the browser will calculate the omitted value in order to maintain the correct aspect ratio.

You can specify percent values in the attributes if required. You don't need to use CSS for this, if that is what you are implying. EDIT: However, I believe this has changed slightly under HTML5. Under HTML5 the width and height can only take a pixel value, in other words a valid non-negative integer.

Whether you use the width and height attributes can depend on your design. If you have lots of differently sized images, do you want to lump all the dimensions in the CSS or include them with the img?

share|improve this answer
Honestly, I had no idea that the dimension attributes were actually optional. The things you learn! How to handle the dimensions is something I will have to sort out myself, and is probably dependent on the design involved. – Grant Palin May 9 '12 at 22:48
It is also possible (and valid) to specify just one attribute, width or height and the browser will calculate the omitted value in order to maintain the correct aspect ratio. Just to note a change with HTML5... I believe HTML5 only permits a pixel (not percentage) value in these attributes. I've updated my answer. – w3d May 10 '12 at 8:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.