Исполняемые доки HTML: Картинки в HTML

Q: Как вставить картинку в HTML?

Используйте тег с файлом в src и описанием в alt: . У нет закрывающего тега.

Q: Как изменить размер картинки в HTML?

Задайте атрибуты width и height в пикселях или используйте CSS, например img { width: 300px; height: auto; }. Если задать только одно измерение, а другое оставить auto, пропорции сохранятся.

Q: Почему картинка не отображается в HTML?

Обычно неправильный путь в src: он указывается относительно HTML-файла, имена файлов на большинстве серверов чувствительны к регистру, а путь вроде C:\photos\cat.jpg существует только на вашем компьютере. Откройте URL картинки прямо в браузере, чтобы его проверить.

Q: Что такое alt в HTML?

Атрибут alt это текстовая замена картинки. Его читают программы чтения с экрана, а браузер показывает его, если картинка не загрузилась. Опишите, что показывает или делает изображение; для чисто декоративных картинок используйте alt="".

Q: Как сделать картинку адаптивной?

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

Как вставить картинку в HTML

Используйте элемент <img>. src это файл картинки, alt ее описание, а width и height задают размер в пикселях. <img> это пустой элемент: закрывающего тега у него нет.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image</title>
</head>
<body>
  <img
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3Cpath d='M0 150 Q80 90 160 140 T300 130 V200 H0Z' fill='%2316a34a'/%3E%3C/svg%3E"
    alt="Green hills under a yellow sun"
    width="300"
    height="200">
</body>
</html>

Здесь src это маленький SVG, записанный прямо в URL (data URI), чтобы пример работал без сети. На настоящем сайте src это путь к файлу:

`src`	Откуда загружает
`photo.jpg`	`photo.jpg` из той же папки, что и HTML-файл
`images/photo.jpg`	Из папки `images` рядом с HTML-файлом
`../photo.jpg`	Из папки на уровень выше
`/images/photo.jpg`	Из папки `images` в корне сайта
`https://example.com/photo.jpg`	С другого сайта (файл может переехать или исчезнуть)

На большинстве веб-серверов пути чувствительны к регистру: Photo.JPG и photo.jpg это разные файлы.

Текст alt

