Different images loaded for different web screen sizes

Question

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!

Answer 1

You could always check the window size, either height or width, whatever floats your boat, and add something to the image filenames to load high res images, like having img4.jpg as a normal image and img4_big.jpg as a high res image etc.

Would look something like this :

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

    var $win = $(this);

      //add _big to image filename if window width is over 1920px, 
      //like so : img4_big.jpg etc.

    var isBig = $(window).width() > 1920 ? '_big' : '';
      //add the string to the image filename
    var $img = $('#background') 
     .attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + isBig + '.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');
});​