134

I've been trying to see which srcset image my browser is using via the browsers developer tools, but apart from using the network tab to see which image it fetches i can't tell.

Using the network tab would usually be fine, but sometimes I've noticed that it will fetch 2 image versions at different sizes, this would happen if one break point is at 600 and another at 900 and the browser was currently at 750px wide.

(Ive tried this both on Chrome & FireFox, and it seems chrome will pull down both images in certain cases, but FireFox seems to only ever pull down one)

The reason I want to know is I'm interested if it pulls down two image srcset dose it swap between them automatically as i scale the browser window ? This is can't tell as by inspecting the element it just gives the raw html of the img element, not the actual img srcset option its using.

3
  • swapping between images sounds a bit like js. try checking the custom js files which might be a little bit of pain. I believe if it is swapping two images depending on screen size then it is probably Jquery or pure Js doing the job at that point. That website can also be using media queries. Jun 17, 2015 at 19:03
  • Are you asking if when the page loads it is loading both images? Jun 17, 2015 at 19:08
  • Definatly not JS loading the image, i created the page as a srcset image test and really has a bare html structure with just an image tag in the <body>. @AdamBuchananSmith correct, as when the page only loads the 1 image thats the only would it could use
    – sam
    Jun 17, 2015 at 19:09

7 Answers 7

183

The image has a property currentSrc, you can log it or inspect it with several tools:

  • In chrome developer tools inspect the element, then click the properties tab.
  • In Firefox developer tools inspect the element, right click and select DOM from the context menu.

You will see an entry for currentSrc: with the actual image source.

enter image description here

9
  • 53
    If you find yourself doing this quite often, select the element and type $0.currentSrc in the DevTools console Oct 31, 2017 at 9:11
  • 7
    Hovering over the img in the inspector should now also display the currentSrc attribute in the tooltip.
    – Splatbang
    Nov 28, 2017 at 10:07
  • @Splatbang yes but when the url is very long it crops it, so you might not see what you are after..
    – OZZIE
    Sep 5, 2018 at 11:18
  • 3
    also handy for long URLs, copying direct to the clipboard (in chrome): copy($0.currentSrc)
    – ptim
    Aug 2, 2019 at 4:13
  • 1
    currentSrc is a standard property, you can inspect it with several browser, including firefox
    – bjelli
    May 30, 2020 at 14:42
36

I had problems with this today and I found that you can monitor the variable:

  1. Show the console drawer (You can do it pressing ESC too)

enter image description here

  1. Create live expression (I created 2, the currentSrc of the selected element and the innerWidth)

enter image description here

The live expression watches the current srcset of the img tag selected. It works with the img inside the picture tag too.

3
  • 1
    IMO this is the best answer for today (2020). I had a few problems with the accepted answer where Chrome wasn't populating or updating the Properties tab correctly. This bypasses that issue and puts the result front and.. err... bottom, I guess. :p
    – Sandwich
    Mar 26, 2020 at 13:31
  • It's useful to know that (in my testing at least), the browser will not swap in smaller images from your srcset as you shrink your screen down if it has already downloaded/displayed the largest image. To test accurately, start with the viewport at its smallest and then increase the size rather than the other way around. Mar 23, 2021 at 14:10
  • This works great 2021, just click the eye, add $0.currentSrc , then when you select the image to inspect it, it will show you what image is loaded. Thanks Doc. Sep 29, 2021 at 5:08
5

OK, go to inspect element in chrome. Click on the network tab, then refresh the page.

It will show you the images that are being loaded, the time they take and the size.

2
  • @sam is this what you are looking for? Jun 17, 2015 at 19:15
  • this doesn't answer the question because OP stated in the question he already tried this.
    – mik01aj
    Sep 5, 2016 at 11:34
1

Came upon this with the same question. My simple solution was to just right click image and 'Open Image on New Tab / Window'.

Fast and easy solution and you can see what image is loaded at different break points.

0

I was wondering that too. I think I figured that out without using any developer tools.

To check I simply did a right-click and save-as to see what file name was filled in (and if it matched my high-res image or the low-res one.)

The answer to part of your question was No, not all browsers automatically swap between different srcset image sources when your resize the browser. I checked in August, 2018 with several different Windows desktop browsers. Some responded differently, but most did not swap the image unless you also hit refresh after.

I did not directly investigate which images were actually being downloaded or if more than one were at a time. I only tested which image was actually displayed and if that image changed on browser resize. I made assumptions based on the results, which may or may not be 100% true, but seemed like a quick and dirty good start.

0

This isn't a quick solution, but it gives a definitive answer.

  1. Upload an image - I'm using wordPress add_image_size() to create a bunch of images.
  2. Open the uploads file, find the images, open them in PhotoShop or Gimp, and write the name of the file in each image and resave it (same file name, same location).
  3. Now you can play around with resizing your window and tweaking the srcset and sizes until you're satisfied. I was happy to see that as the window changed size, the image was changed (no refresh needed) often without a visible flicker.
-1

In Chrome you can simply hover over the image in the Elements tab of the Developer Tools sidebar and it'll show you 'Current source' in the details pane that appears.

An alternative way of confirming which image is being loaded is simply to look at the Network tab, filter by Img and observe which one shows up in the list of loaded assets.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.