Картинки в HTML

Главный инструмент для вставки картинок в HTML — тег <img>. Он одиночный (не требует закрывающего тега) и работает по принципу «подтянул файл — показал картинку». Но за этой простотой прячется немало деталей, которые напрямую влияют на то, как сайт будет выглядеть и работать.

Базовый пример

Самый простой вариант:

<img src="image.jpg" alt="Описание картинки">

Здесь два обязательных нюанса:

• src — путь к файлу. Может быть относительным (images/photo.jpg) или абсолютным (https://site.com/img/logo.png).
• alt — текстовое описание. Оно показывается, если картинка не загрузилась, и обязательно для доступности (скринридеры читают именно его).

Размер и пропорции: width, height и почему это важно

Можно задать размеры прямо в HTML:

<img src="photo.jpg" alt="Красивый пейзаж" width="800" height="600">

Зачем это нужно: браузер заранее резервирует место под картинку. Без этих атрибутов страница может «прыгать» при загрузке: сначала текст, потом картинка появляется и сдвигает контент.

Но есть нюанс: лучше задавать размеры через CSS, а не в HTML. Так проще поддерживать адаптивность:

.my-image {
  max-width: 100%;
  height: auto;
}

<img src="photo.jpg" alt="Пейзаж" class="my-image">

max-width: 100% не даст картинке стать шире контейнера, а height: auto сохранит пропорции. Это стандарт для современных сайтов.

Откуда брать картинки: относительные и абсолютные пути

Примеры:

• Относительный путь (файл лежит рядом или в папке):
  html

  <img src="images/logo.png" alt="Логотип">

• Абсолютный URL:
  html

  <img src="https://example.com/assets/banner.jpg" alt="Баннер">

Нюанс: относительные пути удобны для локальной разработки и переноса сайта, абсолютные — для внешних ресурсов (например, CDN).

Доступность и семантика: alt, title и когда их использовать

• alt — обязателен. Должен описывать суть картинки, а не просто повторять название файла.
  • Хорошо: alt="Кот сидит на подоконнике"
  • Плохо: alt="kot.jpg"
• title — всплывающая подсказка. Не заменяет alt, используется редко, потому что не все устройства его отображают одинаково.

Пример:

<img src="chart.png" alt="График роста продаж за год">

Если картинка — декоративная и не несёт смысла (например, фоновый узор), лучше вообще не использовать <img>, а делать через CSS background-image. Если же картинка вставлена через <img>, но смысла не несёт, alt оставляют пустым:

<img src="decor-line.png" alt="">

Форматы картинок и что выбирать

Разные форматы решают разные задачи:

• JPEG — фото, где важны размер файла и качество.
• PNG — картинки с прозрачностью и чёткими линиями (логотипы, схемы).
• WebP — современный формат с хорошим сжатием. Поддерживается почти везде, но не всегда на старых браузерах.
• SVG — вектор: иконки, логотипы, диаграммы. Для них обычно не используют <img> (лучше <svg> или CSS), но технически можно:
  html

  <img src="icon.svg" alt="Иконка меню">

Нюанс: если вы делаете современный сайт, имеет смысл отдавать WebP, а для старых браузеров держать запасной формат.

Адаптивные картинки: srcset и sizes

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

<img
  src="photo-small.jpg"
  srcset="photo-small.jpg 480w, photo-medium.jpg 768w, photo-large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 900px) 768px, 1200px"
  alt="Адаптивное фото"
>

Как это работает:

• srcset — список картинок с указанием их ширины в пикселях (w).
• sizes — подсказывает браузеру, какой ширины будет картинка на разных экранах.

Это снижает трафик и ускоряет загрузку: на телефоне браузер скачает маленькую версию, на десктопе — большую.

Ленивая загрузка: loading=»lazy»

Чтобы картинки ниже «скролла» не тормозили загрузку страницы, добавляют:

<img src="gallery-photo.jpg" alt="Фото из галереи" loading="lazy">

Нюанс: loading="lazy" не стоит ставить на первые видимые картинки (обложка, первый баннер) — они должны грузиться сразу.

Ошибки и частые проблемы

• Картинка не отображается. Чаще всего проблема в пути: опечатка, неверный регистр (на сервере Image.jpg и image.jpg — это разные файлы), файл не загружен.
• Картинка растянута/сплюснута. Причина — жёсткие width и height без учёта пропорций. Решение: CSS max-width: 100%; height: auto;.
• Пустой alt у смысловой картинки. Это ухудшает доступность и SEO.
• Слишком тяжёлые картинки. Даже одна фотография в 5–10 МБ может сильно замедлить сайт. Перед вставкой картинки нужно оптимизировать: уменьшить размер, выбрать правильный формат, сжать без заметной потери качества.

Практический пример: галерея миниатюр с адаптивностью

Допустим, нужно показать три миниатюры, которые на мобильных будут в одну колонку, а на десктопе — в ряд:

HTML:

<div class="gallery">
  <img
    src="img/thumb-1.jpg"
    srcset="img/thumb-1-320.jpg 320w, img/thumb-1-640.jpg 640w"
    sizes="(max-width: 768px) 100vw, 33vw"
    alt="Миниатюра 1"
    loading="lazy"
    class="gallery-item"
  >
  <img
    src="img/thumb-2.jpg"
    srcset="img/thumb-2-320.jpg 320w, img/thumb-2-640.jpg 640w"
    sizes="(max-width: 768px) 100vw, 33vw"
    alt="Миниатюра 2"
    loading="lazy"
    class="gallery-item"
  >
  <img
    src="img/thumb-3.jpg"
    srcset="img/thumb-3-320.jpg 320w, img/thumb-3-640.jpg 640w"
    sizes="(max-width: 768px) 100vw, 33vw"
    alt="Миниатюра 3"
    loading="lazy"
    class="gallery-item"
  >
</div>

CSS:

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
 
.gallery-item {
  flex: 1 1 300px; /* минимум 300px, но может сжиматься */
  max-width: 100%;
  height: auto;
}

Такой подход даёт и адаптивность, и экономию трафика, и предсказуемое поведение макета.