Preloading:
<link rel="preload" as="image" href="http://localhost/mysite/wp-content/uploads/2021/10/test-02.png" imagesrcset="http://localhost/mysite/wp-content/uploads/2021/10/test-02-300x169.png 300w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-1024x576.png 1024w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-370x208.png 370w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-330x186.png 330w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-374x210.png 374w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-480x270.png 480w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-561x316.png 561w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-660x371.png 660w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-690x388.png 690w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-768x432.png 768w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-978x550.png 978w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-990x557.png 990w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-1089x613.png 1089w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-1152x648.png 1152w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-150x84.png 150w, http://localhost/mysite/wp-content/uploads/2021/10/test-02.png 1200w" imagesizes="(max-width: 1200px) 100vw, 1200px">
Image:
<img width="1200" height="675" src="http://localhost/mysite/wp-content/uploads/2021/10/test-02.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="http://localhost/mysite/wp-content/uploads/2021/10/test-02.png 1200w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-300x169.png 300w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-1024x576.png 1024w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-370x208.png 370w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-330x186.png 330w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-374x210.png 374w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-480x270.png 480w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-561x316.png 561w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-660x371.png 660w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-690x388.png 690w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-768x432.png 768w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-978x550.png 978w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-990x557.png 990w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-1089x613.png 1089w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-1152x648.png 1152w, http://localhost/mysite/wp-content/uploads/2021/10/test-02-150x84.png 150w" sizes="(max-width: 1200px) 100vw, 1200px">
As you can see in the 
, it has only loaded the test-02.png and not the image relative to the browser size. Note that I have created a custom device in chrome and set the Device pixel ratio to 2.
But here in firefox as you can see in the 
it has loaded the test-02-768x432.png. I have also set DPR: 2.
To test it more, I changed the preload path to another image path.
I got that it would load the image properly in the right size and also the image preloading is working(with the new path I have set). But when I change it back to its previous value, the image to be shown is test-02.png while it must be test-02-768x432.png. So it seems the preloading with the same path in img tag is making problem.
How can I fix it? Is it a bug in Google Chrome?
Chrome Version: 94.0.4606.61 (Official Build) (64-bit)
UPDATE
I sorted the paths by width ascendingly. It seems the chrome will load only the last image in the srcset attribute and the problem is not related to preloading.
Update
I got that it might be a bug/feature in chrome. Here is a reference: