Изображения: тег <img>

Instagram — это почти полностью изображения. Wildberries показывает фото каждого товара. Любая современная страница немыслима без картинок. Всем этим управляет один тег — <img>.

Базовый синтаксис

<img> — самозакрывающийся тег, у него нет закрывающего тега:

<img src="photo.jpg" alt="Кроссовки Nike Air Max 90" />

Два обязательных атрибута:

src — источник изображения

<!-- Относительный путь — файл рядом с HTML -->
<img src="images/product.jpg" alt="Товар" />

<!-- Абсолютный путь — с корня сайта -->
<img src="/static/images/logo.png" alt="Логотип" />

<!-- Внешняя ссылка — с другого сайта -->
<img src="https://example.com/photo.jpg" alt="Фото" />

alt — альтернативный текст (КРИТИЧЕСКИ ВАЖНО)

Атрибут alt — один из самых важных в HTML. Без него:

1. SEO: Google Images не поймёт что на картинке — сайт хуже ранжируется

2. Доступность: незрячие пользователи со скринридером не узнают что на картинке

3. Сломанная картинка: если изображение не загрузилось, пользователь увидит alt-текст

<!-- Плохо — alt пустой, нет информации -->
<img src="shoe.jpg" alt="" />

<!-- Плохо — alt неинформативный -->
<img src="shoe.jpg" alt="картинка" />

<!-- Хорошо — описывает что на картинке -->
<img src="shoe.jpg" alt="Кроссовки Nike Air Max 90, белые, размер 42" />

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

width и height — размеры

<img src="photo.jpg" alt="Фото" width="400" height="300" />

Указание размеров критично для производительности. Браузер заранее знает сколько места зарезервировать — страница не «прыгает» при загрузке картинок. Это влияет на метрику CLS (Cumulative Layout Shift), которую измеряет Google.

loading="lazy" — ленивая загрузка

<img src="product.jpg" alt="Товар" width="300" height="200" loading="lazy" />

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

Для картинок выше «сгиба» (видимых сразу) используй loading="eager" или не указывай вообще.

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

<!-- JPEG — фотографии, без прозрачности -->
<img src="photo.jpg" alt="Фото" />

<!-- PNG — графика с прозрачностью -->
<img src="logo.png" alt="Логотип" />

<!-- WebP — современный формат, вдвое легче JPEG -->
<img src="photo.webp" alt="Фото" />

<!-- SVG — векторная графика, масштабируется без потерь -->
<img src="icon.svg" alt="Иконка" />

Типичные ошибки

Ошибка 1: Нет атрибута alt

<img src="product.jpg" />  <!-- Неверно — обязателен alt -->
<img src="product.jpg" alt="Кроссовки Nike" />  <!-- Верно -->

Ошибка 2: Неправильный alt для декоративных картинок

<!-- Неверно — скринридер прочитает "декоративная линия" -->
<img src="divider.png" alt="декоративная линия" />

<!-- Верно — пустой alt, скринридер игнорирует -->
<img src="divider.png" alt="" />

Ошибка 3: Отсутствие width и height

Без размеров страница «прыгает» при загрузке — плохой UX и плохой SEO.

В реальных проектах

В React картинки часто оборачивают в компонент <Image /> от Next.js — он автоматически добавляет loading="lazy", конвертирует в WebP и задаёт корректные размеры. Но под капотом это всё равно <img> с теми же атрибутами.

// Создаём картинку товара как на Wildberries
const img = document.createElement('img')
img.src = 'https://example.com/nike-air-max.jpg'
img.alt = 'Кроссовки Nike Air Max 90, белые, размер 42'
img.width = 400
img.height = 400
img.loading = 'lazy'

// Проверяем все атрибуты
console.log('src:', img.getAttribute('src'))
console.log('alt:', img.getAttribute('alt'))
console.log('width:', img.width)
console.log('height:', img.height)
console.log('loading:', img.getAttribute('loading'))

// Проверка: есть ли alt? (SEO и доступность)
const hasAlt = img.hasAttribute('alt') && img.alt !== ''
console.log('Alt заполнен:', hasAlt)

// Соотношение сторон
const ratio = img.width / img.height
console.log('Соотношение сторон:', ratio.toFixed(2))
console.log('Квадратное фото:', ratio === 1 ? 'да (как в Instagram)' : 'нет')

// Имитируем аудит картинок на странице
const images = [
  { src: 'logo.png', alt: 'Логотип компании', width: 200, height: 50 },
  { src: 'hero.jpg', alt: '', width: 1200, height: 600 },
  { src: 'product1.jpg', alt: 'Кроссовки Nike', width: null, height: null },
  { src: 'product2.jpg', alt: null, width: 300, height: 300 },
  { src: 'divider.svg', alt: '', width: 100, height: 2 },
]

let issues = 0

images.forEach((img, i) => {
  const problems = []

  if (img.alt === null) problems.push('нет атрибута alt')
  if (img.alt === '' && !img.src.includes('divider')) {
    // Декоративные — ок, остальные — нет
  }
  if (!img.width || !img.height) problems.push('нет width/height (страница будет прыгать)')

  if (problems.length > 0) {
    console.log('ПРОБЛЕМА в ' + img.src + ': ' + problems.join(', '))
    issues++
  } else {
    console.log('OK: ' + img.src)
  }
})

console.log('Итого проблем:', issues)