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

[srchild]

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

[Patta]

@srchild I think you could already implement this by adding webp to $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] and overwrite the image rendering partial EXT:bootstrap_package/Resources/Private/Partials/ContentElements/Media/Rendering/Image.html

In the image partial, duplicate the <f:for each="{variants}" key="name" as="variant"> loop section and add , fileExtension: 'webp' to the f:uri.image viewhelper in the sizeUrl variables.

See also https://www.webwilli.at/blog/eintrag/typo3-bilder-als-webp-ausgeben

I tested it with TYPO3 12.4.31 with bootstrap_package 15.0.2

[srchild]

Perfect - that worked at first attempt :)

Thank you @Patta

[netbrothers-tr]

I can confirm that @Patta's solution works with these versions.

• TYPO3: 13.4.19
• Bootstrap Package: 15.0.4

Though, I would like to add for anyone applying this:

• Place the for-loop that creates the WebP source elements before the one that creates the PNG source elements. Otherwise browsers will pick PNG over WebP, because order matters.
• In TYPO3 v13 webp should already be in your $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] and you don't have to add it yourself.