Picture и srcset: адаптивные изображения для сайта

Адаптивные изображения — это базовая, но всё ещё недооценённая техника ускорения сайта. Один и тот же визуал может занимать 50 КБ на смартфоне и 600 КБ на ультраширокой панели, если правильно настроить теги <picture> и srcset. Разбираемся, как это устроено и в каких сценариях что применять.

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

На сайте малого бизнеса доля мобильного трафика обычно превышает половину, в розничных нишах нередко доходит до 70–80%. Если визуалы загружаются в десктоп-разрешении, мобильный пользователь скачивает в несколько раз больше, чем ему нужно. Это медленно, дорого для трафика и плохо влияет на показатель отказов.

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

02Srcset и sizes простыми словами

Атрибут srcset перечисляет браузеру несколько вариантов одной и той же картинки в разных разрешениях. Атрибут sizes подсказывает, какую ширину займёт изображение в макете при разных условиях. Браузер на основе этих данных сам выбирает оптимальный файл.

Простой шаблон выглядит так: вы готовите три-четыре версии картинки (например, 400, 800, 1200 и 1600 пикселей по ширине) и описываете их в srcset с указанием ширины. Браузер смотрит на разрешение экрана, плотность пикселей и текущий размер блока — и качает один файл, тот, который реально нужен.

Главное преимущество этого подхода — он работает с обычным тегом <img> и не требует JavaScript.

03Тег picture: когда он действительно нужен

Тег <picture> — более мощный инструмент. Он позволяет указать не только разные разрешения, но и разные форматы (AVIF, WebP, JPEG) и даже разные изображения для разных размеров экрана. То есть на смартфоне может показываться обрезанный вертикальный кадр, а на десктопе — широкий горизонтальный.

Picture обычно применяют в трёх случаях:

• Современные форматы с фоллбеком. Сначала пытаемся отдать AVIF, потом WebP, в конце — JPEG для старых браузеров.
• Art-direction. Разные кадрировки под десктоп и мобилу, особенно для главных баннеров и hero-блоков.
• Тёмная и светлая темы. Подмена картинки в зависимости от предпочтений пользователя через media-query prefers-color-scheme.

Во всех остальных случаях достаточно обычного <img srcset="..." sizes="..."> — это проще и поддерживается всеми браузерами.

04Как готовить изображения: размеры, форматы, плотность

Размеры

Базовый набор для сайта — три-четыре ширины. Часто берут такие: 480, 768, 1280, 1920 пикселей. Этого достаточно, чтобы покрыть смартфоны, планшеты, ноутбуки и десктопы. Для главного баннера можно добавить 2560 пикселей, если важна детализация на больших мониторах.

Форматы

В 2026 году AVIF и WebP поддерживаются всеми браузерами, которые имеют значимую долю в Рунете. AVIF даёт меньший вес при том же качестве, WebP — более старый и универсальный. Логика обычно такая: AVIF → WebP → JPEG/PNG. Подробнее о связке форматов и скорости — в статье «Как ускорить загрузку сайта».

Ретина

Для ретина-экранов в srcset используют дескриптор плотности (1x, 2x) либо ширины. Подход с шириной (w) удобнее, потому что один srcset покрывает и разные размеры макета, и разные плотности.

05Типичные ошибки при настройке

Несколько ошибок встречаются почти в каждом аудите:

• Атрибут sizes не задан или указан по умолчанию. Без него браузер считает, что картинка занимает 100% ширины окна, и часто качает версию больше нужной.
• Один и тот же файл во всех значениях srcset. Бывает, когда плагин «нагенерировал» миниатюры, но все они на самом деле скопированы с оригинала. Толку ноль.
• AVIF и WebP без фоллбека. Если отдавать только современный формат и не предусмотреть JPEG, на части браузеров картинка не отрисуется.
• Не указаны width и height. Без них даже идеальный srcset приведёт к «прыжкам» вёрстки и плохой метрике CLS.
• Lazy-loading на главной картинке. Чуть менее очевидная ошибка — мы разбирали её в статье «Lazy-loading правильно».

06WordPress, Tilda и другие CMS

WordPress генерирует наборы размеров автоматически при загрузке в медиабиблиотеку. Темы и плагины подставляют srcset к большинству картинок без участия редактора. Но качество результата зависит от двух вещей: какие именно размеры зарегистрированы в теме и есть ли плагин для конвертации в WebP/AVIF на лету.

В Tilda адаптивность встроена в стандартные блоки — там вмешиваться не нужно. Главное, не загружать гигантские исходники в надежде «пусть платформа сама уменьшит». Чем меньше исходник, тем легче все производные.

На самописных сайтах и Elementor-страницах часто видим один и тот же сценарий: дизайнер вставил картинку «как есть» из Figma шириной 3000 пикселей, и она такой и улетает в мобильный браузер. Здесь нужно либо ставить плагин оптимизации, либо настраивать srcset вручную при разработке шаблона.

Официальная документация по теме — Справка Яндекс.Вебмастера.