Адаптивные изображения в HTML5: srcset и sizes для быстрой загрузки

Для кого эта статья:

• Веб-разработчики и программисты
• Специалисты по веб-производительности и SEO

• Студенты и начинающие специалисты в области веб-дизайна и разработки

  Загружать одно и то же огромное изображение для всех устройств? В 2024 году это непростительная роскошь! 📱💻 Представьте: пользователь открывает ваш сайт на смартфоне через мобильную сеть, а браузер вынужден загружать фотографию размером 2500px, хотя экран может отобразить лишь 400px. Это не только пожирает трафик, но и убивает скорость загрузки. К счастью, HTML5 предложил элегантное решение — атрибуты srcset и sizes, позволяющие браузеру самому выбрать подходящее изображение из предложенных вариантов. Давайте разберемся, как использовать эту мощную комбинацию для создания по-настоящему отзывчивых веб-страниц!

Хотите не просто понять, а мастерски применять адаптивные изображения в своих проектах? На курсе Обучение веб-разработке от Skypro вы научитесь не только правильно использовать srcset и sizes, но и интегрировать их в комплексные веб-решения. Наши студенты создают сайты, которые молниеносно загружаются на любых устройствах, повышая конверсию и удерживая пользователей. Превратите технические знания в конкурентное преимущество вместе с экспертами Skypro!

Что такое атрибуты srcset и sizes в адаптивных изображениях

Атрибуты srcset и sizes — это HTML-инструменты, позволяющие браузеру выбирать оптимальное изображение в зависимости от характеристик устройства и условий просмотра. Они решают фундаментальную проблему адаптивного дизайна: загрузку изображений нужного размера для конкретного экрана.

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

Рассмотрим базовый пример:

<img 
src="image-800w.jpg" 
srcset="image-400w.jpg 400w, 
image-800w.jpg 800w, 
image-1200w.jpg 1200w" 
sizes="(max-width: 600px) 100vw, 
(max-width: 1200px) 50vw, 
33vw" 
alt="Описание изображения">

В этом примере:

• src — это запасной вариант для браузеров, не поддерживающих srcset
• srcset — список из трех изображений с разными размерами: 400px, 800px и 1200px
• sizes — указание, что на маленьких экранах изображение займет 100% ширины вьюпорта, на средних — 50%, а на больших — 33%

Преимущества этого подхода очевидны:

Алексей Петров, Senior Frontend Developer Недавно работал над ребрендингом сайта крупного интернет-магазина. Клиент жаловался на высокий показатель отказов среди мобильных пользователей — люди просто не дожидались загрузки страниц. Проведя аудит, я обнаружил, что на главной странице героическое изображение весило 2.8 МБ и имело разрешение 3840×1440 пикселей!

Я подготовил пять версий изображения: от 320px до 1920px и внедрил srcset/sizes. Результат превзошёл ожидания: время загрузки для мобильных пользователей сократилось на 74%, а общий размер страницы уменьшился в три раза. Конверсия выросла на 18% буквально за первую неделю. Это был наглядный пример того, как правильно настроенные адаптивные изображения могут напрямую влиять на бизнес-показатели.

Синтаксис srcset: дескрипторы ширины и плотности пикселей

Атрибут srcset принимает список источников изображений, разделенных запятыми. Каждый источник сопровождается дескриптором, указывающим либо ширину изображения (w-дескриптор), либо плотность пикселей (x-дескриптор). 🔍

Синтаксис с дескриптором ширины (w):

srcset="small.jpg 400w,
medium.jpg 800w,
large.jpg 1200w"

Здесь цифры с "w" указывают фактическую ширину каждого изображения в пикселях. Это позволяет браузеру выбрать наиболее подходящий вариант в зависимости от размера вьюпорта и других факторов.

Синтаксис с дескриптором плотности пикселей (x):

srcset="image.jpg,
image@2x.jpg 2x,
image@3x.jpg 3x"

В этом случае дескрипторы указывают на плотность пикселей. Изображение без дескриптора подразумевает значение 1x. Браузер выберет изображение, соответствующее плотности пикселей устройства.

Важные особенности использования srcset:

• Нельзя смешивать w-дескрипторы и x-дескрипторы в одном атрибуте srcset
• Браузер не обязан выбирать изображение точно соответствующее устройству — он может учитывать скорость соединения, настройки пользователя и другие факторы
• Если используются w-дескрипторы, атрибут sizes становится обязательным для правильного расчета
• Всегда указывайте fallback-изображение в атрибуте src для обеспечения совместимости

Выбор между w-дескрипторами и x-дескрипторами зависит от конкретной задачи:

