Изображения и адаптивные медиа

Осмысленный `alt` для информативных изображений и `alt=""` для декоративных. `width` и `height` резервируют место и снижают layout shift. `srcset` и `sizes` позволяют браузеру выбрать ресурс под плотность; `picture` — art direction и fallback форматов.

					<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450"
  alt="Дашборд с недельной выручкой"
  loading="lazy"
>
				

Не lazy-load LCP-изображение; лучше preload или приоритет.

На интервью: роли alt, CLS, responsive images и современные форматы (AVIF/WebP).

Типовые ошибки: keyword-stuffed alt; отсутствие размеров и CLS; lazy-load на LCP hero.

Компромисс: экономия трафика против резкости и раннего paint — адаптивные источники помогают, но агрессивный lazy loading задерживает критичный контент.

Чеклист:

• Полезный alt.
• Внутренние размеры.
• `srcset`/`sizes` или `picture`.
• Не откладывать загрузку критичных above-the-fold картинок.