Как определить используемое изображение из srcset в браузере

Быстрый ответ

Чтобы узнать, какое изображение из srcset браузер отобразил, проанализируйте элемент <img> в Инструментах разработчика. Ищите атрибут currentSrc в разделе Вычисляемые стили или выполните следующую команду JavaScript в Консоли:

// Выводим URL выбранного браузером изображения
console.log(document.querySelector('img').currentSrc);

Так вы увидите URL изображения, выбранного браузером, и получите немедленный ответ.

Глубокое погружение: изучаем работу srcset

Мониторинг srcset в реальном времени

Для отслеживания изменений srcset в режиме реального времени используйте живые выражения через Консоль. Так вы сможете наблюдать за тем, как currentSrc меняется при изменении размера окна браузера или необходимости перезагрузки страницы:

// Отслеживаем динамически изменения srcset
liveExpression(() => document.querySelector('img').currentSrc);

Подробнее об этом расскажет наш спикер на видео

Исследуем совместимость в разных браузерах

Разные браузеры могут выбирать разные источники из srcset. Экспериментирование в разных интернет-обозревателях, конкретно в Chrome и Firefox, поможет разобраться в их уникальных алгоритмах выбора.

Анализ запросов – Вкладка Сеть

Вкладка Сеть отображает последовательность запросов, что незаменимо для понимания алгоритма работы srcset. Обратите внимание на запросы изображений и убедитесь, соответствуют ли они разрешению экрана или другим параметрам.

Применение инструментов для адаптивного тестирования

Эмуляция устройств и размеров экрана

В Инструментах разработчика активируйте Режим устройства для тестирования различных размеров экрана. Это важно для прогнозирования поведения вашего сайта на различных устройствах и ключевой элемент адаптивного дизайна:

// У пользователей может быть любой размер экрана
toggleDeviceToolbar();

Сохранение изображений

Один из простых способов проверки работы srcset – сохранение изображения. Как правило, файл разрешения будет соответствовать URL, указанному в currentSrc.

Возможности и хитрости инструментов для разработчиков

Быстро получить доступ к отображаемому изображению можно, щёлкнув правой кнопкой мыши по элементу <img> и выбрав «Открыть изображение в новой вкладке».

Переход к продвинутому уровню

Ожидайте неожиданного – браузеры эволюционируют

Поведение браузеров изменяется, поэтому актуально периодически проверять их в последних версиях. Возможно, со времени последнего вашего теста Chrome и Firefox уже доработали обработку изображений srcset.

Автоматизация тестирования для повышения эффективности

Такие инструменты, как Selenium или Puppeteer, автоматизируют тестирование поведения srcset в различных условиях. Это полезно для определения скорости загрузки сайта и реагирования на сетевые ограничения.

Мобильные устройства

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

Визуализация

Представьте, что каждое изображение в srcset – это разный образ одежды, а браузер – это человек, который выбирает наряд в зависимости от погодных условий (размера и разрешения экрана):

Браузер 🕴️ выбирает одежду (изображение) в зависимости от погоды (размера и разрешения экрана):

👕🩳(Маленький) ➝ 👔👖(Средний) ➝ 🧥👖(Большой)

Вы, как дизайнер, с помощью Инструментов разработчика, можете проследить за предпочтениями браузера:

Проверка элемента ➡️ тег <img>:
 [👕🩳] 🔄 *Примеряется...*
 [👔👖] ✅ **Выбрано**
 [🧥👖] ❌ Слишком тепло

Используйте Инструменты разработчика, чтобы следить за процессом выбора браузером изображения при изменении размеров окна.

Полезные материалы