Geek asks and answers

Different images loaded for different web screen sizes

I have this code that automatically loads another image from the array every time the 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 am new to adapting images to various screen resolutions. Therefore, I thought that if someone opens my website, for example, with imac with 2560 / 1440px, the image will be correctly adapted with this code, but I believe that it will be completely pixelated. Therefore, I think that I need to create a larger file so that these computers download a larger file for adaptation in resolution. I want other users with a normal screen to upload a large file for speed reasons. What can I add to this code to make large screens load a larger file so that it does not display pixels?!?!

PD If you also know what the best image resolution for different groups of screen sizes would be very useful!

Thank!

+5
1

, , , , - , , img4.jpg img4_big.jpg res image ..

:

$(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');
});​
+1

More articles:


All Articles