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

Asked 17/6, 2015 at 19:0 Answered 4/7, 2023 at 22:10

Solved html css responsive-design developer-tools srcset

139

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.

Ministration answered 17/6, 2015 at 19:0 Comment(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. – Kellyekellyn 17/6, 2015 at 19:3

Are you asking if when the page loads it is loading both images? – Halfbound 17/6, 2015 at 19:8

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 – Ministration 17/6, 2015 at 19:9

188

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

Prather answered 17/6, 2015 at 19:16 Comment(9)

If you find yourself doing this quite often, select the element and type $0.currentSrc in the DevTools console – Shool 31/10, 2017 at 9:11

Hovering over the img in the inspector should now also display the currentSrc attribute in the tooltip. – Chatham 28/11, 2017 at 10:7

@Chatham yes but when the url is very long it crops it, so you might not see what you are after.. – Robbinrobbins 5/9, 2018 at 11:18

wish firefox had something similar – Stander 1/11, 2018 at 13:17

also handy for long URLs, copying direct to the clipboard (in chrome): copy($0.currentSrc) – Insomnia 2/8, 2019 at 4:13

currentSrc is a standard property, you can inspect it with several browser, including firefox – Lawhorn 30/5, 2020 at 14:42

Looking at the currentSrc property in Chrome developer tools is also my favourite method to quickly check. IMPORTANT TIP: Make sure to refresh the page if you are resizing your viewport to see which image is being served, and if you aren't seeing any changes clear the cache on reload (I RC refresh button and hit "Empty cache and hard reload" – Vo 23/2, 2022 at 14:7

Hello, @Chatham could you take a look at my question? #75205477 – Lenalenard 24/1, 2023 at 11:58

Wow, this was so helpful! I was doing "Right click" > "Open image in new tab" but that seems to open the largest resolution (which makes sense from a user perspective but was driving me nuts). – Pandemic 20/10, 2023 at 8:54

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

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

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

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

Bant answered 19/5, 2019 at 23:13 Comment(3)

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 – Proficiency 26/3, 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. – Fulvi 23/3, 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. – Steradian 29/9, 2021 at 5:8

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.

Halfbound answered 17/6, 2015 at 19:13 Comment(2)

@Ministration is this what you are looking for? – Halfbound 17/6, 2015 at 19:15

this doesn't answer the question because OP stated in the question he already tried this. – Instability 5/9, 2016 at 11:34

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.

Stackhouse answered 14/5, 2020 at 3:45 Comment(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.

Nathanaelnathanial answered 18/9, 2018 at 19:28 Comment(0)

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

Upload an image - I'm using wordPress add_image_size() to create a bunch of images.
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).
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.

Synovia answered 29/11, 2022 at 16:29 Comment(0)

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.

Loculus answered 4/7, 2023 at 22:10 Comment(0)

Recommended topics

Hot tags