The following outlines a technique combining floating blocks and inline-blocks allowing for fairly interesting layouts without the need to use nested rows and avoids some problems when using pure floats.

The technique itself only uses three classnames:

• combine-layout - defines the containing element.
• break - starts a new row when in floating block context.
• divide - starts off the inline-block context.

TL;DR

<img src="/path/to/foo-320w-240h-1x.jpg" width="320" height="240"
    srcoptions="/path/to/foo-{width}-{height}-{dpr}.{format},
    320w 480w 640w, 1x 1.33x 2x, webp jpg"/>

• DRY - Expose url pattern and avaliable options for images - not full urls - in markup. Browser picks best options - builds url.
• Responsive images need CSS to get layout. Browser preloading is a pre-RWD optimization. Preloading doesn't make sense with upcoming postpone and lazyload attributes anyway.
• Client Hints can't be used exclusively. Has server requirement and needs alt. way of handling CH - anyway - when server req. can't be met.

A nice clean example of the revamped picture proposal:

<figure>
	<picture>
		<source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x">
		<source media="(min-width: 18em)" srcset="med-1.jpg, med-2.jpg 2x">
		<source srcset="small-1.jpg, small-2.jpg 2x">
		<img src="small-1.jpg" alt="" width="200" height="200">
	</picture>

Let's say you need to add a button to a subscription form.

<button style="background-color: red; width: 200px;">Subscribe</button>