Я нашел аналогичный вопрос здесь, с ответом: "вы всегда должны определять ширину и высоту в теге изображения". Но это с 2009 года.
В то же время многое изменилось на интерфейсе. Мы все делаем отзывчивый дизайн страницы сейчас, для многих устройств и размеров одновременно (мобильный, планшет, рабочий стол...).
Итак, интересно, нужно ли еще указывать атрибуты ширины и высоты в 2016 году и по какой причине (для отзывчивости, скорости страницы, SEO...)?
Элемент img имеет атрибуты ширины и высоты, но они не требуются ни при каких DOCTYPE.
Атрибуты ширины и высоты были "обязательными" или релевантными для резервирования места на странице и предотвращения перемещения страницы при загрузке - что важно. Это может быть достигнуто с помощью CSS вместо того, чтобы обеспечить загрузку CSS достаточно быстро - он, вероятно, будет загружаться до изображений, поэтому все должно быть хорошо.
Также возможно (и верно) указывать только один атрибут, ширину или высоту, и браузер будет вычислять опущенное значение для поддержания правильного соотношения сторон.
Вы можете указать процентные значения в атрибутах, если это необходимо. Вам не нужно использовать CSS для этого, если это то, что вы подразумеваете.
Кроме того, имеет смысл добавить - под HTML5 ширина и высота могут принимать только значение пикселя, иными словами, действительное неотрицательное целое число.
Если вы используете атрибуты width и height, это может зависеть от вашего дизайна. Если у вас много изображений разного размера, вы хотите разбить все размеры в CSS или включить их с помощью img?
Ну, основной ответ на этот вопрос (как и в большинстве проблем с кодированием) заключается в следующем: это зависит от ситуации.
Я бы сказал, что "наилучшая практика" всегда указывать атрибуты height и width изображений, существенно влияющих на скорость рендеринга страниц, возвращается к тем временам, когда дизайнеры выставляли свои сайты с помощью таблиц и разделителей GIF, Мы прошли долгий путь с тех пор.
Показателем для будущего является введение нового элемента picture, создаваемого в HTML. Элемент 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.
Ниже приведен список ресурсов, которые помогут вам выбрать наиболее подходящий метод объявления размеров изображений:
ДА, вы хотите объявить ширину и высоту изображения в 2016 году.
Если вы хотите, чтобы ваше изображение было готово к сетчатке, вы должны определить ширину и высоту, меньшую, чем фактические пиксели. Если изображение 800x600, укажите <img width="400" height="300" />.
Без ширины и высоты изображение не знает, насколько оно велико, что вызывает нежелательный скачок на странице при загрузке (он переплачивает). Объявление высоты и ширины решает эту проблему.
Обратите внимание, что:
max-width и max-height в свой CSS. Это приведет к уменьшению изображения (не вверх), когда оно не подходит к экрану (см. Этот сладкий готовый к сетчатке отзывчивый котенок). Определение min-width и min-height будет делать обратное.Хорошие стандарты всегда заслуживают рекомендации. С небольшим дополнительным кодом довольно легко слить статические (px) значения тега img и общие (em,%) значения, предоставленные CSS. И еще проще, избавиться от тега img и установить изображение в качестве фона div с уникальным идентификатором. Если у вас несколько изображений, используйте спрайты и назначьте каждое изображение соответствующему div. Ваши источники разметки тогда выглядели бы как <div id="image_001"></div> - все. Масштабирует сам по себе; нет необходимости в вирусах, таких как JQuery и т.д.
Если мы говорим "отзывчивый, вы можете использовать бутстрап (если нет, начните делать это). При работе с изображениями вы должны добавить класс img-responsive, это изменит ширину изображения, если необходимо, и высота будет автоматической, поэтому, если ширина уменьшится, высота также уменьшится.
У вас всегда будет изображение, которое сохраняет тот же% его контейнера и никогда не потеряет пропорции.
Нет никакого отношения к объявлениям размера объявления и изображения. Скорость страницы будет одинаковой всегда, поэтому, если изображение составляет 800 x 600 пикселей, вы загрузите полное изображение, даже если вы объявите его как 60 x 40 пикселей.
Вы должны думать, что даже при использовании img-responseive максимальная ширина и высота этого изображения будут реальным размером изображения. Поэтому, если у нас есть изображение размером 800 x 600 пикселей, оно не увеличит его (потому что оно потеряет качество).
Итак, в 2016 году рекомендуется НЕ объявлять высоту и ширину изображения. Вместо этого используйте класс bootstrap img-responsive, другой отзывчивый класс framework, который получает тот же результат, или вручную сделанный правильный jquery и css, чтобы достичь того же.
Надеюсь, что это поможет!
Да. По-прежнему актуально указывать атрибут width и height для изображений в HTML.
Изображения часто занимают больше времени, чем HTML-код, составляющий остальную часть страницы. Поэтому рекомендуется указывать размер изображение, чтобы браузер мог отобразить остальную часть текста на, оставляя нужное количество места для изображения, которое все еще загружается.
Следовательно, указание атрибута width и height на изображении будет улучшать производительность веб-страницы, защищая от задержки загрузки.
Это зависит от того, является ли ваше изображение контентом или макетом.
Изображения контента всегда должны иметь атрибуты ширины и высоты. Предположим, что у вас очень узкое, но высокое изображение с очень высоким разрешением, но с очень высоким сжатием JPG и с надписью в нем. Это изображение может быть иллюстрацией приглашения, которое было отправлено. В этом случае изображение является содержимым, а высота для этого изображения составляет 100% изображения (в отличие от макета). Вы должны установить атрибуты ширины и высоты на этом изображении по причинам удобства использования. Когда ваш контент перемещается на другой веб-сайт или изменяется тема, вы не хотите, чтобы это прерывалось. Ширина и высота изображения являются частью содержимого и поэтому должны быть объявлены в атрибутах содержимого/изображения. Обратите внимание, что изображения с шириной и высотой, заданными в их атрибутах, могут быть легко восприимчивыми, используя CSS.
Изображения макета не должны иметь атрибуты ширины и высоты. Если изображения используются не встроенными, как разделители, иллюстрации заголовков, значки или для других целей макета, их макет принадлежит теме/к CSS, Если стиль ваших веб-сайтов изменяется, вы хотите изменить его с помощью простой настройки CSS.