Как задать размер изображения в HTML: width, height и адаптивные картинки

Атрибуты width и height у тега <img> — это исходные размеры картинки в пикселях, которые браузер использует, чтобы заранее зарезервировать под нее место и не сдвигать верстку во время загрузки. То, как изображение в итоге выглядит на экране, чаще задают уже средствами CSS. Это разные слои, и путать их не стоит: HTML-атрибут подсказывает пропорции, CSS-свойство рисует финальный размер. Ниже разберем эту пару, адаптивные картинки (srcset, <picture>) и единицы измерения (px, %, vw).

Тег img и способы задать размер

Картинку на странице размещает строчный элемент <img>. Обязательный атрибут у него один — src (путь к файлу), и почти всегда добавляют alt (альтернативный текст). Размер же можно задать тремя разными путями, и у каждого своя задача.

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

Атрибуты width и height: зачем их указывать

Самый частый сценарий — подставить реальные размеры файла прямо в разметку:

<img src="/img/tiger.jpg" alt="Тигр в высокой траве" width="600" height="400">

Здесь браузер еще до загрузки картинки знает, что она займет прямоугольник с соотношением сторон 3:2, и резервирует под нее место. Без этих атрибутов место под картинку появляется только в момент загрузки файла, и весь контент ниже прыгает вниз. Такой скачок измеряется метрикой CLS (Cumulative Layout Shift) и портит и восприятие, и оценку страницы поисковиком.

Важный нюанс: значения width и height в атрибутах задаются в пикселях, но без единиц (width="600", а не width="600px"). Их роль — не столько жестко закрепить размер, сколько передать браузеру пропорции. Современные браузеры по паре атрибутов сами вычисляют aspect-ratio картинки, и когда CSS растягивает ее по ширине контейнера, высота резервируется правильно.

Размеры через CSS: max-width и object-fit

Атрибуты хороши для одной картинки, но правила для группы изображений удобнее держать в CSS. Базовый прием адаптивной картинки выглядит так:

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% не дает картинке вылезти за пределы контейнера-родителя, а height: auto пересчитывает высоту так, чтобы пропорции не нарушались. При сужении окна картинка ужимается вместе с контейнером и остается пропорциональной.

Отдельная задача — вписать картинку в жесткую рамку (например, квадратные превью в каталоге). Тут помогает object-fit:

<img src="/img/tiger.jpg" alt="Тигр" width="300" height="300" class="thumb">

.thumb {
  width: 300px;
  height: 300px;
  object-fit: cover; /* картинка заполнит квадрат, лишнее обрежется по краям */
}

Значение cover масштабирует картинку так, чтобы она полностью закрыла рамку, обрезая лишнее. Значение contain, наоборот, впишет картинку целиком, оставив пустые поля. Выбор зависит от того, что важнее: заполнить рамку без пустот или показать изображение без обрезки.

Частая ошибка: искажение пропорций

Новички нередко задают в CSS сразу и ширину, и высоту фиксированными значениями:

img {
  width: 300px;
  height: 200px;
}

Если исходный файл 300×300, результат такой: картинка сожмется по вертикали, и тигр станет заметно приплюснутым — пропорции 1:1 насильно превратили в 3:2.

Исправить можно двумя способами. Либо задать только одну сторону и отдать вторую на автоматический расчет:

img {
  width: 300px;
  height: auto; /* высота подстроится, пропорции сохранятся */
}

Либо оставить обе стороны, но добавить object-fit: cover — тогда картинка заполнит рамку 300×200 без искажения, обрезав края. Первый вариант выбирают, когда важно показать картинку целиком; второй — когда рамка обязана быть строго заданного размера.

Адаптивные изображения: srcset и picture

Отдавать одну большую картинку и мобильному, и десктопу расточительно. Атрибут srcset описывает несколько файлов, а sizes подсказывает, какую ширину картинка займет в макете; выбор делает браузер с учетом ширины экрана и плотности пикселей:

<img src="/img/tiger-800.jpg"
     srcset="/img/tiger-400.jpg 400w,
             /img/tiger-800.jpg 800w,
             /img/tiger-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 600px"
     width="800" height="533"
     alt="Тигр">

Атрибут src тут остается запасным вариантом для старых браузеров. Значения вида 400w — это реальная ширина файла в пикселях, по которой браузер прикидывает, какой источник взять.

Когда нужно не просто разные размеры, а разные картинки или форматы (например, отдать avif с запасом на jpg), используют <picture>:

<picture>
  <source srcset="/img/tiger.avif" type="image/avif">
  <source srcset="/img/tiger.webp" type="image/webp">
  <img src="/img/tiger.jpg" width="800" height="533" alt="Тигр">
</picture>

Браузер берет первый подходящий <source>, а если ни один не подошел — показывает <img>. Атрибуты width и height полезно оставлять и здесь, на дочернем <img>, чтобы место резервировалось.

Единицы измерения: px, % и vw

Размер в CSS можно задавать в разных единицах, и они ведут себя по-разному:

• px — абсолютная величина. width: 300px даст ровно 300 пикселей независимо от окружения. Удобно для точных элементов вроде иконок.
• % — доля от размера контейнера-родителя. width: 50% — половина ширины родителя. Для высоты в процентах у родителя должна быть заданная высота, иначе значение не сработает.
• vw — доля от ширины окна просмотра. width: 50vw — половина ширины экрана, картинка масштабируется вместе с окном.

Для большинства адаптивных картинок хватает связки max-width: 100% и height: auto. Единицы vw пригодятся для героя во всю ширину экрана, а px — там, где размер должен быть неизменным.

Выводы

• width и height у <img> — это HTML-атрибуты (метаданные и пропорции), а width/height в CSS — свойства отображения; при конфликте видимый размер обычно задает CSS.
• Атрибуты width и height стоит указывать почти всегда: они резервируют место и уменьшают сдвиг верстки (CLS).
• Базовая адаптивная картинка — это max-width: 100% плюс height: auto; для жестких рамок подключают object-fit.
• Задавать одновременно фиксированные ширину и высоту опасно: пропорции искажаются, если соотношение сторон не совпадает с исходником.
• Для разных экранов и форматов служат srcset/sizes и <picture>, а единицы px, % и vw выбирают по тому, от чего должен зависеть размер.

Где применяется / связь с практикой

FAQ

Что важнее, если размер задан и атрибутом, и в CSS?
Финальный видимый размер определяет CSS, но атрибуты все равно полезны: по ним браузер вычисляет пропорции и резервирует место до применения стилей.

Нужно ли указывать width и height, если картинка все равно тянется на 100%?
Да. Даже при max-width: 100% пара атрибутов задает соотношение сторон, и браузер заранее знает, сколько высоты займет картинка, — это снижает сдвиг верстки.

Чем srcset отличается от picture?
srcset перечисляет один и тот же кадр в разных размерах, и файл выбирает браузер сам. <picture> дает явно управлять выбором — разными кадрами, форматами или условиями, — когда автоматики недостаточно.