Should I Specify Height and Width Attributes For My Imgs in Html

Should I specify height and width attributes for my IMGs in HTML?

According to Google Page Speed, you should always define the width and height in the image tag. But, to validate you can't use the style tag.

Also, you should always specify the same height and width as the actual image so the browser doesn't have to do any modifications to it like resizing.

I'd suggest doing it

<img src="..." height="20" width="50">

Edit: Someone suggested in the comments that it would be faster to just not add any attributes. According to Google (not that they are the end all of browser knowledge):

If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML tag, or in CSS. - Read More

Given that, you could do the img dimensions in CSS, but to validate you would have to do it in a CSS file, not inline.

BTW, Google Page Speed is a series of tips focused on rendering the page faster.

Is it still relevant to specify width and heigth attribute on images in HTML?

An img element has width and height attributes, but they're not required under any DOCTYPE.

Width and height attributes were only 'required' or relevant to reserve the space on the page and prevent the page moving around as it loads - which is important. This can be achieved using CSS instead providing the CSS loads quickly enough - it is likely to load before the images anyway, so all should be good.

It is also possible (and valid) to specify just one attribute, width or height and the browser will calculate the omitted value in order to maintain the correct aspect ratio.

You can specify percent values in the attributes if required. You don't need to use CSS for this, if that is what you are implying.

Also, it is relevant to add - Under HTML5 the width and height can only take a pixel value, in other words a valid non-negative integer.

Whether you use the width and height attributes can depend on your design. If you have lots of differently sized images, do you want to lump all the dimensions in the CSS or include them with the img?

Why should you put the image size in HTML code

By declaring width and height properties on your HTML tag, you are controlling the size of the image to be displayed, specially if the image size is too large and would fit in the entire webpage. What you are doing is an Inline style.

The alt is an optional property(the image tag works without setting an alt property). However, web crawlers use alt tag to index images on your website. So, your alt property should have values relevant to the content of your image so that search engines can easily find your website.

Should image size be defined in the img tag height/width attributes or in CSS?

I'm going to go against the grain here and state that the principle of separating content from layout (which would justify the answers that suggest using CSS) does not always apply to image height and width.

Each image has an innate, original height and width that can be derived from the image data. In the framework of content vs layout, I would say that this derived height and width information is content, not layout, and should therefore be rendered as HTML as element attributes.

This is much like the alt text, which can also be said to be derived from the image. This also supports the idea that an arbitrary user agent (e.g. a speech browser) should have that information in order to relate it to the user. At the least, the aspect ratio could prove useful ("image has a width of 15 and a height of 200"). Such user agents wouldn't necessarily process any CSS.

The spec says that the width and height attributes can also be used to override the height and width conveyed in the actual image file. I am not suggesting they be used for this. To override height and width, I believe CSS (inline, embedded or external) is the best approach.

So depending on what you want to do, you would specify one and/or the other. I think ideally, the original height and width would always be specified as HTML element attributes, while styling information should optionally be conveyed in CSS.

Does setting `width` and `height` attributes in picture or its img do anything?

Yes, using the height and width attributes in the <img> element (and nowhere else) does work as intended. You don't need to try to set any attributes on the <picture> element.

Run this code snippet for proof:

<p><code><img></code> without <code>height</code> and <code>width</code> attributes:</p><picture>  <source srcset="https://a.webpurr.com/Ql62.webp" type="image/webp">  <img src="https://i.stack.imgur.com/mraCN.jpg" alt="Example"></picture><p><code><img></code> with <code>height</code> and <code>width</code> attributes:</p><picture>  <source srcset="https://a.webpurr.com/Ql62.webp" type="image/webp">  <img src="https://i.stack.imgur.com/mraCN.jpg" width="100" height="100" alt="Example"></picture>