13

If you are developing a html document strictly using current best practice of keeping styling out of the markup how do you best communicate image sizing?

Past best practice wants image height and width with the image in that it will render faster than the browser waiting for the image to download to get it's dimensions. But doing this seems to contravene isolating style out of the document.

Add an id attribute to each image and put the height/width in the css? Does this negate the rendering bonus of inline image height and width?

Improve this question

2 Answers 2

Reset to default
12

Having the width and height in the IMG element is not deprecated and is definitely the best way to tell the browser the width and height of an image. Going out of your way to do it another way is redundant and unnecessary (and possibly silly). Don't make any unnecessary work for yourself or the browser. Stick to the basics which work.

Improve this answer
3
  • 1
    ...and don't forget an ALT tag too, even if its blank, or compliance checkers will complain.
    – Talvi Watia
    Commented Sep 20, 2010 at 17:40
  • @Tchalvak Sorry but you're wrong. You can override width and height dynamically through server side programming and/or JavaScript. And by your logic you can't override inline styles either.
    – John Conde ♦
    Commented Mar 9, 2011 at 15:07
  • Whoops, looks like I was wrong about the lack of a css overwrite anyway, !important in the css does allow you to override the width & height attributes, so initially using width/height works well. Now I'm stuck in the vote down position though. If you felt like editing the answer, I'd change that. shrugs Not that it matters too much.
    – Kzqai
    Commented Mar 9, 2011 at 15:15
9

John Conde's answer is spot-on. Images have a width and height - it's part of their content, not their style. So there is no need to do a "separation" here.

However, one exception: CSS for image dimensions is useful if you have many images all the same size (e.g. thumbnails). Here it's much better to use a CSS class to cut down HTML and quicken development.

For a website's design including buttons and icons, your best solution there is CSS sprites.

Improve this answer
1
  • +1, css sprites make a ridiculous difference in the speed of a site.
    – Kzqai
    Commented Mar 9, 2011 at 15:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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