Размер изображения должен быть указан в HTML?

Question

Я помню, что давным-давно была лучшая практика жестко задавать ширину и высоту для любого изображения (обычно так, чтобы при загрузке выделялось достаточное количество места), но сейчас, когда большинство людей работают на высокой скорости, а вещи в целом более динамичны, что является лучшимпрактиковаться для этого?По-прежнему предпочтительно, чтобы любое изображение содержимого имело встроенный размер, заданный с помощью html?

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

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

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

"Используя эту технику, мы определяем высоту как меру относительно ширины. У отступов и полей есть такие внутренние свойства, и мы можем использовать их для создания соотношений сторон для элементов, в которых нет содержимого. Поскольку заполнение имеет такую ​​возможность,мы можем установить padding-bottom относительно ширины элемента. Если мы также установим height равным 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%;
}

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

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

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

Answer 8

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