БАЗА:

Тег <picture> и srcset: отдаём правильные картинки разным экранам

Коллеги, признавайтесь: кто до сих пор грузит один и тот же баннер 2560px и на десктоп, и на мобилку? 😅 А потом пользователь на 4G ждёт 8 секунд, пока страница «прогрузится». Знакомо?

Сегодня разберём два инструмента, которые решают эту боль раз и навсегда.


srcset — «выбери сам»

Когда у вас одна и та же картинка, но в разных размерах:

<img src="hero-800.jpg"
srcset="hero-400.jpg 400w,
hero-800.jpg 800w,
hero-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Наш крутой проект"
>

Браузер сам смотрит на ширину экрана, плотность пикселей и выбирает оптимальный файл. Вы не управляете выбором напрямую — просто даёте варианты.


<picture> — «я решаю»

Когда нужна другая картинка для другого экрана (арт-дирекшн):

<picture>
<source
media="(min-width: 1024px)"
srcset="hero-desktop.webp"
type="image/webp">

<source
media="(min-width: 1024px)"
srcset="hero-desktop.jpg">

<source
srcset="hero-mobile.webp"
type="image/webp">

<img src="hero-mobile.jpg" alt="Проект">
</picture>

Здесь вы жёстко говорите: «на десктопе — одна, на мобилке — другая». Тег <img> внутри обязателен — это фолбэк для старых браузеров.


Когда что юзать:

→ srcset — одна картинка, разные размеры (оптимизация веса)
→ <picture> — разные кропы, форматы или вообще другие изображения под брейкпоинты


Из продакшена:

— Всегда указывайте width и height у <img>, чтобы не было скачков макета (CLS скажет спасибо)
— Формат WebP/AVIF через type в <source> — экономия 25–50% без потери качества
— Ленивая загрузка: loading="lazy" для всего, что ниже первого экрана

Коллеги, адаптивные картинки — это не «плюшка», а гигиена. Пользователь на бюджетном смартфоне не должен качать ваш 4K-хиро.

Вот так. Идём кодить дальше! 🚀