Изображения в HTML

Тег img, атрибуты src/alt/width/height, lazy-загрузка, picture/srcset, форматы и оптимизация картинок.

Уровень: начальный 9 разделов 1,5 часа

1. Простейшая картинка

<img src="photo.jpg" alt="Текст альтернативы">. alt обязателен: у него смысл для невидящих, при обрыве загрузки и для SEO.

<img src="images/cat.jpg" alt="Рыжая кошка на подоконнике">

alt описывает СОДЕРЖИМОЕ, а не файл;
декоративные картинки: alt="" (пустой — не «не прописан»);
не дублируйте в alt «фото, картинка» — и так ясно.

2. Размеры width/height

<img src="cat.jpg" alt="Кошка" width="800" height="600">

Заданные width/height резервируют место и браузер не «прыгает» страницей при загрузке. Меняя через CSS, не забудьте height: auto для сохранения пропорций.

3. lazy-загрузка и приоритет

<img src="hero.jpg" alt="Баннер" fetchpriority="high">
<img src="card-1.jpg" alt="Товар" loading="lazy">
<img src="card-2.jpg" alt="Товар" loading="lazy">

выше экрана — грузиться сразу, ниже — loading="lazy" (грузится при прокрутке). Это экономит трафик и ускоряет первый экран.

4. Форматы

Формат	Когда
JPEG	фотографии, без прозрачности
PNG	логотипы, прозрачность, графика
WebP	всё выше: меньше вес, лучший слой
AVIF	современный, ещё легче WebP
SVG	иконки и вектор (см. SVG)

Фотожрафию сжимайте: WebP/AVIF с quality 75–85 часто неотличимы от JPEG и в 2–3 раза легче.

5. CSS-масштабирование

.cover { width: 100%; max-width: 800px; height: auto; }
img { display: block; }

img по умолчанию строчный — между ними «дыры». display: block убирает. object-fit: cover превращает картинку в «обложку» с обрезкой.

6. picture: выбор по условию

picture переключает ФОРМАТ/ОБРЕЗКУ в зависимости от экрана и размера. path — для fallback-слсчаев, source — отдельные кандидаты.

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Вид из окна">
</picture>

7. srcset и sizes

srcset предлагает браузеру выбор РАЗМЕРА под экран. sizes говорит, какую реальную ширину займёт картинка в макете.

<img src="m.jpg"
     srcset="s.jpg 320w, m.jpg 640w, l.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Фотография города">

320w/640w — собственные ширины кандидатов;
sizes — CSS-ширина, чтобы браузер знал нуждающийся размер;
без sizes браузер угадывает 100vw — часто крупнее, чем нужно.

8. Оптимизация и доставка

сжимайте через сжатие исходников (webp/avif);
спрайте мелкие иконки в SVG-спрайт;
выкладывайте из CDN для скорости;
не готовьте картинку «3000px под маленький экран» — продублируйте кандидатов.

<img src="logo.svg" width="140" height="32" alt="Логотип">

9. Чек-лист изображений

alt описан по смыслу, декоративным — пусто;
width/height заданы;
первый экран — computed, ниже — lazy;
форматы WebP/AVIF/SVG для веба;
picture для обрезок/типов, srcset+sizes для размеров.

Что дальше

Курс завершён.

← Вернуться к курсам