Текст alt заменяет картинку. Программы чтения с экрана зачитывают его вслух, а браузер показывает его, когда картинка не загружается. Обе картинки здесь указывают на несуществующие файлы:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alt text</title>
  <style>
    img { border: 2px dashed #e5e7eb; }
  </style>
</head>
<body>
  <p><img src="missing-logo.png" alt="Coddy logo" width="160" height="60"></p>
  <p><img src="missing-chart.png" alt="" width="160" height="60"> (decorative, empty alt)</p>
</body>
</html>

Первая показывает на месте картинки свой alt, «Coddy logo». У второй alt пустой, поэтому показывать нечего, и программы чтения с экрана ее пропускают. Как писать alt:

Описывайте то, что важно в контексте. «Столбчатая диаграмма: продажи выросли вдвое с марта по июнь» говорит больше, чем «диаграмма».
Не начинайте с «Изображение…». Программы чтения с экрана и так объявляют, что это картинка.
Используйте alt="" для украшений (разделитель, декоративный элемент фона), чтобы программы чтения с экрана их пропускали.
Никогда не пропускайте alt. Без него некоторые программы чтения с экрана читают вместо описания имя файла, например «IMG подчеркивание 4032 точка jpg».
Для картинки внутри ссылки описывайте, куда ведет ссылка: <a href="/"><img src="logo.svg" alt="Home"></a>.

Размер картинки

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image size</title>
  <style>
    .box { width: 180px; border: 2px solid #2563eb; margin-bottom: 12px; }
    .responsive { max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <div class="box">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Overflowing" width="300" height="200">
  </div>
  <div class="box">
    <img class="responsive" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Fits" width="300" height="200">
  </div>
</body>
</html>

Первая картинка сохраняет свои 300 пикселей и вылезает из блока шириной 180 пикселей. Вторая уменьшается до 180 на 120, сохраняя пропорции 3:2. height: auto здесь важен: без него атрибут height="200" оставил бы картинку высотой 200 пикселей и сплющил бы ее.

Всегда пишите width и height в HTML, даже для адаптивных картинок. Браузер по ним заранее резервирует нужное место, пока файл не пришел, поэтому текст ниже не прыгает вниз, когда картинка загружается.

Обрезка через object-fit

Когда картинка должна заполнить блок другой формы (квадратный аватар из широкой фотографии, карточки одинаковой высоты), object-fit решает, что делать с лишним:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>object-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 12px; }
    figure { margin: 0; text-align: center; }
    img { width: 120px; height: 120px; border: 2px solid #111827; display: block; }
  </style>
</head>
<body>
  <figure>
    <img style="object-fit: fill" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>fill</figcaption>
  </figure>
  <figure>
    <img style="object-fit: contain" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>contain</figcaption>
  </figure>
  <figure>
    <img style="object-fit: cover" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>cover</figcaption>
  </figure>
</body>
</html>

Исходник это картинка с кругом в пропорции 2:1, показанная в квадратных блоках:

fill (по умолчанию) растягивает картинку под блок, и круг становится овалом.
contain вписывает картинку целиком, оставляя пустые полосы.
cover заполняет блок и обрезает лишнее, круг остается круглым. Это обычный выбор для миниатюр и аватаров.

object-position выбирает, какая часть остается видимой при обрезке, например object-position: top для портретов.

Подписи через figure и figcaption

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    figure { display: inline-block; margin: 0; padding: 8px; border: 1px solid #e5e7eb; }
    img { display: block; }
    figcaption { font: 14px system-ui, sans-serif; color: #4b5563; padding-top: 6px; }
  </style>
</head>
<body>
  <figure>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Crect width='240' height='120' fill='%23e5e7eb'/%3E%3Crect x='20' y='70' width='40' height='40' fill='%232563eb'/%3E%3Crect x='80' y='40' width='40' height='70' fill='%232563eb'/%3E%3Crect x='140' y='20' width='40' height='90' fill='%232563eb'/%3E%3C/svg%3E"
      alt="Bar chart: signups rose each quarter" width="240" height="120">
    <figcaption>Figure 1. Signups per quarter.</figcaption>
  </figure>
</body>
</html>

Подпись не заменяет alt. alt говорит, что изображено на картинке; подпись добавляет то, что понадобилось бы и зрячему читателю.

Зазор под картинкой

Картинка стоит на базовой линии текста, как буква, поэтому контейнер оставляет под ней место для нижних выносных элементов букв вроде g и y. Рамка делает зазор видимым:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Gap under image</title>
  <style>
    div { display: inline-block; border: 2px solid #dc2626; margin-inline-end: 12px; }
    .fixed img { display: block; }
  </style>
</head>
<body>
  <div><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
  <div class="fixed"><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
</body>
</html>

В первой рамке под синей картинкой видна белая полоска. display: block у картинки (второй блок) ее убирает; то же делает vertical-align: middle, если картинка должна остаться строчной.

Ленивая загрузка и адаптивные источники

Для картинок далеко внизу длинной страницы loading="lazy" откладывает загрузку, пока читатель не прокрутит к ним:

<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">

Не делайте ленивой главную картинку вверху страницы: это задерживает ту часть страницы, которую читатели видят первой.

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

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Harbor at dusk" width="800" height="533">

<picture> идет дальше и предлагает разные форматы, а <img> служит запасным вариантом, который заодно несет alt:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>

Форматы изображений

Формат	Для чего подходит
JPEG	Фотографии
PNG	Скриншоты, изображения с четкими краями или прозрачностью
WebP	Фотографии и графика, меньше JPEG и PNG, с прозрачностью
AVIF	Фотографии, обычно меньше WebP
SVG	Логотипы, иконки и схемы; масштабируется до любого размера без размытия
GIF	Короткие анимации, хотя беззвучный зацикленный `<video>` намного легче

Частые ошибки

Путь с вашего компьютера, например src="C:\Users\me\photo.jpg". Он работает только на вашей машине. Положите файл рядом с HTML и используйте относительный путь.
Нет alt. Он нужен каждому <img>, для украшений пустой.
И width, и height в CSS со значениями другой пропорции. Картинка растягивается. Задайте одно, а другое оставьте auto, или используйте object-fit.
Нет атрибутов width и height, и страница прыгает, пока загружаются картинки.
Огромные файлы, уменьшенные через CSS. Фотография шириной 4000 пикселей, показанная в 400 пикселей, все равно скачивается целиком. Уменьшите ее или используйте srcset.
Закрывающий тег </img>. <img> пустой элемент; закрывать нечего.

Картинки в примерах выше это маленькие встроенные SVG. Чтобы попробовать тот же код со своими фотографиями, вставьте его в песочницу HTML.

Часто задаваемые вопросы

Как вставить картинку в HTML?

Используйте тег <img> с файлом в src и описанием в alt: <img src="photo.jpg" alt="A red bicycle" width="600" height="400">. У <img> нет закрывающего тега.

Как изменить размер картинки в HTML?

Задайте атрибуты width и height в пикселях или используйте CSS, например img { width: 300px; height: auto; }. Если задать только одно измерение, а другое оставить auto, пропорции сохранятся.

Почему картинка не отображается в HTML?

Обычно неправильный путь в src: он указывается относительно HTML-файла, имена файлов на большинстве серверов чувствительны к регистру, а путь вроде C:\photos\cat.jpg существует только на вашем компьютере. Откройте URL картинки прямо в браузере, чтобы его проверить.

Что такое alt в HTML?

Атрибут alt это текстовая замена картинки. Его читают программы чтения с экрана, а браузер показывает его, если картинка не загрузилась. Опишите, что показывает или делает изображение; для чисто декоративных картинок используйте alt="".

Как сделать картинку адаптивной?

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

Почему под картинкой появляется зазор?

По умолчанию картинки строчные и стоят на базовой линии текста, из-за чего под ними остается место для нижних выносных элементов букв. Задайте картинке display: block или vertical-align: middle, чтобы убрать зазор.

Связанные концепции