Fluid images, responsive web design and CMSB

I am embarking on my first venture into responsive web design. All is good until I come to load images. The general advice I've found on the web is to use max-width:100%: 

img {
max-width: 100%;
}

For me, while it works, this is not the best solution because you are scaling images in the browser. Scaling a 1000px image to 100px isn't ideal for someone on a mobile device on 3G

I have adopted a mobile first strategy using the following media queries for larger screen sizes:

@media only screen and (min-width: 481px) {
}

@media only screen and (min-width: 769px) {
}

And now to the question...

How do I serve a different image to different screen sizes using php within the cmsBuilder code. Could I use an IF clause to load thumb1 for default, thumb2 for min-width 481px, and thumb 3 for min-width 769px. If so how? If possible I would like the solution to avoid javascript to avoid calling additional files.