Dynamically replacing images at varying screen dimensions

Dynamically replacing images at varying screen dimensions

Hi, I have a slider built into my web page thats dimensions and ratio alter for different screen sizes, I need the images that I place within this slider to also alter for the same purpose. The code that I have does't seem to be working, I'm a bit of a newbie to jQuery and have pieced it together myself but I think that its essentially quite close to being functional…

<script>
$(document).ready(function() {   
if($(window).width() < 1600 && $(window).width() > 1440){  
    $(".replaceimg").attr("src", $(this).attr("src").split(".").join("_1600."));
 
}
    });
</script>


<img class="replaceimg" src="images/SC.png" alt="image desc" />


I have a working version here:  mdwoodman.co.uk  but it only works because I am calling images directly rather than amending the src, which I want to avoid 

if($(window).width() < 1600 && $(window).width() > 1440){ $(".replaceimg").attr("src", "images/SC1600.png");

Any help would be hugely appreciated!
M