Image Width/Height as an Attribute or in CSS

Image width/height as an attribute or in CSS?

It should be defined inline. If you are using the img tag, that image should have semantic value to the content, which is why the alt attribute is required for validation.

If the image is to be part of the layout or template, you should use a tag other than the img tag and assign the image as a CSS background to the element. In this case, the image has no semantic meaning and therefore doesn't require the alt attribute. I'm fairly certain that most screen readers would not even know that a CSS image exists.

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?

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.

What are the accepted units for the img width attribute?

The accepted units for the width and height attributes of an HTML img element are pixels. You give the number of pixels, but don't put the 'px'.

From MDN

width
The intrinsic width of the image in pixels. Must be an integer without a unit.

It is possible to get confused between these attributes and the use of CSS properties of the same names. While the attributes had more use probably when load times were longer (they allowed the correct space for the img to be saved in the page) they may be making a comeback, see https://developer.mozilla.org/en-US/docs/Web/Media/images/aspect_ratio_mapping which ends with:

— eliminating another piece of jank from web layout! There is no need for a web developer to do anything special to their code to take advantage of this, besides returning to the habit of using width and height attributes in their HTML.

What's the difference between the HTML width / height attribute and the CSS width / height property on the img element?

A hot debate about the subject can be found here: Width attribute for image tag versus CSS

To sum it up:

The gain from declaring a width value and an height value (which may not be the original physical dimensions of the image) or from css declarations (like width: [valueX]; height: [valueY];) is that it helps speed up the rendering of the page. The browser knows how much space to allocate a particular area of the page: it will even draw image placeholders on a first draw, a first parsing+rendering of the page. When one does not define any width and height, then the browser has to download the image and then figure out its dimensions, space to allocate and then redraw the page.

This seems to be the most beneficial effect in my opinion.

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>

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