serving optimized images to mobile phones and desktops ?

[guermantes]

Hi,

I am beginning developing a small site with a static image gallery of 50 images - the images will be in a list. I want this site to be possible to use on mobile devices as well, so I am going to use CSS media queries to adapt the styling and presentation to small screen when a user visits the site from their phone rather than desktop.

I presume I should do some further optimization/downsampling of the images that should be served on the mobile device, but how should I make the server send a smaller image to phones and a larger image to desktops, when the same thumbnail is tapped/clicked?

Thanks!