JQuery :: How To Replace Only Part Of Image Source

I am trying to make a generic function called whenever the window size changes. I want this function to apply to several different images. The idea is that when the window is resized the function will only change the end of the source code by replacing "_small", "_medium", "_large" with the appropriate size depending on the window. The problem is that when I use the code below it makes ALL of the images the same. The variable imageRightIdStr genereates a list of ids of all of the images that I would like this function to affect. ex: #imageRight101,#imageRight201,#imageRight202,#imageRight203,#imageRight301 etc.

Here is the code that I have now. It mostly works except it makes all of my "imageRight_" images the same.
var contentwidth = $('#background').width();
if ((contentwidth) < '1175') {
var logo= $('#pageLogo');
var rightImage = $('.rightImage');
logo.attr('src',logo.attr('src').replace('_large','_small'));
logo.attr('src',logo.attr('src').replace('_medium','_small'));
$(imageRightIdStr).attr('src',$(imageRightIdStr).attr('src').replace('_large','_small'));
$(imageRightIdStr).attr('src',$(imageRightIdStr).attr('src').replace('_medium','_small'));
}else if ((contentwidth) < '1440' && (contentwidth) > '1175') {
var logo= $('#pageLogo');
var rightImage = $('.rightImage');
logo.attr('src',logo.attr('src').replace('_large','_medium'));
logo.attr('src',logo.attr('src').replace('_small','_medium'));
$(imageRightIdStr).attr('src',$(imageRightIdStr).attr('src').replace('_large','_medium'));
$(imageRightIdStr).attr('src',$(imageRightIdStr).attr('src').replace('_small','_medium'));
}