Атрибут sizes: связь медиазапросов с размерами элементов

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

Базовый синтаксис sizes выглядит так:

sizes="(медиазапрос) размер[, (медиазапрос) размер, ...]"

Где:

• медиазапрос — стандартный CSS-медиазапрос, например (max-width: 600px)
• размер — ширина, которую будет занимать изображение при выполнении условия медиазапроса

Рассмотрим детально пример:

<img 
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 100vw, 
(max-width: 1024px) 50vw, 
33vw"
src="fallback.jpg" 
alt="Описание">

Здесь sizes сообщает браузеру следующее:

1. Если ширина экрана не превышает 600px, изображение будет отображаться в 100% ширины вьюпорта
2. Если ширина экрана между 601px и 1024px, изображение займёт 50% ширины вьюпорта
3. На экранах шире 1024px изображение будет занимать 33% ширины вьюпорта

Понимая, какую ширину в пикселях будет иметь изображение на экране пользователя, браузер может выбрать наиболее подходящий вариант из предложенных в srcset. Например, для экрана 400px изображение займёт 100% ширины (400px), и браузер может выбрать small.jpg. На экране 1200px изображение займёт 33% ширины (около 400px), и браузер снова может предпочесть small.jpg, экономя трафик.

Важные аспекты работы с sizes:

• Медиазапросы в sizes оцениваются последовательно, применяется первый совпавший
• Последнее значение без медиазапроса выступает как значение по умолчанию
• Размер может быть указан в различных единицах: px, em, rem, vw, vh, или даже как calc()
• Значения в sizes не влияют напрямую на CSS-размер изображения — они используются только для выбора подходящего источника из srcset

Мария Соколова, Web Performance Specialist На одном из проектов я столкнулась с необычной проблемой: клиентский новостной сайт имел красивую адаптивную галерею, но при этом пользователи жаловались на "подвисания" во время прокрутки страницы на мобильных устройствах.

Анализ показал, что изображения действительно загружались адаптивно благодаря srcset, но sizes был настроен неправильно! В макете галерея была трехколоночной на десктопе (33%), двухколоночной на планшетах (50%) и одноколоночной на мобильных (100%). Однако в коде sizes содержал только "(max-width: 768px) 100vw, 33vw" — полностью пропуская средний вариант.

В результате на планшетах с шириной 768-1024px браузер загружал изображения, рассчитанные на 33% ширины, но отображал их на 50% экрана — они выглядели размытыми. Коррекция sizes на "(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw" решила проблему: изображения стали четкими, а производительность скролла улучшилась, поскольку браузеру не приходилось масштабировать изображения на лету.

Практические случаи применения srcset и sizes в HTML

Теория важна, но давайте перейдем к практическим сценариям, в которых srcset и sizes проявляют свою полную мощь. 💪 Я расскажу о нескольких распространенных паттернах, которые вы можете сразу внедрить в свои проекты.

Сценарий 1: Герой-изображение во всю ширину экрана

<img 
srcset="hero-320.jpg 320w,
hero-640.jpg 640w,
hero-1024.jpg 1024w,
hero-1440.jpg 1440w,
hero-1920.jpg 1920w"
sizes="100vw"
src="hero-1024.jpg"
alt="Заголовок страницы с красивым фоновым изображением">

Здесь sizes="100vw" указывает, что изображение всегда будет занимать 100% ширины вьюпорта. Это идеально для баннеров и заголовков страниц.

Сценарий 2: Изображения в гибкой сетке

<div class="gallery">
<img 
srcset="photo1-300.jpg 300w,
photo1-600.jpg 600w,
photo1-900.jpg 900w"
sizes="(max-width: 600px) 100vw,
(max-width: 1024px) 50vw,
33vw"
src="photo1-600.jpg"
alt="Фотография 1">
<!-- Другие изображения галереи -->
</div>

Этот шаблон позволяет создать галерею, где количество колонок меняется в зависимости от ширины экрана: 1 колонка на мобильных, 2 на планшетах и 3 на десктопах.

Сценарий 3: Изображения с фиксированным размером и высоким разрешением

<img 
srcset="logo.png,
logo@2x.png 2x,
logo@3x.png 3x"
src="logo.png"
width="200" 
height="80"
alt="Логотип компании">

Для логотипов и иконок с фиксированным размером на странице лучше использовать x-дескрипторы. Обратите внимание на отсутствие sizes, так как размер изображения фиксирован через атрибуты width и height.

Сценарий 4: Изображения в карточках товаров

