Preloaded image with <link> and imagesrcset is not being used by page

Question

In my head I have the following to preload different sized images depending on viewport:

<link rel="preload" as="image" href="/images/myimage.webp" imagesrcset="/images/myimage_400.jpg 400w, /images/myimagel_800.jpg 800w, /images/myimage_1200.jpg 1200w, /images/myimage_1600.jpg 1600w" sizes="100vw">

In my View body I have the following class:

<div class="bg-img-non-home" id="PageBanner">

style.css

.bg-img-non-home {
    background-image: url(/images/myimage.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

I have been watching the networking tab closely, and my problem is that the imagesrcset is pre-loading an image correctly. But then that image is not being used. The page remains blank until the body class image is loaded.

How can I get my page to use the imagesrcset file once its loaded and ignore the style.css file?

UPDATE:

I have tried updating my css as per the below. Its still pre-loading the 2x image from the head, then waiting to hit the body and to load and display the 1x image. This is a head scratcher...

.bg-img-non-home {
    background-image: -webkit-image-set( url("/images/myimage_400.jpg") 4x, url("/images/myimage.jpg") 3x, url("/images/myimage_1200.jpg") 2x, url("/images/myimage_1600.jpg") 1x);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

Answer 1

You cannot use view port size when creating an image-set in css. You have to use density pixels. Seems strange as dp does not achieve exactly what I need, but its working now as best I can manage without vw, and better than nothing.

Likewise the details in the imagesrcset needs to be exactly the same as in the css -webkit-image-set

It can be a bit flaky on some devices...loading 800 because of the density, when I would prefer 400 because of the screen size etc. But as I said, best I can get it working.

Also note that I found that the smallest image in pixel measurements, should actually have the highest 'x' value. For example, a 400px image would be 2x and an 800px would be 1x. Not the other way around. Seems counterintuitive, but it works.

css

background-image: url("/images/myimage_800.jpg");
background-image: -webkit-image-set( url("/images/myimage_400.jpg") 2.5x, url("/images/myimage_800.jpg") 2x, url("/images/myimage_1200.jpg") 1x, url("/images/myimage_1600.jpg") 0.5x);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;

< link >

<link rel="preload" as="image" href="@Model.myimageUrl" imagesrcset="@Model.myimage400ImageUrl 2.5x, @Model.myimage800ImageUrl 2x, @Model.myimage1200ImageUrl 1x, @Model.myimage1600ImageUrl 0.5x" sizes="100vw">