Search code examples
typo3imagemagickfluidgraphicsmagick

TYPO3: webp images are converted to png

I'm using a webp image in a default image content element.

webp images are enabled:

$GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] .= ',webp';

But in frontend, a png is rendered, instead of a webp, when it's processed by TYPO3/ImageMagick/GraphicsMagick.

When explicitly saying webp should be generated, it works as expected:

<f:image image="{file}" fileExtension="webp" />

How to configure TYPO3 or ImageMagick/GraphicsMagick to not convert webp to png automatically?

Solution

  • For TYPO3 v13, some issues with Webp (including the above) should now be resolved by:

    For versions below TYPO3 v13 you could try

    1. the approach with an event listener for BeforeFileProcessingEvent and set $configuration['fileExtension'] = 'webp' as Julian Hofmann suggested
    2. OR try to backport the patch. You can make the change in AbstractGraphicalTask instead of ImageCropScaleMaskTask and ImagePreviewTask.php
    3. OR do not support .webp files natively (e.g. don't allow to upload them) in older TYPO3 versions and use an additional extension such as EXT:webp to automatically generate .webp

    For the EventListener, this should work (but might need some more tweaking):

    class BeforeFileProcessingEventListener
{
    public function __invoke(BeforeFileProcessingEvent $event): void
    {
        if ($event->getFile()->getExtension() === 'webp') {
            $processedFile = $event->getProcessedFile();
            // if file was already processed, we do nothing here!
            if (!$processedFile->isProcessed()) {
                $configuration = $processedFile->getProcessingConfiguration();
                $configuration['fileExtension'] = 'webp';
                // there is no setProcessingConfiguration in ProcessedFile so we create a new ProcessedFile
                $processedFileRepository = GeneralUtility::makeInstance(ProcessedFileRepository::class);
                $newProcessedFile = $processedFileRepository->createNewProcessedFileObject($event->getFile(), $event->getTaskType(), $configuration);
                $event->setProcessedFile($newProcessedFile);
            }  
        }
    }
}