8

This link comes very close to my question, but seems to apply to syntax more than to actual rendered output:

I see that image height and width can be defined in the actual html img tag, in fact the way I read it it should be defined there. However, I am wondering about what matters when it actually comes to how the image is displayed. If I insert the following code

<img src="images/academia_vs_business.png" width="740" height="382" alt="" />

with no css stlying applied to the image, will it be rendered at it's native width and height?

If I do add css styling to that image, as in

img {
    width: 400px
}

Will it overrule the width attribute of the html?

If I do not specify the height and width of an image in the html, is the only problem that I am not conveying the actual image size to a non-visual user agent or are there other problems (such as the browser can't allocate space for the imgs during page load).

Isn't specifying size in the html tags redundant if the css is going to change image size anyway?

I guess this all could be summed up as the best practice to place and size images and I would love to hear others techniques.

Community
  • 1
  • 1
Startec
  • 12,496
  • 23
  • 93
  • 160
  • Inline CSS typically overrules external CSS, the exception being if the external CSS has an `!important` attribute. Generally you want to avoid using inline CSS but in the case of images, it does make sense to put height/width inline, although there is definitely no issue with styling it with an external CSS file either. – APAD1 Jul 14 '14 at 21:56
  • 2
    If all your images are going to be the same size (i.e. 400px) it makes sense to say so in CSS (once for all) and avoid duplication in your HTML. this reduces your HTML size and makes it easier if you need to modify them later to be, say, 425px (i.e. change it in one place in your CSS vs multiple places in your HTML) – blurfus Jul 14 '14 at 22:00
  • The `width` and `height` specified in the `img` tag above are not actually inline styles, which is strange (you could add inline styles as well) – Startec Jul 14 '14 at 22:04

1 Answers1

6

From the W3C website:

The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet. They may therefore be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.

See this answer to this question for more details

Community
  • 1
  • 1
Jacques Marais
  • 188
  • 1
  • 8