Responsive design with dynamic image sets

I need to build a page with a header background image that is randomly selected. We want to store the available images in our CMS so I imagine the random selection of the image will occur in server-side code. This page is going to use responsive design and the mobile size will need a smaller version of the same image (but it can't just be the same image scaled down). I.E. if there's a photo of "Bobby" at full width and you shrink your browser to mobile width, a smaller image file of "Bobby" will show, but when you refresh the page, this time a picture of "Lucy" might show. We are ok with using a naming convention to associate the full-size and small images with one another if necessary.

Normally I would expect the CSS, using media queries, to specify the URL to the large image and the URL to the small image. But in this case, the CSS doesn't know ahead of time what the URLs will be. They're chosen dynamically. All we can do is output the URLs to the page. I don't want the client to request an image unless it is displayed though; i.e. if I'm viewing the mobile version, the full-size image shouldn't be downloaded. The solution can use jQuery if necessary but if scripting can be avoided, that's even better. How can I accomplish this?