I have a simple carousel on my home page. It changes pictures automatically after a couple of seconds. The html looks like this:

<div>
    <div id="img-1" class="carousel-image" style="display: block;"></div>
    <div id="img-2" class="carousel-image" style="display: none;"></div>
    <div id="img-3" class="carousel-image" style="display: none;"></div>        
</div>

I use a javascript function to add the images as background-image. To make sure the carousel images are all loaded before the carousel starts changing automatically I use new Image() and count the number of loaded images. Once all three images are loaded I can do startCarousel().

var numberOfLoadedImages = 0;
function setImage(imgUrl, imgId){
    var homeImage = document.getElementById(imgId);
    homeImage.style.backgroundImage = 'url(' + imgUrl + ")";
    var img = new Image();
    img.onload = function() {
        if(numberOfLoadedImages === 2){
            startCarousel();
        }
        numberOfLoadedImages++;
    }
    img.src = imgUrl;
    if (img.complete) {
        img.onload();
    }
}

I can then simple call this function like this:

setImage('img-1', 'img-1');
setImage('img-2', 'img-2');
setImage('img-3', 'img-3');

What I would like to achieve is to lazy-load the second and third image. These two are not necessary at first page load; only the first image is important. Google Page Speed Insights mentions the second and third under the heading "Serve images in next-gen formats", whereas, if you ask me, they should not be considered part of the page. They should be loading in the background and they are really not essential for the first display and UX.

How can I tell the browser (or Google Page Speed Insights) that these images are completely non-essential for UX purposes and should not be considered part of the first paint and UX?

I tried putting the second and third call in a timeout with a short interval, but that didn't do the trick.

NB: I am using vanilla javascript; no plugins at all.