benjaminkott / benjaminkott/bootstrap_package

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

Open
#1,529 3 comments 0 reactions 0 assignees View on GitHub
feature
Dominant language
PHP
Stars
355
Forks
212
Avg merge
1h 4m
Merged PRs (30d)
31

Description

# 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

```






A misty sunrise

```

the html rendered would be something like:

```






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






A misty sunrise


```

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

Contributor guide

No contributing guide indexed for this repository

Research direction

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.

Written by the indexing model from the issue text.

Assessment

Tech stack
bootstrap, php
Domain
frontend, performance
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.