Check which image is loaded when using srcset and picture element

[boucdur]

Hello everyone,

I’m new at responsive design.
I use the picture element and gives a choice of images to choose from to the browser.
I’d like to check which image is really loaded on the different devices.

I don’t get this info on the developper tool in mozilla apparently.
Is there a good solution whithout buying all the existing devices ?

Thank you.

[Shikkediel]

Very generally, you could use the onload event of the image and check its src attribute with JS.

https://stackoverflow.com/a/34366168/3168107

[boucdur]

Can’t it be done whith the developer tools in mozilla without using a js script ?

[Shikkediel]

Well, I can’t check without code but if it gets loaded like a regular image, it should show up under the Network tab.

[Shikkediel]

You could just run the script in the console as well by the way.

Edit – a slightly different one though, depending on your markup. Using onload won’t work that way.

[Author]

Posts