Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
add comment

2 Answers

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.

share|improve this answer
1  
...and don't forget an ALT tag too, even if its blank, or compliance checkers will complain. –  Talvi Watia Sep 20 '10 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 Mar 9 '11 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 Mar 9 '11 at 15:15
add comment

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.

share|improve this answer
    
+1, css sprites make a ridiculous difference in the speed of a site. –  Kzqai Mar 9 '11 at 15:21
add comment

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.