width и height могут выступать в качестве атрибутов некоторых HTML-элементов.

Например:

<!-- валидные атрибуты -->
<img width="500" height="400" src="..." alt="...">
<iframe width="600" height="400" src="..."></iframe>
<svg width="20" height="20"></svg>

<!-- невалидные атрибуты -->
<div width="40" height="40"></div>
<span width="100" height="10"></span>

Такие атрибуты называются презентационными атрибутами. Нужно знать, что параметры, передаваемые элементу такими атрибутами, всегда будут перекрываться соответствующими значениями свойств таблицы стилей. Эта особенность позволяет использовать презентационные атрибуты в качестве последнего запасного варианта.

Так, если присутствует такое CSS-свойство:

img {
  width: 400px;
}

Его значение, будет перекрывать атрибут width="500" тега img в представленном выше HTML-коде. Значения презентационных атрибутов всегда учитываются в последнюю очередь, и они всегда будут перекрываться CSS-свойствами, с любыми приоритетами и специфичностью.

Визуально, может казаться, что презентационные атрибуты имеют высокий приоритет, подобно встроенным стилям:

<img style="width: 500px; height: 400px;" src="..." alt="...">

Использование встроенных стилей (которые могут применяться к любому элементу, в качестве параметров атрибута style) - максимально приоритетный способ объявить значения для ширины (width) и высоты (height), в отличие от HTML-атрибутов width и height, которые, наоборот, всегда имеют самый низкий приоритет.

CSS-свойства, объявленные в составе отдельного файла или отдельной таблицы стилей не способны переопределить значения встроенных стилей. Сделать это можно только применив правило !important.

img {
  width: 400px !important;
}

Итак, повторим еще раз: использование презенетационных атрибутов для валидных элементов (в том числе img, canvas, svg, video) - хорошая практика. В таких случая, они будут запасным вариантом представления информации о размерах блоков. Это особенно полезно для svg. Так же резервирование размеров блоков при рендеринге документа браузером отлично подходит для реализации плавной загрузки содержимого страницы.

Не забывайте, что презентационные атрибуты очень слабы и переопределяются CSS-свойствами.

Спасибо за внимание.