<div class="product-card">
<img 
srcset="product-240.jpg 240w,
product-480.jpg 480w,
product-720.jpg 720w"
sizes="(max-width: 768px) 50vw,
(max-width: 1200px) 33vw,
250px"
src="product-480.jpg"
alt="Название товара">
</div>

В этом примере на мобильных устройствах карточка товара занимает половину экрана, на планшетах — треть, а на больших экранах имеет фиксированную ширину 250px.

Сценарий 5: Изображения с art direction через <picture>

Иногда изменения размера недостаточно — нужно показать разные версии изображения с различным кадрированием:

<picture>
<source 
media="(max-width: 600px)" 
srcset="portrait-small.jpg 400w,
portrait-medium.jpg 800w"
sizes="100vw">
<source 
media="(min-width: 601px)" 
srcset="landscape-small.jpg 800w,
landscape-medium.jpg 1200w,
landscape-large.jpg 1800w"
sizes="100vw">
<img src="landscape-medium.jpg" alt="Изображение с адаптивным кадрированием">
</picture>

Этот подход объединяет мощь элемента <picture> и атрибутов srcset/sizes, позволяя не только выбирать размер, но и полностью разные версии изображения в зависимости от условий.

Оптимизация загрузки изображений для разных устройств

Внедрение srcset и sizes — это лишь часть комплексной стратегии оптимизации изображений. Давайте рассмотрим дополнительные техники, которые помогут максимизировать преимущества адаптивных изображений. 🚀

1. Создание правильного набора размеров изображений

Какие версии изображений стоит генерировать? Существует формула, помогающая рассчитать оптимальные размеры:

Хорошее эмпирическое правило: разница между соседними размерами должна быть не менее 20%, иначе выигрыш в производительности будет незначительным, а сложность разработки возрастет.

2. Автоматизация генерации изображений

Создавать вручную 5-6 версий каждого изображения непрактично. Используйте инструменты для автоматизации:

• Во время разработки: Gulp/Webpack плагины для обработки изображений (gulp-responsive, responsive-loader)
• При деплое: CI/CD пайплайны с автоматической оптимизацией (ImageMagick, Sharp)
• В runtime: CDN-сервисы с динамической оптимизацией (Cloudinary, Imgix)

3. Форматы изображений и современные кодеки

Правильный формат может сократить размер изображения на 30-80% без потери качества:

<picture>
<source 
type="image/avif" 
srcset="image.avif 1x, image@2x.avif 2x">
<source 
type="image/webp" 
srcset="image.webp 1x, image@2x.webp 2x">
<img 
src="image.jpg" 
srcset="image.jpg 1x, image@2x.jpg 2x" 
alt="Оптимизированное изображение с поддержкой современных форматов">
</picture>

Этот подход использует современные форматы (AVIF, WebP) с фолбэком на JPEG для максимальной совместимости и производительности.

4. Техники ленивой загрузки

Комбинируйте адаптивные изображения с ленивой загрузкой для максимальной оптимизации:

<img 
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
src="placeholder.jpg"
data-src="medium.jpg"
loading="lazy"
alt="Изображение с ленивой загрузкой">

Атрибут loading="lazy" — это нативный способ реализации ленивой загрузки, поддерживаемый большинством современных браузеров.

5. Тестирование и мониторинг

Регулярно проверяйте эффективность адаптивных изображений:

• Используйте Chrome DevTools для анализа фактически загружаемых изображений
• Тестируйте на реальных устройствах с разными соотношениями DPR
• Внедряйте мониторинг веб-производительности (Lighthouse, WebPageTest)
• Собирайте метрики реальных пользователей (RUM) для отслеживания Largest Contentful Paint (LCP)

6. Обработка критических изображений

Для изображений, видимых при первой загрузке (above the fold), используйте предварительную загрузку:

<link rel="preload" as="image" href="critical-image.jpg">

Или для адаптивных изображений:

<link rel="preload" as="image" href="critical-small.jpg" media="(max-width: 600px)">
<link rel="preload" as="image" href="critical-large.jpg" media="(min-width: 601px)">

Это указывает браузю загрузить важные изображения с высоким приоритетом, улучшая метрику LCP.

Внедрение атрибутов srcset и sizes — это не просто технический трюк, а фундаментальный подход к оптимизации веб-производительности. Эти инструменты дают браузерам необходимую информацию для принятия умных решений, что приводит к более быстрой загрузке страниц, меньшему расходу трафика и лучшему пользовательскому опыту. В мире, где каждая миллисекунда загрузки влияет на конверсию, а разнообразие устройств продолжает расти, адаптивные изображения — это не роскошь, а необходимость. Начните с малого: оптимизируйте самые критичные изображения на вашем сайте и постепенно распространяйте этот подход на весь контент.