I have an image for a banner at the top of my page. When I hit a threshold of a smaller size screen (about Kindle size and smaller) the image, which includes text, gets too small to be useable. Is there any EASY way to swap out one image with a more suitable one in RSD when I hit the smaller screen threshold? If so, how? Simple explanations appreciated (I don't have my Rocket Scientist Club card yet).
-Mike

Should be easy if you set the image as a background image. Then you can just set a different background image at a suitable break point.

Inger-
This is a striped down page to show what I'm talking about:
http://icetoe.com/example.html
The grid holds either a background color (blue) or an image and then the other stuff (rows and columns containing text and images) sit on top of that. I don't know how to stack images above the grid (like in separate layers in Photoshop) so
at a breakpoint I can make a layer disappear:

<image1> will be made invisible when becomes too small to be read
<image2> when <image1> is turned off this image would appear
<grid>

That's why I'm wanting to know if there is some simple way to swap out one image for another at a specific breakpoint when the viewing window squishes down smaller (so that <image1> gets replaced by <image2>).
-Mike

Just create all the images you need in the page and set those that you don't need on a specific breakpoint to Display: none. As you find spots to change then at use the checkbox on the Layout tab for showing hidden elements so you can manipulate the display settings. It's a pretty painless setup and works pretty nicely.

All you need to do is change the image Element settings on the Design tab at the break point you want it to swap.

Eric & Jo,
Thanks, both of those worked well. Eric's was easier to implement, but Jo's let me figure out what size the second image needs to be. I swear when they get the bugs worked out and actual documentation this is going to be a dynamic application! Thanks for the help, saved me hours of frustration.
-Mike

You're quite welcome and yes Eric's way is the normal way, but I had assumed you meant different images completely rather than sizes so sizes would definitely be just adjusting on breakpoints. Good luck!

Well guys I'm back to the hours of frustration...
The above suggestions worked great within RSD itself, but doesn't work when viewed in an actual browser (both uploaded to the server and also when viewed in a preview browser (Firefox) through through RSD.
I made a stripped down page without other html or css that might have caused the problem here:
http://icetoe.com/test.html

So maybe I misunderstood the process. I have <image-1>, 900px in place at the start. Moving the slider over to my breakpoint (487px), that is where I want to replace <image-1> with <image-2>. So in the design tab area I changed the image from <image-1> to <image-2> and everything worked as expected when sliding back and forth within RSD. But in browsers the <image-1> remains across all breakpoints and just gets smaller as the browser window gets smaller.
I have saved several times and exported several times (deleting the export files in between times). Is this a program glitch or am I missing something?
-Mike

You have me a bit confused here. If you are using the same image, why do you want to swap it out? The resizing of the image is not a glitch, that's what a responsive image setup is supposed to do. Is the image a huge image to start with that you want to replace it?

I do exactly what he's asking about on my moms site. I use an image that's very wide but not tall for the wide screens and switch it to a completely different image that's a little more squarish for my smaller screens. Both images are responsive but neither of them look good at each end of the response.