Como mudar o src de uma imagem por responsividade

Question

Estou tentando fazer uma troca de imagens quando a tela do navegador tiver abaixo de um mínimo de pixels

tenho duas imagens e preciso que elas alternem se a tela tiver menos de 600 pixels de comprimento

eu tentei usar js para mudar mas não deu certo

a tag em questão está assim

<img class="logo" id="logo" src="../img/logoCadjoV.png">

e o script está assim

<script>
    if (window.matchMedia('(max-width: 600px)').matches) {
        var logoImg = document.getElementById('logo');
        if (logoImg) {
            logoImg.src = '../img/logoCadjoH.png'; 
        }
    }
</script>

não sei dizer o que está errado, ou se existe um caminho mais fácil