CODEWITHSUNDEEP
htmlcssimage
Startec
Startec

Reputation: 13206

The difference between specifying image size in html or css

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.

Upvotes: 8

Views: 2632

Answers (1)

Jacques Marais
Jacques Marais

Reputation: 188

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

Upvotes: 6

Related Questions