why the desktop image is even loading on mobile?
In general (and by design, in order to maximise rendering speed) browsers load all files set by @media in the page head irrespective of whether they apply
before attempting to render the page.
Unless they are page-specific you'll stand a better chance if you defer @media decisions to a single stylesheet so only one stylesheet-fetching trip to the server is needed, and as the styleesheet has already been loaded
when the browser starts to render the page it is less likely to fetch images that have been ruled out by the stylesheet.
However, your best bet for images (such as the header image) that do not from part of the page narrative is to use a background image and use CSS either to display it as different fixed sizes according to screen-size range (e.g. mobile, tablet, desktop) or to make it scalable as a percentage of screen-width (so a 100% image fills the available width and scales with window size). That way, the browser can't load unwanted images and you get a truly responsive display. You'll get the best displayed resolution if the actual image size equals the maximum displayed size (in pixels), so desktop version shows the image at 100% of is actual size.
Personally, on a related note, I use SSI for content common to all pages, as this allows it to be edited in one place, and forces the latest version to be displayed. One potential disadvantage of this is that SSI files can't be cached (so are reloaded every time a new page is opened), but images loaded from the SSI file can
be cached, so as long as you use fairly efficient html - my own SSI comprehensive drop-down menu is only 15k - it is unlikely to hinder load-speed.
Speed-testers - including Google's - don't "see" SSI files: as the name implies, the file is stitched into the rendered document by the server (not "fetched" as a separate round-trip from the browser), so you'll get full speed scores anyway.