Как при помощи HTML показывать изображения при нажатии

Обновлено в 2026 году. Материал редакции Зерокодера — школы программирования и ИИ, где HTML и CSS разбирают с первых уроков веб-разработки.

Чтобы показать изображение в HTML, поставьте тег <img> с двумя обязательными атрибутами: src — путь к файлу и alt — текстовое описание. Для фона блока картинку задают в CSS через background-image. Базовый пример:

<img src="foto.jpg" alt="Рыжий кот на подоконнике" width="640" height="480">

Это выведет картинку на страницу. Ниже разберём все рабочие способы: контентное изображение, фон в CSS, адаптивные картинки, форматы, ленивую загрузку, показ по клику и типичные ошибки.

• <img> — картинка как часть контента; обязательны src и alt.
• background-image в CSS — декоративный фон блока; скринридеры его не читают.
• srcset + sizes и <picture> — адаптивные картинки под ширину экрана и формат файла.
• width и height резервируют место под картинку и убирают сдвиг вёрстки (CLS).
• loading=»lazy» откладывает загрузку изображений, которых ещё нет на экране.

Тег <img> — базовый способ показать картинку в HTML

Тег <img> — одиночный, закрывающего </img> у него нет. Минимум, который ему нужен, — атрибут src с путём к файлу. Путь бывает относительным (images/foto.jpg), абсолютным от корня сайта (/assets/foto.jpg) или полным URL (https://site.ru/foto.jpg).

Четыре атрибута, которые стоит указывать почти всегда:

• src — адрес изображения.
• alt — альтернативный текст, что на картинке.
• width — ширина в пикселях, без единиц измерения.
• height — высота в пикселях, без единиц измерения.

<img src="images/team.jpg" alt="Команда разработчиков на встрече" width="800" height="533">

По документации MDN, указание height и width позволяет браузеру вычислить соотношение сторон картинки ещё до её загрузки и заранее зарезервировать место — это уменьшает или полностью убирает сдвиг вёрстки, когда изображение подгрузилось. Сдвиг макета (CLS) — один из ключевых факторов удобства и скорости страницы.

Мини-вывод: всегда задавайте src, alt и размеры. Размеры в атрибутах не мешают резиновой вёрстке — их переопределяют в CSS через max-width: 100%; height: auto.

ОНЛАЙН-ПРАКТИКУМ

ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ

ЧТО БУДЕТ НА ОБУЧЕНИИ?

• ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
• Где и как применять? Потестируем модель после установки на разных задачах
• Как дообучить модель под себя?

Участвовать бесплатно

Почему атрибут alt обязателен для показа изображения

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

MDN формулирует проверку так: прочитайте alt вместе с окружающим текстом — смысл должен совпадать с тем, что несёт изображение. Сравните:

<!-- Плохо: не несёт информации --> <img alt="image" src="penguin.jpg"> <!-- Хорошо: описывает картинку --> <img alt="Пингвин на пляже" src="penguin.jpg">

Для чисто декоративных картинок (разделители, узоры) оставляют пустой alt="" — тогда скринридер их пропустит и не будет зачитывать мусор.

Фоновое изображение через CSS: background-image

Когда картинка — это фон блока, а не контент, её задают в CSS свойством background-image со значением url():

.hero { background-image: url("images/bg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #1a1a1a; /* запасной фон, если картинка не загрузится */ }

Важное отличие от <img> — доступность. MDN прямо предупреждает: браузеры не передают вспомогательным технологиям никакой информации о фоновых картинках, скринридер не объявляет их наличие и ничего не сообщает пользователю. Отсюда правило: если изображение несёт смысл, критичный для понимания страницы, — это контент, ему место в <img> с alt, а не в фоне. Фон — только для декора.

Ещё две детали из документации: всегда указывайте запасной background-color на случай, если картинка не загрузится, и помните, что background-image принимает несколько источников через запятую и градиенты (linear-gradient, radial-gradient).

object-fit и object-position: вписать картинку в блок без искажений

Когда у <img> заданы фиксированные ширина и высота, а пропорции файла другие, картинка растягивается. Свойство object-fit задаёт, как контент заменяемого элемента (<img> или <video>) впишется в свой контейнер. Значения:

• fill — растянуть на весь блок, пропорции ломаются (значение по умолчанию).
• contain — вписать целиком с сохранением пропорций, по краям возможны поля.
• cover — заполнить блок целиком с сохранением пропорций, лишнее обрезается.
• none — не менять размер.
• scale-down — как none или contain, смотря что даст меньший размер.

.card img { width: 300px; height: 200px; object-fit: cover; object-position: center; /* какую часть картинки оставить при обрезке */ }

Для карточек и превью почти всегда нужен cover: одинаковый размер плитки без сплющивания. object-fit поддерживается во всех браузерах с января 2020 года.

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

Чтобы браузер грузил картинку под конкретный экран, а не одну тяжёлую на всех, есть два инструмента. Первый — атрибут srcset прямо на <img>. В нём перечисляют файлы с дескрипторами ширины (200w, 400w), а sizes подсказывает, сколько места картинка займёт в макете:

<img src="clock-200.png" alt="Часы показывают 12:45" srcset="clock-200.png 200w, clock-400.png 400w" sizes="(width <= 600px) 200px, 50vw">

Браузер берёт ширину вьюпорта и плотность пикселей и сам выбирает подходящий файл. Дескрипторы плотности (1x, 2x) используют для Retina-экранов.

Второй инструмент — тег <picture>. Он даёт точный контроль: разные картинки под разные условия (art direction) и подстановку современных форматов с откатом на старый. Браузер берёт первый подходящий <source>, а <img> внутри — обязательный запасной вариант:

<picture> <source srcset="photo.avif" type="image/avif"> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="Городская площадь на закате" width="800" height="600"> </picture>

Если браузер не понимает AVIF, он идёт к WebP, затем к JPEG. Важный нюанс из документации: адаптивность в CSS (через image-set для фона) не даёт браузеру той же свободы выбора по скорости сети, что srcset в HTML.

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

Атрибут loading управляет моментом загрузки. Значение lazy откладывает загрузку картинки, пока она не приблизится к видимой области; eager (по умолчанию) грузит сразу:

<img src="gallery-8.jpg" alt="Восьмое фото галереи" width="600" height="400" loading="lazy">

Для длинных страниц и галерей lazy экономит трафик и ускоряет первую отрисовку. Но для картинок, которые видны сразу при открытии (например, в первом экране), ленивую загрузку не ставят — иначе главное изображение грузится с задержкой. И ещё: у ленивых картинок обязательно задавайте width и height, иначе браузер посчитает их размер нулевым, и они могут не подгрузиться или дёрнуть вёрстку.

Форматы изображений: WebP, AVIF, SVG, PNG, JPEG

Формат влияет на вес страницы сильнее, чем кажется. Ориентиры по документации MDN:

• WebP — фото и анимация. Сжатие с потерями в среднем на 25–35% меньше JPEG при том же визуальном качестве; без потерь — на 26% меньше PNG.
• AVIF — фото и анимация, сжатие ощутимо лучше PNG и JPEG, поддержка прозрачности и большой глубины цвета. Минус: не умеет прогрессивную отрисовку — файл показывается только после полной загрузки.
• SVG — векторный формат для иконок, логотипов, схем и всего, что должно чётко масштабироваться под любой размер без потери качества.
• PNG — сжатие без потерь, полная прозрачность; хорош для скриншотов и иконок.
• JPEG — фотографии; сжатие с потерями, прозрачности нет.

Практика: фото — WebP или AVIF с откатом на JPEG через <picture>; иконки и схемы — SVG; скриншоты — PNG или lossless WebP.

SVG инлайн или через <img>?

SVG вставляют двумя способами. Через <img src="icon.svg" alt="..."> — картинка кэшируется, код чище, но нельзя менять цвета и части SVG из CSS страницы. Инлайн, вставив разметку <svg>...</svg> прямо в HTML, — можно управлять цветом через fill/currentColor и анимировать элементы, но разметка раздувается и не кэшируется отдельно. Иконки, которые перекрашиваются под тему, — инлайн; статичные логотипы — через <img>.

Как показать изображение по клику на кнопку

Частая задача — держать картинку скрытой и показывать по нажатию. Скрываем через display: none, а по клику переключаем видимость на JavaScript. Разметка:

<button id="showImageBtn">Показать</button> <img id="hiddenImage" src="image.jpg" alt="Скрытая картинка" width="600" height="400" style="display: none;">

Обработчик клика переключает картинку туда-обратно:

document.getElementById('showImageBtn').addEventListener('click', function () { const image = document.getElementById('hiddenImage'); image.style.display = image.style.display === 'none' ? 'block' : 'none'; });

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

#hiddenImage { opacity: 0; transition: opacity 0.4s ease-in-out; } #hiddenImage.visible { opacity: 1; }

document.getElementById('showImageBtn').addEventListener('click', function () { document.getElementById('hiddenImage').classList.toggle('visible'); });

Мини-вывод: display убирает элемент из потока мгновенно, opacity + transition дают плавное появление. Для показа разных картинок по очереди меняйте image.src из массива путей по индексу.

Чем отличаются img, background-image и picture

Частые ошибки при вставке изображений

• Битый путь в src. Картинка не показывается, вместо неё иконка-заглушка. Проверьте регистр букв и относительный путь от текущего файла.
• Нет alt. Ломается доступность и SEO; при сбое загрузки пользователь видит пустоту.
• Нет width и height. Страница дёргается при подгрузке картинок — растёт CLS.
• Смысловая картинка в фоне CSS. Скринридер её не озвучит, поиск не проиндексирует. Смысл — только в <img>.
• Одна тяжёлая картинка на всех. Мобильный грузит десктопный файл. Решают srcset и <picture>.
• Растянутое изображение. Жёсткие размеры без object-fit: cover сплющивают фото.

Показ изображений — это база вёрстки, с которой начинается фронтенд. Если хотите разобраться в HTML, CSS и вёрстке системно и с практикой, посмотрите курсы по веб-разработке в Зерокодере — там эти приёмы отрабатывают на реальных проектах.

Вопросы и ответы

Как показать картинку в HTML?

Поставьте тег <img> с атрибутами src (путь к файлу) и alt (описание): <img src="foto.jpg" alt="Описание">. Добавьте width и height, чтобы не было сдвига вёрстки.

Чем background-image отличается от тега img?

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

Как сделать изображение адаптивным?

Задайте в CSS max-width: 100%; height: auto, чтобы картинка не вылезала за контейнер. Для подгрузки разных файлов под разные экраны используйте атрибут srcset с sizes или тег <picture>.

Какой формат изображения выбрать для сайта?

Для фотографий — WebP или AVIF с откатом на JPEG (WebP в среднем на 25–35% легче JPEG). Для иконок, логотипов и схем — SVG. Для скриншотов с прозрачностью — PNG или WebP без потерь.

Как показать изображение по клику?

Скройте картинку через style="display: none", повесьте на кнопку обработчик click и переключайте display на block. Для плавного появления анимируйте opacity через CSS-класс с transition.

Зачем указывать width и height у картинки?

Браузер по ним заранее вычисляет соотношение сторон и резервирует место под изображение. Это убирает сдвиг вёрстки при подгрузке (CLS) — важный фактор удобства и скорости страницы.