Адаптивные изображения: srcset, sizes и Art Direction

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

Разные устройства (мобильные, планшеты, десктоп) имеют разные размеры экрана и разрешения. Один размер изображения не оптимален для всех устройств.

Большие изображения тратят bandwidth на мобильных. Маленькие изображения выглядят пикселизированными на десктопе. Адаптивные изображения подают правильный размер для каждого устройства.

Core Web Vitals: адаптивные изображения улучшают метрики LCP (Largest Contentful Paint) и CLS (Cumulative Layout Shift).

Атрибут srcset

srcset предоставляет браузеру варианты изображений в разных разрешениях. Браузер выбирает наиболее подходящее изображение на основе DPR (Device Pixel Ratio) и размера viewport устройства.

Width descriptor: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" src="medium.jpg" alt="...">. Единица w указывает естественную ширину изображения.

Density descriptor: <img srcset="image.jpg 1x, image@2x.jpg 2x" src="image.jpg" alt="...">. Единица x указывает плотность пикселей устройства.

Выбор браузера: браузер выбирает наиболее подходящее изображение на основе размера viewport, DPR и условий сети. Этот выбор автоматический и оптимизированный.

Атрибут sizes

sizes указывает размер, который изображение займёт в viewport. Браузер использует sizes вместе с srcset для выбора наиболее подходящего изображения.

Пример: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" src="medium.jpg" alt="...">.

Media conditions: (max-width: 600px) 100vw → на экранах меньше 600px изображение занимает 100% ширины viewport.

Fallback: последнее значение (33vw) — размер по умолчанию. Это значение используется, когда ни одно media condition не совпадает.

vw (viewport width): 100vw = ширина viewport. 50vw = половина ширины viewport.

Art Direction

Art direction подаёт разные композиции изображения (crop, zoom) при разных размерах экрана. Делается с помощью элемента <picture>.

Пример: <picture><source media="(min-width: 800px)" srcset="desktop.jpg"><source media="(min-width: 400px)" srcset="tablet.jpg"><img src="mobile.jpg" alt="..."></picture>.

Случаи использования: разные crop для hero-изображений. Вертикальное изображение на мобильном, горизонтальное на десктопе. Разные версии для логотипов и иконок.

Выбор формата: с помощью <picture> можно также подавать разные форматы: <source type="image/webp" srcset="image.webp"><img src="image.jpg" alt="...">.

Lazy Loading и Async Decoding

loading="lazy": загружает изображение только при приближении к viewport. Увеличивает скорость загрузки страницы и экономит bandwidth.

decoding="async": отделяет процесс декодирования изображения от главного потока. Не блокирует рендеринг страницы.

fetchpriority="high": высокий приоритет для LCP-изображения. Браузер загружает это изображение раньше.

Placeholder: показывайте placeholder низкого разрешения с помощью техники blur-up. Размытый placeholder показывается во время загрузки изображения.

Советы по производительности

Форматы изображений: используйте WebP или AVIF. На 25-50% меньше, чем JPEG. Подавайте JPEG/PNG как fallback.

Сжатие: сжимайте изображения. Используйте TinyPNG, Squoosh или ImageOptim. Quality 80-85 обычно достаточно.

Размеры: добавляйте атрибуты width и height к изображениям. Предотвращает CLS (Cumulative Layout Shift).

CDN: подавайте изображения с CDN. Image CDN, такие как Cloudinary, Imgix, выполняют автоматический resize и конвертацию формата.

Тестирование адаптивных изображений: проверяйте, какое изображение загружается, во вкладке Network Chrome DevTools. Тестируйте на разных viewport.