Image width and height inside <picture> tag?

I have a problem with setting right width and height for the main img src inside block.

<picture style="text-align: center; display: block;">
  <source srcset="https://www.ceramic-glazes.com/image/catalog/banners/ceramic-pigments.jpg" media="(min-width: 1200px)" width="1140" height="380">
  <source srcset="https://www.ceramic-glazes.com/image/catalog/banners/ceramic-pigments-600w.jpg" media="(min-width: 625px)" width="600" height="380">
  <source srcset="https://www.ceramic-glazes.com/image/catalog/banners/ceramic-pigments-320w.jpg" media="(max-width: 625px)" width="320" height="320">
  <img src="https://www.ceramic-glazes.com/image/catalog/banners/ceramic-pigments.jpg" alt="Ceramic pigments for Pottery for Ceramics Heraeus" width="100%" height="100%">
</picture>

If I leave it with width="100%" height="100%" visually is OK but Google search PageSpeed Insights reports bad CLS.
If I set the original size width="1140" height="380" all browsers but Chrome set these sizes on the image and visual is bad but CLS is OK!.
If I leave img src without width and height PageSpeed Insights returns Image elements do not have explicit width and height and bad CLS.

So any glue how to fix this issue? Basically I want to show a different images for different screen sizes, so is there another way than to do it?

You can check how it looks on our site here -> ceramic glazes

At Any product like gold glaze for ceramics

Solution

Very easy, simply double state your property rules for your dimensions, with the final rule being what you really want.

So, something like this

.image {
width: 100px;  //gives good CLS/Lighthouse (initial)
width: 100%;   //gives the desired display result (final)
}

This is also a form of redundancy for supporting old browsers, where you load the old and more common rules first, with the bleeding-edge stuff last. If the browser does not understand the rules, it discards them. HTH.