[Feat]: Extend the Figure Component

[iuscare]

Hi there,

I've extended the figure component with the following functionality and I am wondering if it would be useful for you. If so, I'd be happy to make a PR:

• I also check for data-srcset and set its value to srcset if present
• I also do the same with source elements within the figure element. This is useful for Art Direction (data-src & data-srcset attributes)
• Clean up and remove data-src & data-srcset attributes, once their values have been ported to the html attributes
• Calculate the sizes attribute by measuring the parent container and set its value
• I also added the functionality that the Component checks if the client supports .avif and .webp format. If the test fails, a second method is called, which exchanges the .avif and .webp file extension with .jpg. This technqiue eliminates the need for fallback images and the use of <picture> elements when just serving responsive images, while we can still use modern file formats like .webp and/or .avif and it keeps the html markup a little bit cleaner. The only requirement is that the images need to have the same path and name on the server.
• If no javascript is supported by the client, I inject the original image via a <noscript> tag

Just gimme a feedback, if a PR would be appreacited.

All the best!

[titouanmathis]

Hey @iuscare, sorry for the late reply, and thanks for the proposal!

I think that adding the data-srcset and <noscript> features could be nice additions to the component.

Here is my feedback on the other topics:

• I also do the same with source elements within the figure element. This is useful for Art Direction (data-src & data-srcset attributes)

I am not sure to understand the concept here, are you referring to the <picture> and <source> HTML elements?

• Clean up and remove data-src & data-srcset attributes, once their values have been ported to the html attributes

The cleanup part might be incompatible with the FigureTwicpics component, which needs to hold the value of the original source.

• Calculate the sizes attribute by measuring the parent container and set its value

Does this have an impact on performance? I think that width and height attributes are useful at the very beginning of the page's load, I am not sure that adding them later will have a meaningful impact.

• I also added the functionality that the Component checks if the client supports .avif and .webp format. If the test fails, a second method is called, which exchanges the .avif and .webp file extension with .jpg. This technqiue eliminates the need for fallback images and the use of elements when just serving responsive images, while we can still use modern file formats like .webp and/or .avif and it keeps the html markup a little bit cleaner. The only requirement is that the images need to have the same path and name on the server.

For this complex feature, I think that is out of scope of the Figure component. I'd recommend using a tool like Twicpics, which does that server-side, to achieve this level of optimization.