Is it possible to see which srcset image a browser is using with browser developer tools

web-development

responsive-design

performance

best-practices

byAnton Shumikhin·Oct 25, 2024

To confirm which srcset image a browser has selected, inspect the <img> element in your Developer Tools. Look within Computed Style for the currentSrc attribute. Alternatively, use the following JavaScript in the Console:

// Prints "I spy with my little eye..." the image the browser has selected
console.log(document.querySelector('img').currentSrc);

This outputs the chosen image's URL, providing immediate feedback on the srcset selection.

Deep Dive: Dive into srcset Behavior

Real-Time srcset Monitoring

For a more live action experience, you can use live expressions in the Console to monitor changes as they occur. This lets you see if currentSrc changes when resizing the browser or if a page refresh is needed:

// Now you see srcset changes, now you don't... or do you?
liveExpression(() => document.querySelector('img').currentSrc);

Cross-Browser Compatibility Investigation

Different browsers may pick different tracks (read srcset images). Hence, testing on different browsers, specifically Chrome and Firefox, will offer insight into their respective behaviors.

Property Investigation – Inside the Network Tab

The Network tab provides a timeline of requests made by the browser, making it an excellent tool to understand how srcset is working. Check the requests corresponding to the images and identify if the requests match the devices' resolution or other criteria.

Working with Tools for Responsive Testing

Emulating Devices and Screen Sizes

In Developer Tools, use Device Mode to simulate different screen sizes. This handy feature allows you to predict how the browser will behave on different devices, making it a valuable tool in your responsive design toolkit:

// Remember, your users are everywhere... And on every screen size!
toggleDeviceToolbar();

Right Click, Save As…

Another simple trick involves saving the image. The saved file often matches the currentSrc and can confirm which image resolution the browser is using.

Corners and Crannies of the Dev Tools

Quick shortcuts like 'Open in new tab' after right-clicking on the <img> element provide a fast way to verify the loaded image.

Venturing into Advanced Territory

Expect the Unexpected - Browsers Evolve

Browser behavior can change over time, so always test on the latest versions. For instance, Chrome and Firefox might have improved how they handle srcset images since you last checked.

Automated Testing – Enhancing Productivity

Automated testing tools like Selenium or Puppeteer can validate srcset behavior under different conditions. This is especially useful when testing on multiple devices, simulating network constraints, and checking performance.

Going Mobile

Given the prevalent use of mobile devices, it's crucial to test the srcset behavior on mobile browsers or emulators. This ensures your website is optimized, improving both performance and UX.