Simply first create the src image link at the lower breakpoint which is the one that will be indexed, and then move up to the next breakpoint(s) you want your optional srcsets to be displayed. After linking the first url link for the standard image, you can add a comma and then a space and add another url link for your higher definition image followed by the required "2x" descriptor. This really works to deliver crisper pictures to those devices with displays capable of displaying them.
I am in love with the picture element again.....
Example
<picture><!--[if IE 9]><video style="display: none;"><![endif]-->
<source media="(min-width: 768px)" srcset="https://www.coffeecup.com/images/homepage/RED-responsive-homepage.png, https://www.coffeecup.com/images/homepa … age@2x.png 2x";<!--[if IE 9]></video><![endif]--><img alt="Placeholder Picture" src="https://www.coffeecup.com/images/homepage/RED-responsive-homepage.png">
</picture>
Bootstrap 5 CSS Grid.