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

Updated by Brady Stroud [SSW] 1 year ago. See history

123

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"
/>
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" />
Image

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

acknowledgements
related rules