响应图像通过图片元素和媒体查询通过CSS

我有以下图像HTML代码，在响应式网站上工作得很好，只在需要时根据屏幕大小加载图像，节省用户带宽。我也已经根据它们是否显示在浏览器视窗中延迟加载图像了。

<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>

但是，我的页面上有许多图像，那么我如何减少HTML有效负载?我正在寻找这样的东西，但不确定是否可能:

<picture>
<source srcset="/images/thumb.png ">
<source srcset="/images/largethumb.png ">
<img src="/images/original.png">
</picture>

伪CSS

picture source:nth-child(1){
media:(max-width: 300px);
}
picture source:nth-child(2){
media:(max-width: 500px);
}

但是我在Google上找不到任何东西。

我已经检查过了:

• https://alligator.io/html/picture-element/
• https://bitsofco.de/the-srcset-and-sizes-attributes/

<img src="yourimage.jpg" loading="lazy" alt="..." />