Responsive Images 

Examples for implementing responsive images with srcset and automatic generation.

Automatic srcset Generation 

Objective: Generate responsive images with srcset

TypoScript Setup 

EXT:my_site/Configuration/TypoScript/setup.typoscript
lib.parseFunc_RTE {
    tags.img = TEXT
    tags.img {
        current = 1
        preUserFunc = MyVendor\MySite\UserFunc\ResponsiveImageRenderer->render
    }
}
Copied!

PHP Implementation 

EXT:my_site/Classes/UserFunc/ResponsiveImageRenderer.php
namespace MyVendor\MySite\UserFunc;

use TYPO3\CMS\Core\Resource\FileRepository;
use TYPO3\CMS\Core\Resource\ProcessedFile;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;

class ResponsiveImageRenderer
{
    public function render(
        string $content,
        array $conf,
        ContentObjectRenderer $cObj
    ): string {
        // Parse img tag
        if (!preg_match('/<img([^>]*)>/i', $content, $imgMatch)) {
            return $content;
        }

        // Extract data-htmlarea-file-uid
        if (!preg_match('/data-htmlarea-file-uid="(\d+)"/', $imgMatch[1], $uidMatch)) {
            return $content;
        }

        $fileUid = (int)$uidMatch[1];

        // Get FAL file
        $fileRepository = GeneralUtility::makeInstance(FileRepository::class);
        try {
            $file = $fileRepository->findByUid($fileUid);
        } catch (\Exception $e) {
            return $content;
        }

        // Generate responsive variants
        $breakpoints = [
            'xs' => 480,
            'sm' => 768,
            'md' => 992,
            'lg' => 1200,
            'xl' => 1920
        ];

        $srcsetParts = [];
        foreach ($breakpoints as $name => $width) {
            $processedFile = $file->process(
                ProcessedFile::CONTEXT_IMAGECROPSCALEMASK,
                ['width' => $width]
            );
            $srcsetParts[] = $processedFile->getPublicUrl() . ' ' . $width . 'w';
        }

        $srcset = implode(', ', $srcsetParts);
        $sizes = '(max-width: 768px) 100vw, (max-width: 992px) 50vw, 33vw';

        // Replace img tag with srcset version
        $newImg = str_replace(
            '<img',
            '<img srcset="' . htmlspecialchars($srcset) . '" sizes="' . $sizes . '"',
            $imgMatch[0]
        );

        return str_replace($imgMatch[0], $newImg, $content);
    }
}
Copied!

Result HTML 

<img
    src="/fileadmin/image.jpg"
    srcset="/fileadmin/_processed_/image_480.jpg 480w,
            /fileadmin/_processed_/image_768.jpg 768w,
            /fileadmin/_processed_/image_992.jpg 992w,
            /fileadmin/_processed_/image_1200.jpg 1200w,
            /fileadmin/_processed_/image_1920.jpg 1920w"
    sizes="(max-width: 768px) 100vw, (max-width: 992px) 50vw, 33vw"
    alt="Image description"
/>
Copied!

Result: Automatic responsive images ✅