Картинки в HTML: img, alt, размеры и object-fit

Картинка вставлена, но растянулась на пол-экрана и вылезла за край блока. Или сжалась в узкую полоску. Или пока грузится, текст под ней прыгает вниз. Всё это решают несколько атрибутов <img> и пара строк CSS.

Картинку вставляет тег <img>: src — адрес файла, alt — текст вместо картинки, width и height — её пропорции. Это пустой элемент, закрывающего тега у него нет. Итоговый размер на странице задают в CSS: max-width: 100% не даёт вылезти за край, а object-fit решает, как картинка заполнит рамку другой формы.

Пример: карточка с обложкой и круглая картинка

Открой пример в песочнице HTML/CSS ссылкой под вторым блоком: разметка попадёт во вкладку index.html, стили — в styles.css. Картинка в примере лежит на koddo.ru, а песочница загружает картинки по адресам https://. В карточке обложка встаёт ровно по её ширине, а ниже та же картинка обрезана в круг без сплющивания.

HTML:

<article class="card">
  <img class="cover" src="https://koddo.ru/assets/og/og-handbook-web.jpg" alt="Обложка справочника Koddo «Веб»: запрос GET и ответ 200 OK" width="1200" height="630">
  <h2>Справочник по вебу</h2>
  <p>Картинка растягивается на ширину карточки и не вылезает за край.</p>
</article>

<figure class="thumb">
  <img src="https://koddo.ru/assets/og/og-handbook-web.jpg" alt="Та же обложка, обрезанная до круга" width="160" height="160" loading="lazy">
  <figcaption>Круг без сплющивания: object-fit: cover</figcaption>
</figure>

CSS:

body {
  margin: 0;
  padding: 1rem;
  font-family: system-ui, sans-serif;
}

.card {
  max-width: 22rem;
  overflow: hidden;
  border: 1px solid #d6dbe4;
  border-radius: 0.75rem;
}

.cover {
  display: block;
  max-width: 100%;
  height: auto;
}

.card h2,
.card p {
  margin: 0.75rem 1rem;
}

.thumb {
  margin: 1.5rem 0 0;
}

.thumb img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  object-position: left;
}

.thumb figcaption {
  margin-top: 0.5rem;
  color: #555555;
  font-size: 0.875rem;
}

Тег img: src, alt, width и height

src. Адрес файла. Полный — https://koddo.ru/assets/og/og-handbook-web.jpg, от корня сайта — /images/logo.png, от текущей страницы — images/logo.png. Адреса работают так же, как у ссылок, подробнее в статье про ссылки в HTML.

alt. Текст вместо картинки: его прочитает программа чтения с экрана, покажет браузер, если файл не загрузился, и учтёт поисковик. Пиши, что на картинке важно для этой страницы: «Обложка справочника: запрос GET и ответ 200 OK», а не «картинка» или имя файла. Если картинка — украшение без смысла, alt оставляют пустым: alt="". Тогда программа чтения с экрана её пропустит.

width и height. Настоящие размеры файла в пикселях, без px. По ним браузер знает пропорции ещё до загрузки и держит под картинку место — текст ниже не прыгает, когда она догрузится. Итоговый размер на странице всё равно можно поменять в CSS.

Картинка на ширину блока: max-width и height: auto

Картинки / 01koddo

Размер картинки задают в двух местах

Картинка шириной 1200 пикселей в карточке на 352 пикселя вылезет за край. Пара правил в CSS это исправляет:

.cover {
  display: block;
  max-width: 100%;
  height: auto;
}

max-width: 100% не даёт картинке стать шире родителя, а height: auto пересчитывает высоту по пропорциям: 352 в ширину — 185 в высоту, как у файла 1200 × 630. Если указать только width: 100% без height: auto, высота останется 630 из атрибута, и картинка вытянется по высоте.

display: block убирает небольшой зазор под картинкой: по умолчанию она строчная и стоит на линии текста, оставляя место под буквы с хвостиками.

Обрезка без искажения: object-fit и object-position

Когда рамка другой формы, чем картинка, — квадратная аватарка из широкого снимка, одинаковые превью в каталоге, — пропорции не сойдутся. object-fit решает, что делать:

object-position выбирает, какая часть останется видна при обрезке: по умолчанию середина, left — левый край, top — верх. В примере у круга object-position: left, поэтому в нём видно заголовок «Веб», а не пустую середину обложки.

Подпись к картинке: figure и figcaption

<figure> объединяет картинку и её подпись <figcaption> в один блок. Так программа чтения с экрана понимает, что подпись относится именно к этой картинке. Подпись не заменяет alt: alt описывает картинку для того, кто её не видит, а подпись видна всем и обычно добавляет пояснение.

Внутри <figure> может быть не только картинка, но и схема, фрагмент кода или таблица — всё, к чему нужна подпись.

Скорость: loading="lazy" и srcset

loading=“lazy”. Браузер загрузит картинку, только когда до неё почти докрутят. Ставь его картинкам ниже первого экрана — страница откроется быстрее. Первой, самой заметной картинке lazy не нужен: её стоит грузить сразу.

srcset. Список файлов разного размера, из которого браузер выбирает подходящий экрану: srcset="photo-640.jpg 640w, photo-1280.jpg 1280w" вместе с sizes. Телефон скачает файл поменьше, широкий экран — побольше. Для простых страниц хватает одного файла и max-width: 100%, а srcset пригодится, когда картинок много и они тяжёлые.

Три правки, чтобы закрепить

Открой пример в песочнице и перед каждой правкой предскажи результат:

1. Убери у .cover строку max-width: 100%. Обложка станет своего настоящего размера, 1200 × 630, и карточка покажет только её левый верхний кусок: остальное обрежет overflow: hidden.
2. Замени у круга object-fit: cover на fill. Картинка целиком втиснется в круг и сплющится: буквы станут узкими.
3. Сломай адрес обложки: допиши лишнюю букву, og-handbook-webb.jpg. Файл не найдётся, и на месте картинки появится текст из alt — а место под неё останется прежним благодаря width и height.

Картинка — один из тегов HTML, а чтобы поставить её по центру, пригодится статья про выравнивание по центру.