Do you avoid having height/width in an image tag?

Last updated by Brady Stroud [SSW] about 2 months ago.See history

Specifying the width and height properties for an <img> tag of HTML can sometimes turn out to be more trouble than it's worth, particularly if the image is later updated with different dimensions. If the height / width ratio doesn't match that of original image, the image might be stretched.

Adding fixed widths to your images may also disrupt the responsiveness of your content.

In other words, you should not have the image dimensions specified in HTML unless you have a very specific reason to do so. Use CSS if you need to specify images dimensions.

<img
  src="images/codeauditor-logo.png"
  alt="Code Auditor logo"
  width="150"
  height="100"
/>

streched image
Figure: Bad example - Stretched image caused by inline height/width ratio that doesn't match

<img src="images/codeauditor-logo.png" alt="Code Auditor logo" />

non streched image
Figure: Good example - Avoiding inline height/width ratio keeps the image as original

Adam Cogan
Tiago Araujo
We open source. Powered by GitHub