Mobile app version of vmapp.org
Login or Join
Dunderdale272

: Communicating image size, best practice 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?

@Dunderdale272

Posted in: #Css #Html #Images

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?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Dunderdale272

2 Comments

Sorted by latest first Latest Oldest Best

 

@Yeniel560

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.

10% popularity Vote Up Vote Down


 

@Kevin317

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme