"And if you use media queries in the CSS, then 'no', both images will not be served if you write it properly."
Sort of, both images won't be displayed but both images will be downloaded, defeating the purpose of optimising for the mobile.
If you want to avoid the browser downloading all of the versions, don't use CSS media queries, use HTML5's srcset or CSS's newer image-set.
This page explains them well: https://css-tricks.com/responsive-images-css/