Привет, коллеги! Сегодня будем разбирать, как правильно вставлять изображения в HTML. Я сам когда-то путался в этих тегах, но теперь щелкаю их как орешки. Давайте по порядку.
Самый простой способ
Открываешь HTML-файл и пишешь:
👉 <img src="моя-картинка.jpg" alt="Что на картинке">
Работает в 99% случаев. Главное — чтобы файл лежал в правильной папке.
Где искать свои картинки
- В той же папке — просто имя файла:
👉 <img src="кот.jpg" alt="Мой кот"> - В папке images — добавляешь путь:
👉 <img src="images/продукт.png" alt="Наш продукт"> - На уровень выше — две точки и слэш:
👉 <img src="../лого.png" alt="Логотип">
Хитрости, которые реально работают
1. Размеры — чтобы не ломать верстку:
👉 <img src="фото.jpg" width="600" height="400" alt="Фото">
2. Загрузка с ленивой загрузкой (грузится при прокрутке):
👉 <img src="баннер.jpg" loading="lazy" alt="Акция">
3. Картинка-ссылка — оборачиваем в тег <a>:
👉 <a href="страница.html"><img src="превью.jpg" alt="Подробнее"></a>
Что делать, чтобы не облажаться
- Проверяй пути — photo.jpg и Photo.JPG это разные файлы
- Не забывай alt — без него будут проблемы с доступностью
- Сжимай изображения — никто не любит ждать загрузку 5MB картинки
Когда нужно что-то сложнее
Для адаптивных сайтов используй:
👉 <img srcset="маленькая.jpg 480w, большая.jpg 1200w" sizes="100vw" src="запасная.jpg" alt="Адаптив">
Этот код сам выберет подходящий размер картинки под экран.
Личный совет
Начинай с простого — сначала разберись с обычными тегами img. Когда набьешь руку, переходи к сложным вариантам вроде picture и srcset. Я вот полгода верстал без них — и ничего, сайты работали.
Главное — практика. Попробуй прямо сейчас добавить картинку на тестовую страницу. Получилось? Отлично! Нет — пиши в комменты, разберемся вместе.