Is it worth using the picture construction in a modern layout?

Question

HTML

The thing is, I thought picture was cool. I thought that with it you can upload
images to the user, the size of which is optimal for his screen, which speeds up the loading of the photo. At first, it took a long time to reduce the size of the image. Then I found a service that does it for me. As a result, I got to the point that the images in my layout, the initial width of which is 2560px, I reduce with an interval of 20kb to a resolution of 320px in width. And I get about 35 images, the weight of which differs from the previous one by 20kb, on the one hand, this is good as I thought, but is it really so?
But this method also did not increase the speed. I had to squeeze these 35 photos in order to further reduce the weight, and then also massively rename them, since the services add their suffixes and prefixes to the name. The question is whether it is worth bothering with it and whether it is worth using the picture construction in modern layout at all.
An example of such a design from my layout:

<picture>
   <source srcset='img/free/ibg-320.jpg' type='image/jpeg' media='(max-width:320px)'>
   <source srcset='img/free/ibg-510.jpg' type='image/jpeg' media='(max-width:510px)'>
   <source srcset='img/free/ibg-660.jpg' type='image/jpeg' media='(max-width:660px)'>
   <source srcset='img/free/ibg-788.jpg' type='image/jpeg' media='(max-width:788px)'>
   <source srcset='img/free/ibg-916.jpg' type='image/jpeg' media='(max-width:916px)'>
   <source srcset='img/free/ibg-1019.jpg' type='image/jpeg' media='(max-width:1019px)'>
   <source srcset='img/free/ibg-1117.jpg' type='image/jpeg' media='(max-width:1117px)'>
   <source srcset='img/free/ibg-1198.jpg' type='image/jpeg' media='(max-width:1198px)'>
   <source srcset='img/free/ibg-1277.jpg' type='image/jpeg' media='(max-width:1277px)'>
   <source srcset='img/free/ibg-1361.jpg' type='image/jpeg' media='(max-width:1361px)'>
   <source srcset='img/free/ibg-1431.jpg' type='image/jpeg' media='(max-width:1431px)'>
   <source srcset='img/free/ibg-1496.jpg' type='image/jpeg' media='(max-width:1496px)'>
   <source srcset='img/free/ibg-1564.jpg' type='image/jpeg' media='(max-width:1564px)'>
   <source srcset='img/free/ibg-1627.jpg' type='image/jpeg' media='(max-width:1627px)'>
   <source srcset='img/free/ibg-1687.jpg' type='image/jpeg' media='(max-width:1687px)'>
   <source srcset='img/free/ibg-1746.jpg' type='image/jpeg' media='(max-width:1746px)'>
   <source srcset='img/free/ibg-1803.jpg' type='image/jpeg' media='(max-width:1803px)'>
   <source srcset='img/free/ibg-1858.jpg' type='image/jpeg' media='(max-width:1858px)'>
   <source srcset='img/free/ibg-1912.jpg' type='image/jpeg' media='(max-width:1912px)'>
   <source srcset='img/free/ibg-1965.jpg' type='image/jpeg' media='(max-width:1965px)'>
   <source srcset='img/free/ibg-2016.jpg' type='image/jpeg' media='(max-width:2016px)'>
   <source srcset='img/free/ibg-2062.jpg' type='image/jpeg' media='(max-width:2062px)'>
   <source srcset='img/free/ibg-2111.jpg' type='image/jpeg' media='(max-width:2111px)'>
   <source srcset='img/free/ibg-2159.jpg' type='image/jpeg' media='(max-width:2159px)'>
   <source srcset='img/free/ibg-2205.jpg' type='image/jpeg' media='(max-width:2205px)'>
   <source srcset='img/free/ibg-2250.jpg' type='image/jpeg' media='(max-width:2250px)'>
   <source srcset='img/free/ibg-2297.jpg' type='image/jpeg' media='(max-width:2297px)'>
   <source srcset='img/free/ibg-2346.jpg' type='image/jpeg' media='(max-width:2346px)'>
   <source srcset='img/free/ibg-2389.jpg' type='image/jpeg' media='(max-width:2389px)'>
   <source srcset='img/free/ibg-2429.jpg' type='image/jpeg' media='(max-width:2429px)'>
   <source srcset='img/free/ibg-2473.jpg' type='image/jpeg' media='(max-width:2473px)'>
   <source srcset='img/free/ibg-2515.jpg' type='image/jpeg' media='(max-width:2515px)'>
   <source srcset='img/free/ibg-2533.jpg' type='image/jpeg' media='(max-width:2533px)'>
   <source srcset='img/free/ibg-2560.jpg' type='image/jpeg' media='(max-width:2560px)'>
   <img src='img/free/ibg-2560.jpg' alt='' />
</picture>

As you can see, it is very massive, recently I made a slider where there were different photos in the background, and I had to prescribe this for each photo (there were 13 slides).
These photos have a resolution of 2560px and I don't want to reduce their stock size because I think that the future is behind higher resolutions, so I try to keep my layout up to 4K screens.
I also don’t use node.js because I have Windows 7 and I can’t roll the new version onto it, then I read the info about it, it turns out it doesn’t support the new version of node.js
Repeating the final question: Is it worth it to bother and is it worth it at all in modern layout to use the picture construction or to use a construction with a smaller image size spacing?

Answer 1

It's easier to do this: whole, half, quarter, etc. (up to 320 pixels, for example, smaller ones can no longer be done). And the numbers will turn out beautiful, and the interpolation is more even (due to powers of two), and there will not be so many images.
Another option is to select the most popular screen resolutions and adjust the sizes for them (provided that the slider is at the full width of the window and is 100vw) - then for most users the image will not be stretched, but the one corresponding to the current screen resolution will be selected (but here the vertical scrollbar can spoil all perfectionism).