Адаптивное изображение
Реализация изображения, которая отдает разные размеры или форматы в зависимости от устройства, размера экрана и скорости соединения пользователя.
Адаптивные изображения не дают мобильным пользователям загружать изображения desktop-размера, которые расходуют трафик и замедляют страницу. HTML предоставляет атрибут srcset для переключения разрешения и элемент picture для арт-дирекшена, чтобы отдавать разные кадрирования или форматы разным устройствам. Современные фреймворки, например Next.js, автоматизируют создание адаптивных изображений: генерируют несколько размеров из одного исходника и отдают оптимальную версию по viewport. Форматы WebP и AVIF с JPEG-запасным вариантом дополнительно уменьшают трафик. Адаптивные изображения важны для Core Web Vitals: слишком большое изображение задерживает Largest Contentful Paint, основной показатель загрузки, который влияет на пользовательский опыт и позиции в поиске.