Develop the responsive image tag to create and render webp as well as the original format, using TYPO3 13 capability to render webp

Start with the responsive image rendering behavior illustrated in the issue and review TYPO3 13's webp image-processing capability. Done means each configured image-size variant can offer webp before the original format in the picture markup, while preserving the original-format fallback and a configurable enable/disable option if needed.

Feature Request

Image content elements to create webp variants of images as well as variants of the sizes of the original image file-type, and offer them to the browser as a source in the picture tag as an alternative file-type for faster responsiveness of page loading

Is your feature request related to a problem? Please describe

page loading is slowed by not offering better compressed image formats (as demonstrated in pagespeed.web.dev scores and advice)

Describe the solution you'd like

As well as different size images for different viewports, Picture tags can hold sources of different image formats to offer faster download of better compressed images in webp or avif format.

I would like bootstrap_package image rendering to create webp versions of each size variant of the original image (as well as the variant sizes of the original image), and offer them in the picture tag

i.e. Instead of

<picture>

            <source data-variant="default" data-maxwidth="620" media="(min-width: 1400px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_92f0867d8a.jpg 1x">
            <source data-variant="xlarge" data-maxwidth="530" media="(min-width: 1200px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_c61df4d054.jpg 1x">
            <source data-variant="large" data-maxwidth="440" media="(min-width: 992px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_6a5f1de29d.jpg 1x">
            <source data-variant="medium" data-maxwidth="320" media="(min-width: 768px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_1e359b9596.jpg 1x">
            <source data-variant="small" data-maxwidth="500" media="(min-width: 576px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_871c0144af.jpg 1x">
            <source data-variant="extrasmall" data-maxwidth="374" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_2dc771b868.jpg 1x">

            <img loading="lazy" src="/fileadmin/_processed_/b/e/csm_misty-sunrise_20b018872e.jpg" width="620" height="413" title="" alt="A misty sunrise">

</picture>

the html rendered would be something like:

<picture>

            <!-- webp format is offered first -->

            <source data-variant="default" data-maxwidth="620" media="(min-width: 1400px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_92f0867d8a.webp 1x">
            <source data-variant="xlarge" data-maxwidth="530" media="(min-width: 1200px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_c61df4d054.webp 1x">
            <source data-variant="large" data-maxwidth="440" media="(min-width: 992px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_6a5f1de29d.webp 1x">
            <source data-variant="medium" data-maxwidth="320" media="(min-width: 768px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_1e359b9596.webp 1x">
            <source data-variant="small" data-maxwidth="500" media="(min-width: 576px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_871c0144af.webp 1x">
            <source data-variant="extrasmall" data-maxwidth="374" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_2dc771b868.webp 1x">

             <-- if the browser cannot handle webp it will skip over the above and choose an image in the original format -->

            <source data-variant="default" data-maxwidth="620" media="(min-width: 1400px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_92f0867d8a.jpg 1x">
            <source data-variant="xlarge" data-maxwidth="530" media="(min-width: 1200px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_c61df4d054.jpg 1x">
            <source data-variant="large" data-maxwidth="440" media="(min-width: 992px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_6a5f1de29d.jpg 1x">
            <source data-variant="medium" data-maxwidth="320" media="(min-width: 768px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_1e359b9596.jpg 1x">
            <source data-variant="small" data-maxwidth="500" media="(min-width: 576px)" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_871c0144af.jpg 1x">
            <source data-variant="extrasmall" data-maxwidth="374" srcset="/fileadmin/_processed_/b/e/csm_misty-sunrise_2dc771b868.jpg 1x">

             <!-- if the browser doesn't understand variant sizes it will skip over the above and load the img tag below -->

            <img loading="lazy" src="/fileadmin/_processed_/b/e/csm_misty-sunrise_20b018872e.jpg" width="620" height="413" title="" alt="A misty sunrise">

</picture> 

This could be enabled if the installation is capable of rendering webp (TYPO13 and above)

If it was not desired to be active by default a user toggle could be included, i.e. a user configurable constant to enable/disable webp rendering

Describe alternatives you've considered

mod_pagespeed appears to be discontinued - the last release was over four years ago

Additional context

TYPO3 13 now enables webp rendering as standard (if the image processor i.e. imagemagick or graphicsmagick supports it), and if it is enabled in system settings (it is enabled by default in settings in new installations of TYPO3 13) It seems this will make it much easier to create webp versions of the image variants.

https://typo3.com/blog/the-top-new-features-in-typo3-v13/#c17237