Improve srcSet flexibility in the Image component

[pedrobernardina]

What is this Contribution About?

The Image component serves as a wrapper that optimizes image URLs for each e-commerce platform while leveraging the optimized Deco CDN. However, the current srcSet generation is limited because it only considers two factors, preventing the generation of intermediate image sizes.

Since modifying the existing srcSet logic could introduce breaking changes across all stores, a more flexible approach would be to allow an optional srcSet prop, enabling customization without altering the default behavior.

Proposed Solution:

Introduce an optional srcSet prop to the Image component, allowing developers to define custom breakpoints while maintaining backward compatibility.

[github-actions]

Tagging Options

Should a new tag be published when this PR is merged?

• 👍 for Patch 0.64.49 update
• 🎉 for Minor 0.65.0 update
• 🚀 for Major 1.0.0 update

[gabrielMatosBoubee]

I think we should have an array of objects that defines the properties of the image in each viewport.

Ex:

input: const viewPortsConfig  = [
  { viewport: 300, width: 675, height: 1000 },
  { viewport: 600, width: 1200, height: 1800 },
  { viewport: 1024, width: 1920, height: 2880 }
];

output: <img src="https://cdn.exemplo.com/imagens/imagem.jpg?w=675&h=1000" 
     srcset="https://cdn.exemplo.com/imagens/imagem.jpg?w=675&h=1000 675w,
             https://cdn.exemplo.com/imagens/imagem.jpg?w=1200&h=1800 1200w,
             https://cdn.exemplo.com/imagens/imagem.jpg?w=1920&h=2880 1920w"
     sizes="(max-width: 300px) 675px,
            (max-width: 600px) 1200px,
            1920px"
     alt="Imagem otimizada para diferentes dispositivos" />

[pedrobernardina]

@gabrielMatosBoubee hi!

My proposal was to keep it as simple as possible, but I can see your solution working as a helper function to generate these custom SrcSets — perhaps exported by Image or another file.

That said, being able to pass a custom srcSet as a string is also important. For example, I can't use an optimized srcSet for Sanity on Deco Image since the component doesn't know how to optimize these.