How to make SEO friendly carousel/dialog?

[lilouartz]

This is how the main product picture appears on my website:

and it has the following markup:

<div>
  <img
    alt="Force Factor, ProbioSlim"
    class="dialog__trigger cursor_pointer"
    decoding="async"
    fetchpriority="high"
    height="1610"
    sizes="100vw"
    src="/supplements/probioslim-1865/images/triptych.avif?width=480"
    style="aspect-ratio:2716 / 1610"
    title="Force Factor, ProbioSlim supplement label"
    width="2716"
    data-scope="dialog"
    data-part="trigger"
    id="dialog::R5r335::trigger"
    aria-haspopup="dialog"
    type="button"
    aria-expanded="false"
    data-state="closed">
</div>

You can see a preview here: https://pillser.com/supplements/mycrobiome-probiotic-weight-formula-24209

If user clicks on the image, then a dialog appears that shows upsized version of the image.

I want to add a second picture for the same product: What markup should I use?

Related, my image includes width= parameter, but I want Google to index the version without width attribute, i.e. /supplements/probioslim-1865/images/triptych.avif. How do I indicate that in the markup?