По-прежнему ли актуально указывать атрибут width и heigth на изображениях в HTML?

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

1. чтобы сделать их retina-ready

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

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

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

внимание:

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

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

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

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

<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 атрибуты элемент.

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

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

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

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

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

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

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

поэтому в 2016 году рекомендуется не объявлять высоту и ширину изображения. Вместо этого используйте bootstrap img-отзывчивый класс, другой отзывчивый класс фреймворка, который получает тот же результат, или ручной jQuery и css, чтобы достичь того же.

надеюсь, что это помогает!

да, по-прежнему важно указать атрибут width и height на изображениях в HTML.

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

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