Responsive images via picture element and media queries via CSS - html

Question

I have the below image HTML code, working great on responsive websites and loading images only when needed based on screen-size, saving the user bandwidth. I'm also already lazy-loading images based on whether they show in the browser viewport.
<picture>
<source media="(max-width: 300px)" srcset="/images/thumb.png ">
<source media="(max-width: 500px)" srcset="/images/largethumb.png ">
<img src="/images/original.png">
</picture>
However, I have many images on my page, so how can I reduce the HTML payload? I'm looking for something like this, but not sure if it's possible at all:
HTML
<picture>
<source srcset="/images/thumb.png ">
<source srcset="/images/largethumb.png ">
<img src="/images/original.png">
</picture>
PSEUDO CSS
picture source:nth-child(1){
media:(max-width: 300px);
}
picture source:nth-child(2){
media:(max-width: 500px);
}
But I can't find anything on Google.
I already checked:
https://alligator.io/html/picture-element/
https://bitsofco.de/the-srcset-and-sizes-attributes/

Answer 1

I'd suggest going with lazy loading.
It literally defers the loading of resources on the page as long as they are not needed. E.g using Intersection Observer API images will never be loaded if users never get to that point of the website. This means serious savings in bandwidth.
There are couple ways how to do this:
Native lazy loading
<img src="yourimage.jpg" loading="lazy" alt="..." />
More info here: https://web.dev/browser-level-image-lazy-loading/
Using the Intersection Observer API
All details here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Here is also great article how to match all technics perfectly with responsive images: https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/