Different images loaded for different web screen sizes

I have this code which loads automatically a different picture from an array everytime a user loads index.html. This is the jquery code:

$(window).load(function() {
    var randomImages = ['img1','img2','img3','img4','img5'];
    var rndNum = Math.floor(Math.random() * randomImages.length);

     var $win = $(this);
     var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + '.jpg').css({'position':'fixed','top':0,'left':0});
        function resize() {
            if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
              $img.css({'height':'100%','width':'auto'});
            } else {
              $img.css({'width':'100%','height':'auto'});
            }
        }
        $win.resize(function() { resize(); }).trigger('resize');
    });

I'm new with adapting images to different screen resolutions. So I thought that if somebody opens my web with for example an imac with 2560/1440px the image will be adapted correctly with this code, but I suppose it will be completely pixeled. So I think, I have to create a larger image file so those computers load the bigger file to adapt in resolution. I want to avoid that other users with a normal screen load the big file for speed reasons. What could I add to this code to make bigger screens load a bigger file so it doesnt pixalate?!?!

P.D. If you also know which is the best image resolution for different groups of screen sizes it would be VERY helpful!

Thanks!