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
<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.
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
the html rendered would be something like:
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