Why is width banned by default?

[Nerdenberger]

per https://github.com/htmllint/htmllint/wiki/Options

Default: ['align', 'background', 'bgcolor', 'border', 'frameborder', 'longdesc', 'marginwidth', 'marginheight', 'scrolling', 'style', 'width']

The value of this option is a list of strings, each of which is an attribute name. Attributes with any of the given names are disallowed.

Isn't specifying height / width of an image best practice?

[ohcibi]

~HTML is markup not layout. width and height should be set with css.~

width and height make sense on inherently visual elements. It should be disabled for every other element nonetheless but fortunately this seems possible nowadays. I only updated this to remove confusion.

[mlochbaum]

I think setting width and height for images in css is a minority opinion. The real problem is that there's no way to configure banned attributes only for specific tags. This is fairly hard to get working, but the way options are handled has greatly improved and I think it will eventually become possible. Since https://github.com/htmllint/htmllint/issues/93 exists I'll close this as a duplicate of that.

(Please report issues like this to the main htmllint repository in the future, by the way.)

[Kristinita]

I remove width from attr-bans list and I think it would be nice to make it the default.

1. Best practice

Addy Osmani says:

Summary: Always include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.

And:

Modern browsers now set the default aspect ratio of images based on an image's width and height attributes so it’s valuable to set them to prevent layout shifts. Thanks to the CSS Working Group, developers just need to set width and height as normal:

For details, you can read full “Optimize Cumulative Layout Shift” article and also the article “Setting Height And Width On Images Is Important Again”.

2. Tools

I use posthtml-img-autosize, that automatically add width and height attributes for each img tag.

But I couldn’t find any tool that automatically adds id for each image and adds width and height to CSS for each id. Perhaps such a tool will not appear. So that I need to use the width attribute inside img tag.

Thanks.

[ohcibi]

I use posthtml-img-autosize, that automatically add width and height attributes for each img tag.

With such tooling width and height could be banned again, similar to -webkit prefixed css properties are banned in csslint in favor auf postcss/autoprefix. However I do see the necessity of width and height for images and videos in a markup sense now, as images and videos presentation is inherently visual.