What image is loaded with element?

Question

I'm implementing responsive images on a new website and have a question. Is it correct that the example code below will load test-400.jpg on any screen that's 960 pixels or larger? Even if the image width only takes up 40% of the screen width? This is the outcome I'm looking for

I've attempted to work out how I can find in the browser developer tools, what image is being used to work this out for myself but haven't had much success working out how to do that.

<picture>
  <source media="(min-width: 960px)" sizes="100vw" srcset="test-400.jpg">

  <img src="test.jpg"
       srcset="test-310.jpg 310w, test-400.jpg 400w, test-460.jpg 460w, test-620.jpg 620w, test-840.jpg 840w" sizes="(max-width: 959px) 100vw, 50vw"
       alt="test image">
</picture>

Network panel would be one way to check which image resources are actually loaded. — CBroe, Oct 13 '16 at 20:14
I did think of that but the page I was testing on had the same image loading at different sizes more than once. I'll set up a new test page with it only loading once and see what happens then - didn't think of that before. — Neil Nand, Oct 13 '16 at 20:59
You haven't added the screenshot for the outcome you're looking for. Your sentence ends: "This is the outcome I'm looking for" and there is no image after that. What browser are you using? — Alex Ljamin, Oct 14 '16 at 03:57
Sorry, maybe I wasn't clear in the post but the outcome I was looking for is what is written before that sentence. So would `test-400.jpg` be loaded on a 960 pixel sized screen or larger? Even if the image only took up 40% of the screen size. I'm not sure what type of screen shot would help explain this better? — Neil Nand, Oct 14 '16 at 12:14
Select the `img` in the elements panel and the enter `$0.currentSrc` in the console. — alexander farkas, Oct 14 '16 at 23:26
@alexanderfarkas That's great - I wasn't able to find that anywhere while Googling but it shows what image is currently loaded by the ` — Neil Nand, Oct 15 '16 at 15:35
Maybe @alexanderfarkas should put his comment in the "answer" box, so that you accept it… ;-) — Nicolas Hoizey, Mar 24 '17 at 13:49
NicolasHoizey in his absence I have done this. @alexanderfarkas thanks so much for the help this was so useful. — Eoin, Mar 09 '21 at 11:32

score 1 · Answer 1 · answered Mar 09 '21 at 11:31

Select the img in the elements panel and the enter $0.currentSrc in the console to find out which element is being used.

Importantly you cannot select the <picture> or any of the <source> elements it must be the <img part. If you receive "undefined" then the chances are you have picked the incorrect part of the element.

If the correct part is selected you will receive an output of a single image location.

What image is loaded with element?

1 Answers1