Fix `sizes` property for image tag in all the blocks.

[iRohitSingh]

Describe the bug
We have images with scales but we are not providing the proper sizes property. Browser choose appropriate image based on sizes provided and mentioined in srcset. We have srcset but we are not using the full potential here. I can say it is broken in some sense.

To Reproduce

Steps to reproduce the behavior:

1. Create a image block
2. Open developer tools and inspect image.
3. Inspect image.
4. You will the sizes propety is 100vw which means that give me image of viewport width since our viewport is bigger we always loads the biggest image.

Expected behavior

We should have correct sizes propety belongs to that blocks. Which will use the srcset propety properly.

Screenshots

For teaser block we are not even providing the sizes property.

For image block sizes is set to 100vw

@pnicolli can you please give your feedback regarding this issue?

[pnicolli]

Hey, thanks for bringing out this topic. Yes, I understand that the sizes attribute is needed for srcsets to fully work and some discussion happened when the current implementation was developed.

Regarding the image block, it's taken care of in this code, I think it's a decent default implementation, a good approximation: https://github.com/plone/volto/blob/main/packages/volto/src/components/manage/Blocks/Image/View.jsx#L67

The painful part is the Teaser block. At the time of the development of the current Image component, we found no clear way to set a proper default for that and just thought that for now it could be a developer responsibility to handle the sizes for the teasers in an appropriate way for their clients' themes.

[MrTango]

@pnicolli i just realized that i totally missed the importance of the sizes attribute, when implemented this for classic UI, probably because, i was always resizing the viewport to test things.
But the problem is, like with the teaser images, it still takes the viewport size, which then of course is much to big.
I'll add the configuration for sizes into the picture-variants inside the image handling control panel.
Maybe this could also be a way you can use it?

In classic for example, we could then use a picture variant small for teasers.
also this PR might be of interest: plone/plone.namedfile#170
I'll look into it as soon as i can.

[MrTango]

As a first fix, we could at least set the following for sizes, to prevent it from loading even bigger images.

sizes: (min-with: 940px) 940px, 100vw

that would mean, that the teaser image is max 940px, which is what we currently load if it is centered and standing alone.
Right now the original image is the taken on big screens, even when you only need 400px.

If possible you could set smaller sizes when the teaser is used in a listing or grid block.
For example if you have two columns in a grid block, we don't need 940px and so on.

[MrTango]

I fixed it for classic ui with the picture variant configuration.
plone/plone.namedfile#180
So every picture variant like "small" has a default scale, which is used to define the rendered size on big screens and also as a fallback, for very old browsers. This scale width (target_width) is now used to create a default sizes attribute.

(min-width: 576px) {target_width}px, 98vw

This helps already a lot.
For each defined picture variant, then i can set what ever i want for the sizes attribute to optimize for each usecase.
This way it is al about doing the right settings for the design.
And it can be made by a product owner/designer, not just by a developer overriding components.
The components should use a picture variant, the settings stay in the plone.registry/control panel.

This approach can work for Volto project too.

[github-actions]

Hi There! 👋

We haven't seen any activity on this issue in a while 😴, and we want to make sure that it's still relevant.

If updating to the latest version of Volto doesn't help, please let us know by:

• adding a comment about what needs to be done next 💬
• updating its status and other labels 🏷️

Otherwise close this issue. 🧹