Browser picks the wrong srcset image - srcset

Question

I'm trying to implement srcset this way
<img class="i-product-image-big"
srcset="http://dev.test:8000/uploads/thumbnail-80/1602202734The_Reptile_Room_by_Daniel_Handler.webp 80w,
http://dev.test:8000/uploads/thumbnail-160/1602202734The_Reptile_Room_by_Daniel_Handler.webp 160w,
http://dev.test:8000/uploads/thumbnail-320/1602202734The_Reptile_Room_by_Daniel_Handler.webp 320w,
http://dev.test:8000/uploads/thumbnail-640/1602202734The_Reptile_Room_by_Daniel_Handler.webp 640w,
http://dev.test:8000/uploads/thumbnail-960/1602202734The_Reptile_Room_by_Daniel_Handler.webp 960w,"
src="http://dev.test:8000/uploads/thumbnail-160/1602202734The_Reptile_Room_by_Daniel_Handler.webp"
alt="The Reptile Room by Daniel Handler">
I edited the code by adding sizes like this
<img class="i-product-image sidebar_image" loading="lazy"
sizes=" (min-width 200px) 320px, (min-width 576px) 80px, (min-width 768px) 160px, 100vw"
srcset="http://dev.test:8000/uploads/thumbnail-960/1586515257Little_History_of_the_World.webp 960w
..........
I open the website in private window in responsive mode first to be sure that the browser didn't load the larger version but the problem is I find out that the browser picks the wrong version (size) of the image. Here it should pick the 320px (it's 322px including 1px border from each side and the image itself is 320px) version of the image but it picks the 640px version of the image. Why is that and how to fix it without using the picture tag?
I reduces the size of the image in css but still loading 640xp version
I reversed sizes like this
sizes=" (max-width 575px) 320px, (max-width 767px) 80px, (min-width 768px) 160px, 100vw"
But that didn't work either

Answer 1

OK, did some tests here (created some filler images to debug). Found what's causing your issue. Not being able to see your full HTML code, I could get the 320-pixel-width image to show in a bare-bones, hand-coded HTML page. When I add the standard viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1">, the 640-pixel-width image will display again, due to viewport scaling. If I were to post your code in a snippet here on SE, the same thing would happen.
Additionally, if I replace the 320_Image.png 320w, with 320_Image.png 2x, and 640_Image.png 1x,, the 320-pixel image will show, but the display will be broken when viewed in the desktop.
If all you’re trying to do is serve an image size that’s based on the viewport width, you’d be best served using 160_Image.png 160w, while for resolution switching, use this: 160_Image.png 1x. A comprehensive resource on responsive images on MDN describes this more fully. And, based on your preference not to use the <picture> element, this article is a good resource. The author recommends not using the <picture> element when all you want is to serve the appropriate image based on the users' device.
For a quick demo, I’ve modified the code a bit, and am using dummy images to show (not including fillers for all the images in the code). If viewed in desktop, the images will switch sizes based on viewport width. For mobile, they will switch based on device width. I only added the CSS to set the image to full-width debugging, but the images with switch without this code.
img {
max-width: 100%;
width: 100%;
}
<img class="i-product-image-big" srcset="80_Image.png 80w,
160_Image.png 160w,
https://i.stack.imgur.com/JkhiN.png 320w,
https://i.stack.imgur.com/Lwddt.png 640w,
https://i.stack.imgur.com/8Z9jL.jpg 960w" sizes="(max-width: 575px) 320px, (max-width: 767px) 640px, (min-width: 768px) 960px, 100vw" src="https://i.stack.imgur.com/8Z9jL.jpg" alt="Test Responsive Image">