Веб Мастерская | Веб разработка и программирование | ИТ | IT
Без категории · 13 октября 2026 г.
БАЗА:
БАЗА: Тег <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-хиро. Вот так. Идём кодить дальше! 🚀