What are the consequences of using percentage for width,height attributes of an img element?

Question

Excuse me if it is a dumb question, but the fact is that I do not have any idea about it.

I was searching to find some way to position an img element in HTML pages that noticed this sentence from w3schools.com (It is speaking of setting width in an img element):

In HTML 4.01, the width could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.

It says that the width attribute must be set in pixels not in percent. But solving my problem was far more easier when using percentage. I used the percent and checked the result in the latest versions of FireFox, Chrome, and IE. All were OK.

Now, my question is that what are bad consequences of using percent (despite HTML5 directives) while it actually works fine? What should we care about and what we shouldn't?

Thank you very much for reading and clarifying the situation.

Answer 1

The main reason for giving image dimensions in HTML, rather than in CSS, is so that the user agent (the browser) can leave an appropriate amount of space in the page for the image while the browser is waiting for it to load. If the image size is left unset, the browser will have to rerender the page once the image has downloaded--and do the same again for each subsequent image on the page.

The WHATWG HTML5 docs state the following in the section on presentational markup:

For those reasons, presentational markup has been removed from HTML in this version. This change should not come as a surprise; HTML4 deprecated presentational markup many years ago and provided a mode (HTML4 Transitional) to help authors move away from presentational markup; later, XHTML 1.1 went further and obsoleted those features altogether.

I would assume that since percentage values are relative to the element in which an image is contained, they are considered to be presentational, whereas pixel dimensions are absolute and will not vary across platforms, user agents, or view ports.

As with many HTML properties and attributes, you can use invalid, obsolete, or non-recommended syntax and browsers will still render your page. This is partially because they are usually backward-compatible--i.e. they can render HTML docs written in previous versions of the markup language, when the syntax was valid.

Should you use invalid syntax? Well, you can do, but there are downsides to it: unpredictable browser rendering of invalid elements, poor browser performance, cross-browser compatibility issues, potential security concerns, and more. There is also the knowledge that there are HTML pedants out there who are looking at your syntax like it's something the dog threw up. Ultimately, if you can do something the right way--specifying your percentage widths in your css, not in your html--I don't see any point in doing something wrong just because the browsers that you tried it out on will still render the page.

As noted in my comment, image width and height can be specified in CSS using various different units--pixels, ems, rems, percent, centimetres, inches, etc -- see css measurement units @ w3.org.