Tengo dos imágenes de diferentes tamaños, una para pantallas más pequeñas que 759px, y la otra para pantallas más grandes que 759px.

He logrado que la fuente de las imágenes cambie cuando se carga el documento, dependiendo del ancho de la ventana. Pero realmente me gustaría poder hacer esto cuando también se cambia el tamaño del navegador, pero por mi vida no puedo hacerlo, solo parece funcionar cuando la página se carga inicialmente.

Este es mi código:

$(document).ready(function() {
    function imageresize() {
        var contentwidth = $(window).width();
        if ((contentwidth) < '700'){
            $('.fluidimage').each(function(){
                var thisImg = $(this);
                var newSrc = thisImg.attr('src').replace('x2', 'x1');
                thisImg.attr('src', newSrc);
            });
        } else {
            $('.fluidimage').each(function(){
                var thisImg = $(this);
                var newSrc = thisImg.attr('src').replace('x1', 'x2');
                thisImg.attr('src', newSrc);
            });
        }
    }

    imageresize();//Triggers when document first loads

    $(window).bind("resize", function(){//Adjusts image when browser resized
        imageresize();
    });
 });