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

Да . По-прежнему актуально указывать атрибуты ширины и высоты изображений в HTML.

Изображения часто загружаются дольше, чем HTML-код, составляющий остальную часть страницы. Поэтому рекомендуется указать размер изображение, чтобы браузер мог отобразить остальной текст на страницы, оставляя нужное количество места для изображения, которое все еще загружается.

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

Если мы говорим об адаптивности, вы можете использовать бутстрап (если нет, начните делать это). При работе с изображениями вы должны добавить класс img-responseive, это при необходимости изменит ширину изображения, а высота будет автоматической, поэтому при уменьшении ширины уменьшится и высота.

У вас всегда будет изображение, которое сохраняет тот же% своего контейнера и никогда не теряет соотношение сторон.

Нет никакого отношения к объявлениям SEO и размера изображения. Скорость страницы всегда будет одинаковой, поэтому, если изображение 800 x 600 пикселей, вы загрузите полное изображение, даже если вы объявите его как 60 x 40 пикселей.

Вы должны думать, что даже при использовании img-responseive максимальная ширина и высота этого изображения будут реальными размерами изображения. Таким образом, если у нас есть изображение 800 x 600 пикселей, оно не будет увеличивать его (потому что оно теряет качество).

Поэтому в 2016 году НЕ рекомендуется указывать высоту и ширину изображения. Вместо этого используйте загрузочный класс img-responsive, другой адаптивный класс фреймворка, который дает тот же результат, или вручную сделайте правильный jquery и css, чтобы достичь того же.

Надеюсь, это поможет!

Хорошие стандарты всегда заслуживают рекомендации. С помощью небольшого дополнительного кода довольно легко объединить статические (px) значения тега img и общие (em,%) значения, предоставленные CSS. И что еще проще, полностью избавьтесь от тега img и установите изображение в качестве фона для div с уникальным идентификатором. Если у вас несколько изображений, используйте спрайты и назначьте каждое изображение соответствующему div. Тогда ваши источники разметки будут выглядеть примерно как <div id="image_001"></div> - вот и все. Весы сами по себе; нет необходимости в раздутом ПО, таком как JQuery и т. д.

Что ж, основной ответ на этот вопрос (как и на большинство проблем с кодированием) таков: это зависит от ситуации.

Я бы сказал, что «лучшая практика» - всегда указывать атрибуты height и width изображений, существенно влияющие на скорость рендеринга страниц, восходит к тем временам, когда дизайнеры создавали свои веб-сайты с помощью таблиц и разделителей. Гифки. С тех пор мы прошли долгий путь.

Индикатором на будущее является введение в HTML нового элемента picture. Элемент picture фактически является оболочкой для существующего элемента img, который позволяет вам указать несколько изображений разных размеров с помощью элемента source, а пользовательский агент фактически определяет, какая версия используется.

<picture>
    <source media="(min-width: 64em)" src="high-res.jpg">
    <source media="(min-width: 37.5em)" src="med-res.jpg">
    <source src="low-res.jpg">
    <img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
    <p>Accessible text.</p>
</picture>

Как видно из приведенного выше примера кода (взятого из В статье Intel Developer Zone об элементе HTML5 picture) отсутствуют атрибуты height или width в самом элементе img.

Вот подборка ресурсов, которые помогут вам выбрать наиболее подходящий метод объявления размеров изображений:

• Группа сообщества адаптивных изображений
• Примечание рабочей группы W3C: варианты использования и требования для стандартизации адаптивных изображений
• WHATWG HTML Living Standard: элемент picture

ДА, вы хотите указать ширину и высоту изображения в 2016 году.

1. Чтобы они были готовы к сетчатке

Если вы хотите, чтобы ваше изображение было готово к сетчатке, вы должны определить ширину и высоту ниже фактических пикселей. Если изображение 800x600, укажите <img width="400" height="300" />.

1. Чтобы избежать перехода на страницу

Без ширины и высоты изображение не знает, насколько оно велико, что вызывает нежелательный скачок на странице при загрузке (перекомпоновка). Объявление высоты и ширины решает эту проблему.

Обратите внимание, что:

• Изображения с определенной шириной и высотой по-прежнему могут реагировать. Просто добавьте max-width и max-height в свой CSS. Это приведет к уменьшению изображения (не вверх), когда оно не умещается на экране (см. Эту сладкую сетчатку- готовый, отзывчивый котенок). Определение min-width и min-height сделает обратное.
• Если вы используете одно (относительно большое) изображение для всех размеров экрана, рекомендуется добавить к вашему JPG огромное сжатие (около 50%), чтобы уменьшить размер файла.