Должен ли размер изображения указываться в html?

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

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

Я просто ответил на аналогичный вопрос на Wordpress Stack Exchange, а также на Webmaster Stack. Я размещаю его здесь, чтобы уточнить и помочь большему количеству людей. (администраторы/модераторы: если это не разрешено, дайте мне знать правильный способ помочь).

на самом деле не означает, что вам нужно указать ширину и высоту в html. Это означает, что вы должны зарезервировать правильное пространство и, когда изображение загружено, браузеру не нужно перепланировать и перерисовать страницу.      

Кроме того, если вы жестко кодируете размеры, это относится к типам поведения, вызывающему поражение. Если ваш макет не реагирует, это нормально, но если вы хотите сохранить отзывчивость, вы можете использовать только CSS для достижения результатов.

     

В большинстве случаев использование ширины и max-width: 100 будет выполнять эту работу, но этот пост от Smashing Magazine имеет интересную технику: вместо использования max-width: 100% вы можете использовать The Padding -Bottom Hack :

     

"С помощью метода мы определяем высоту как меру относительно ширины. Заполнение и маржа имеют такие внутренние свойства, и мы можем использовать их для создания пропорций для элементов, которые не содержат в них контента.   Поскольку у подкладки есть эта возможность, мы можем установить, чтобы нижнее покрытие было по отношению к ширине элемента. Если мы также установим высоту 0, мы получим то, что хотим. [...]

     

Следующий шаг - разместить изображение внутри контейнера и убедиться, что он заполняет контейнер. Для этого нам нужно поместить изображение абсолютно внутри контейнера, например: «

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Да, это все еще предпочтительнее.

Множество людей не находятся на высокоскоростных соединениях, а мобильные становятся все более распространенными.

Он не должен быть встроенным - вы можете сделать это во внешнем CSS. Некоторые старые браузеры, если вы не укажете размер, будут рассматривать только как 0px;

Его всегда лучше использовать CSS

Вы можете жестко задавать высоту и ширину изображения

.myimg img {
width: 10px;
height: 10px;
}

ваш файл изображения сам по себе должен быть размером, который вы хотите отобразить, поскольку, по большей части, если вы обеспокоены медленной загрузкой особенно! если у вас есть изображение 500X800 px, которое вы хотите показать только как 100X200, уменьшите его! размер файла будет намного меньше, поэтому он будет загружаться быстрее :)

Я бы сказал, да, если вы хотите убедиться, что пробел включен в случае, если изображение не загружается или во время загрузки документа. Но нет, если вы масштабируете/изменяете размер изображения с помощью этих атрибутов, так как его ненужная загрузка в браузере и вызывает искажение изображения.

Если вы разрабатываете совместимость с кросс-браузером, вы должны, по крайней мере, указать высоту и ширину в своем CSS для самого изображения. Я обнаружил несогласованность между FireFox, IE, Opera и т. Д., Если размеры не указаны специально для изображения. Из-за того, что каждый браузер, не говоря уже о разных версиях, по-разному относится к соблюдению стандартов HTML. Я обнаружил, что некоторые браузеры сделают все возможное, чтобы экстраполировать намерения дизайнеров HTML, в то время как другие просто каркают первую ошибку. Я также рекомендовал бы размеры em, а не пиксель или%, если вы собираетесь просматривать веб-сайт с мобильного устройства, такого как планшет. Я скажу, однако, я только начал играть с HTML5, поэтому не вижу разницы в HTML5 по отношению к изображениям.