Как сделать картинку в html

Если вам нужно быстро понять, как сделать картинку в html, достаточно одного тега img и нескольких понятных атрибутов. Ниже разберём, как вставить изображение на страницу, задать подпись, размер и что делать, если картинка не отображается.

Базовая вставка изображения

Самый простой вариант — использовать тег img. Это одиночный тег, у него нет закрывающей пары. Минимальная запись выглядит так:

<img src="image.jpg" alt="Описание изображения">

Здесь src указывает путь к файлу, а alt нужен для текста, который увидит пользователь, если картинка не загрузится, а также для доступности. В вопросе как сделать картинку в html чаще всего речь именно об этой записи.

• src — путь к файлу изображения;
• alt — краткое описание;
• width и height — размер в пикселях;
• title — всплывающая подсказка при наведении.

Если файл лежит рядом с HTML-страницей, достаточно указать только имя. Если он в папке images, путь будет таким: images/photo.png. Для проверки результата откройте страницу в браузере и убедитесь, что изображение появилось на нужном месте.

Размер, выравнивание и подпись

Когда базовая вставка уже работает, обычно нужно подстроить внешний вид. Для этого можно задать ширину и высоту прямо в теге, но лучше сохранять пропорции исходного файла. Если указать только width, браузер сам рассчитает высоту.

Пример:

<img src="cat.png" alt="Кот" width="300">

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

Чтобы добавить подпись, оберните изображение в figure и используйте figcaption:

<figure>
  <img src="photo.jpg" alt="Пейзаж">
  <figcaption>Горный пейзаж на закате</figcaption>
</figure>

Это удобнее, чем писать обычный абзац под картинкой, если подпись должна относиться именно к ней.

Частые ошибки и как их проверить

Если картинка не показывается, сначала проверьте путь к файлу. Ошибка в названии, регистре букв или расширении часто мешает загрузке. Например, photo.JPG и photo.jpg для сервера могут быть разными файлами. Также убедитесь, что изображение реально лежит в указанной папке.

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

Полезно проверять и такие моменты:

• Нет ли лишних пробелов в пути src;
• Поддерживается ли формат файла браузером;
• Не закрывает ли картинку другой элемент;
• Не задан ли слишком большой размер контейнера.

Если нужно вставить изображение с другого сайта, используйте полный адрес в src, но помните: картинка может исчезнуть, если её источник станет недоступен или ограничит загрузку.

Когда лучше использовать другие варианты

Иногда вопрос как сделать картинку в html подразумевает не просто вставку файла, а более гибкий способ отображения. Тогда подойдут background-image в CSS, если картинка служит фоном, или picture, если нужны разные версии изображения для разных экранов. Но для обычного контентного изображения тег img остаётся самым понятным и надёжным вариантом.

Проверьте результат в браузере: изображение должно открываться без ошибок, alt должен быть осмысленным, а размеры — соответствовать макету. Если всё работает, значит вы уже знаете, как сделать картинку в html без лишних усложнений.