Изображения: тег <img>, атрибуты src, alt, width, height

Как добавить изображение на сайт? 🖼️

Картинки делают сайт живым и привлекательным. В HTML за это отвечает простой, но мощный тег <img>. Давайте разберёмся, как им пользоваться!

<img src="cat.jpg" alt="Милый котёнок">

Это минимальная рабочая версия. Но за кажущейся простотой скрываются важные нюансы.

Атрибут src: где искать картинку? 🔍

src (от source — источник) указывает путь к изображению. Путь может быть:

1. Относительным (от текущей папки):

<img src="images/logo.png">

1. Абсолютным (полный URL):

<img src="https://example.com/pic.jpg">

💡 Профессиональный совет: Для локальных файлов используйте относительные пути — так проще переносить проект между серверами.

Атрибут alt: почему он жизненно важен? ♿

alt (альтернативный текст) выполняет три критически важные функции:

1. Показывается, если изображение не загрузилось
2. Читается скринридерами для незрячих пользователей
3. Влияет на SEO — поисковики анализируют этот текст

<!-- Плохо: -->
<img src="product.jpg" alt="Изображение">

<!-- Хорошо: -->
<img src="product.jpg" alt="Чёрный кофе в белой керамической кружке">

🚨 Никогда не оставляйте alt пустым, если изображение несёт смысловую нагрузку. Для декоративных картинок можно использовать alt="".

Размеры изображения: width и height 📏

Эти атрибуты задают ширину и высоту в пикселях:

<img src="photo.jpg" width="800" height="600">

Но есть современная альтернатива через CSS:

<img src="photo.jpg" style="width: 800px; height: 600px;">

🔥 Важно: Всегда указывайте хотя бы один размер (обычно ширину), чтобы избежать "прыгающего" макета при загрузке страницы.

Продвинутые техники работы с изображениями 🚀

1. Респонсивные изображения

<img src="large.jpg" 
     srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1600w"
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 1600px">

2. Ленивая загрузка (lazy loading)

<img src="image.jpg" loading="lazy" alt="Пример lazy loading">

3. Подписи к изображениям

<figure>
    <img src="artwork.jpg" alt="Картина Ван Гога">
    <figcaption>«Звёздная ночь», 1889 год</figcaption>
</figure>

Частые ошибки и как их избежать 🚫

1. Использование устаревших атрибутов
   ❌ <img border="1"> → ✅ Используйте CSS border

2. Неправильные пути
   Всегда проверяйте, что файл существует по указанному пути

3. Гигантские файлы
   Оптимизируйте изображения перед загрузкой на сайт (рекомендуемый размер < 500KB)

Практический пример: идеальная картинка ✅

<img src="/images/sunset.jpg"
     alt="Закат на море с пальмами на переднем плане"
     width="1200"
     height="800"
     loading="lazy"
     class="rounded shadow">

Этот код учитывает: - Чёткий путь к файлу - Подробное описание - Оптимальные размеры - Ленивую загрузку - Стилизацию через CSS

Теперь вы знаете всё, чтобы добавлять изображения как настоящий профессионал! Попробуйте применить эти знания в своём следующем проекте. 😊