Адаптивное изображение
Реализация изображения, которая поддерживает разные размеры или форматы в зависимости от устройства зрителя, размера экрана и скорости соединения.
Адаптивные изображения не позволяют мобильным пользователям загружать изображения размером с настольный компьютер, что приводит к потере трафика и замедлению загрузки страниц. HTML предоставляет атрибут srcset для переключения разрешения и элемент изображения для художественного направления — предоставление различных изображений или форматов на разные устройства. Современные фреймворки, такие как Next.js, автоматизируют создание адаптивных изображений, создавая изображения разных размеров из одного источника и предоставляя оптимальную версию в зависимости от области просмотра. WebP и AVIF fAVIFts с JPEG FallbacJPEG еще больше сокращают полосу пропускания. Адаптивные изображения имеют решающее значение для производительности Core Web Vitals — изображение слишком большого размера задерживает наибольшую отрисовку контента — основной показатель производительности загрузки, который влияет как на пользовательский опыт, так и на рейтинг в поисковых системах.