Thank you for helping make Firefox better. If you are reporting a defect, please complete the following:

What were you doing?

Please tell us what site you were on, and what steps led to the error you are reporting

1. Navigate to https://www.quippd.com/writing/2021/03/21/supporting-compact-mode-in-firefox-proton.html#density-options-in-firefox-upgrade-notification
2. Right click on the image right below the heading and select Inspect

What happened?

The inspector moves to the fallback image, not the loaded webp image.

What should have happened?

The inspector should have highlighted the webp image.

Anything else we should know?

ni: check what we retrieve when building the context menu https://searchfox.org/mozilla-central/rev/4fa18c26fa907f38d56b599571b9846af1506f3c/browser/actors/ContextMenuChild.jsm#900

The <img> tag is still the element that receives events on the page.

For instance if you do document.addEventListener("click", e => console.log(e.target)) and click on the image, you will see that the <img> tag is logged. So the context menu event is captured on the <img> element, not on the <picture> or on a <source> element.

If we look at the specs for <picture> (https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element) the tag is considered as a container for an <img> tag:

the picture element itself does not display anything;
it merely provides a context for its contained img element that enables it to choose from multiple URLs.

The <img> tag is really the displayed element here, it's not swapped in favor of the <source> tags, which are here only to provide alternate URLs.

Selecting the <img> element is the correct thing to do, but we should highlight the selected source. This is Bug 1260230, I will close this one as duplicate.
(sidenote: Chrome has the same behavior here)