How to limit which images can be randomly displayed according to screen resolution

This is my first time posting here, so I apologize for any mistakes. Also, I'm new to JavaScript! It's a beautiful coding language, but I'm having some troubles with it.

Now, to the question.

My goal is simple: I want to display randomized images on one part of my website. The catch is, since the website has a responsive design, there're two sets of images, one for each of the two screen-resolution sizes I'm working with.

So, in other words, what I want to achieve is: one set of images is randomized/displayed when using smaller screens, the other set is randomized/displayed when using bigger screens.

What I've done so far is:

1. Use a JavaScript code for randomizing the images. It goes as such:

<script>
jQuery(function(){
    var objetos = new Array();

    objetos[0] = "heregoesmypicture";
    objetos[1] = "heregoesmypicture";
    objetos[2] = "heregoesmypicture";
    objetos[3] = "heregoesmypicture";
    objetos[4] = "heregoesmypicture";
    objetos[5] = "heregoesmypicture";
    objetos[6] = "heregoesmypicture";
    objetos[7] = "heregoesmypicture";
    objetos[8] = "heregoesmypicture";
    objetos[9] = "heregoesmypicture";

    function aleatorio() {
       var azar = Math.floor(Math.random() * objetos.length);
       document.getElementById("mi-imagenali").src = objetos[azar];
    }

window.onload=aleatorio;
});
    </script>

So, is there a way of limiting which images are displayed according to the size of the screen? For example, to have images 0-4 show when the resolution is smaller and images 5-9 when it's larger.

Thanks in advance!