In der TYPO3 Masterclass vom 14. April 2025 habe ich die Frage gestellt, wie sich die Konvertierung von Bildern nach WebP in TYPO3 zentral und template-unabhängig steuern lässt. Direkt im Anschluss habe ich ein wenig dazu recherchiert und dabei den Event Listener BeforeFileProcessingEventListener gefunden, der sich gut eignet, um die Bildkonfiguration vor dem Processing zu manipulieren. Daraufhin habe ich eine erste Lösung ausgearbeitet, die auf diesem Listener basiert.
Der gewünschte Dateityp wird dabei automatisch festgelegt – vollständig gekapselt, kompatibel mit TYPO3 13 und ohne Änderungen an bestehenden Templates.
Hinweis: Dieser Event Listener setzt lediglich den Fallback-Dateityp für unterstützte Rastergrafikformate auf WebP, sofern keine andere Datei-Endung explizit angegeben wurde. Das Verhalten entspricht dabei dem, als würde man das Attribut fileExtension="webp" überall in den Fluid-Templates setzen.
Man muss für das jeweilige Projekt selbst abwägen, ob die ausschließliche Nutzung von WebP ausreichend ist – insbesondere, da einige ältere Browser das Format unter Umständen noch nicht unterstützen. Eine Übersicht zur Browserunterstützung findet sich unter caniuse.com.
✅ Vorteile der Lösung
- Kein Eingriff in Fluid-Templates erforderlich
- WebP wird nur gesetzt, wenn keine andere Endung vorgegeben wurde
- Kompatibel mit
File und FileReference
- Optionales Logging möglich – siehe TYPO3-Doku zur FileWriter-Konfiguration
📋 Voraussetzungen
- TYPO3 v13 oder neuer
webp muss in $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] enthalten sein- Die zugrunde liegende Grafikbibliothek (z. B. ImageMagick) muss WebP unterstützen
Event Listener zur WebP-Erzwingung
Pfad: EXT:sitepackage/Classes/Event/Listener/BeforeFileProcessingEventListener.php
<?php
declare(strict_types=1);
namespace VendorName\Sitepackage\Event\Listener;
use TYPO3\CMS\Core\Attribute\AsEventListener;
use TYPO3\CMS\Core\Resource\Event\BeforeFileProcessingEvent;
use TYPO3\CMS\Core\Resource\File;
use TYPO3\CMS\Core\Resource\FileInterface;
use TYPO3\CMS\Core\Resource\FileReference;
use TYPO3\CMS\Core\Resource\ProcessedFile;
/**
* Forces WebP output for supported image types during file processing,
* unless a specific output format is already configured.
*
* Note: For the best performance, the fileExtension should be set explicitly
* wherever image processing is triggered. This listener ensures fallback
* behavior and may cause additional processing on first use or cache rebuild.
*/
#[AsEventListener(
identifier: 'sitepackage/before-file-processing',
)]
final readonly class BeforeFileProcessingEventListener
{
/**
* MIME types suitable for WebP conversion.
*
* Keys are used for fast lookup via isset().
*
* @var array<string, bool>
*/
private const array SUPPORTED_MIME_TYPES = [
'image/jpeg' => true,
'image/png' => true,
'image/gif' => true,
'image/bmp' => true,
'image/tiff' => true,
];
/**
* Applies WebP conversion if no fileExtension is configured.
*/
public function __invoke(BeforeFileProcessingEvent $event): void
{
$processedFile = $event->getProcessedFile();
$configuration = $processedFile->getProcessingConfiguration();
if (!empty($configuration['fileExtension'])) {
return;
}
$fileInterface = $event->getFile();
if (!$this->isWebpConvertible($fileInterface)) {
return;
}
$file = $this->resolveFile($fileInterface);
$configuration['fileExtension'] = 'webp';
$newProcessedFile = new ProcessedFile(
$file,
$event->getTaskType(),
$configuration
);
$event->setProcessedFile($newProcessedFile);
}
/**
* Checks if the file MIME type allows WebP conversion.
*/
private function isWebpConvertible(FileInterface $file): bool
{
return isset(self::SUPPORTED_MIME_TYPES[$file->getMimeType()]);
}
/**
* Returns the original file from a reference or the file itself.
* Ensures the return type is always a File.
*/
private function resolveFile(FileInterface $file): File
{
if ($file instanceof FileReference) {
return $file->getOriginalFile();
}
assert($file instanceof File);
return $file;
}
}