1

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

product card screenshot

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>

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?

1 Answer 1

0

Regarding your second point -

Assuming the ?width=480 is resizing the image server-side, I'd perhaps think about using the srcset attribute to serve the large image to users on higher resolution screens, and also have that as the fallback. For all other users, serve the small image.

Something like this, though you may want something more complex, especially if the large image is more than twice the size of the small one.

srcset="/supplements/probioslim-1865/images/triptych.avif?width=480 1x, /supplements/probioslim-1865/images/triptych.avif 2x"
   src="/supplements/probioslim-1865/images/triptych.avif"

I can't guarantee this will definitely work, but the markup should mean that Google at least know the location of the best quality image (minus ?width), and also users on high resolution monitors get a better looking site. The markup would be signalling what is going on.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.