12 Ways To Create TYPO3 Responsive Images!

Responsive images help deliver fast, optimized TYPO3 websites across desktop, tablet, and mobile devices. TYPO3 provides multiple ways to implement responsive images using core features, Fluid ViewHelpers, TypoScript, and extensions.

In this guide, we explore 10+ ways to create responsive images in TYPO3, using techniques like srcset, <picture> tags, and lazy loading to serve images that adapt to different screen sizes.

Responsive images:

• Serve optimized images for different devices
• Reduce page load time and bandwidth
• Improve Core Web Vitals and mobile performance
• Enhance overall SEO and user experience

TYPO3 handles images through its File Abstraction Layer (FAL), supporting backend cropping, automatic image processing, and rendering with <f:image> and <f:media>, while allowing further customization via TypoScript and extensions.

2. Using <img srcset> Attribute

Another common way to implement responsive images in TYPO3 is by using the srcset attribute within the <img> tag. This allows the browser to choose the most appropriate image size based on the user’s screen width and device resolution.

In TYPO3 Fluid templates, srcset attribute can be added through additionalAttributes, while image URLs are generated using the <f:uri.image> ViewHelper.

Example: Using srcset with <f:media>

<!-- Syntax of srcset using additionalAttributes -→

<f:media
   class="image-embed-item"
   file="{file}"
   width="{dimensions.width}"
   height="{dimensions.height}"
   alt="{file.alternative}"
   title="{file.title}"
   loading="{settings.media.lazyLoading}"
   additionalAttributes="{srcset: '{f:uri.image(image: file, maxWidth: 768)} 768w,
                                   {f:uri.image(image: file, maxWidth: 990)} 990w,
                                   {f:uri.image(image: file, maxWidth: 1200)} 1200w,
                                   {f:uri.image(image: file, maxWidth: 1440)} 1440w,
                                   {f:uri.image(image: file, maxWidth: 1900)} 1900w',
                          sizes: '(min-width: 1200px) 50vw, 100vw'}"
/>

Output Example

<img
   srcset="/fileadmin/_processed_/6/e/csm_image_01_8159d1e3b0.jpg 768w,
           /fileadmin/_processed_/6/e/csm_image_01_19d1039365.jpg 990w,
           /fileadmin/_processed_/6/e/csm_image_01_9cee8957cf.jpg 1200w,
           /fileadmin/_processed_/6/e/csm_image_01_922756210c.jpg 1440w,
           /fileadmin/_processed_/6/e/csm_image_01_0e137c815f.jpg 1900w"
   sizes="(min-width: 1200px) 50vw, 100vw"
   class="image-embed-item"
   title="Title Text"
   alt="Alt Text"
   src="/fileadmin/_processed_/6/e/csm_image_02_38sd8s8776.jpg"
   loading="lazy"
   width="600"
   height="337"
>

Tips

• The srcset attribute helps browsers load the optimal image size for different devices.
• TYPO3 automatically generates processed images through FAL image processing.
• Image width limits can be configured using TypoScript constants:

styles.content.textmedia.maxW
styles.content.textmedia.maxWInText

3. Using <img data-srcset> Attribute

Some TYPO3 integrators prefer using data-srcset instead of srcset, especially when implementing lazy loading with JavaScript libraries such as LazySizes. In this approach, image sources are stored in data-* attributes and loaded only when the image enters the viewport.

This method helps delay image loading, improving initial page load performance.

Example: Using data-srcset for Lazy Loading

<img
   class="image-embed-item lazy"
   data-src="{f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1168)}"
   data-srcset="{f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 768)} 768w,
                {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 990)} 990w,
                {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1200)} 1200w,
                {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1440)} 1440w,
                {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1900)} 1900w"
   data-sizes="(min-width: 1200px) 1168px, 100vw"
   alt="{file.alternative}"
   title="{file.title}"
   width="{dimensions.width}"
   height="{dimensions.height}"
/>

Tips

• data-srcset is commonly used with lazy loading libraries.
• Images load only when needed, improving page speed.
• TYPO3’s <f:uri.image> ViewHelper generates processed image versions automatically.

4. Using <picture> Tag

The HTML <picture> element is another effective way to implement responsive images in TYPO3. It allows developers to define multiple image sources for different screen sizes or conditions, while the browser automatically selects the most appropriate one.

This approach provides greater control over breakpoints, image formats, and responsive behavior.

Example: Using <picture> for Responsive Images

<picture>
   <source
       media="(min-width: 990px)"
       srcset="{f:uri.image(image: file, maxWidth: 1200)}"
   />

   <source srcset="{f:uri.image(image: file, maxWidth: 768)}" />
   <img src="{f:uri.image(image: file, maxWidth: 768)}" alt="{file.alternative}" />
</picture>

Tips

• Useful for defining different image sources for various breakpoints.
• Works well when serving different formats or image sizes.

The <img> element acts as a fallback for browsers that do not support <picture>.

5. Using TypoScript SourceCollection

In some TYPO3 implementations, responsive images can also be generated directly through TypoScript configuration. This approach allows integrators to define multiple image sources and responsive breakpoints using sourceCollection.

Although newer approaches like DataProcessors are often preferred today, TypoScript-based rendering is still useful in certain scenarios.

Example: Using TypoScript sourceCollection

10 = IMAGE
10 {
 file = fileadmin/sample.jpg
 file.width = 3141

 layoutKey = default
 layout {

   srcset {
     element = <img src="###SRC###" srcset="###SOURCECOLLECTION###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
     source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
   }
 }

 sourceCollection {
   small {
     width = 800
     srcsetCandidate = 800w
     mediaQuery = (min-device-width: 800px)
     dataKey = small
   }
 }
}

20 < 10
20.layoutKey = srcset

Tips

• Enables responsive image generation directly through TypoScript.
• Useful for projects requiring custom rendering logic without modifying templates.
• Can define multiple breakpoints and image sizes within TYPO3 configuration.

6. Using TypoScript in renderObj

Another way to implement responsive images in TYPO3 is by using TypoScript with renderObj. This approach allows developers to create a reusable TypoScript object for image rendering and then call it dynamically inside Fluid templates.

By defining a custom TypoScript object, you can control image sources, breakpoints, and rendering behavior in a centralized configuration.

Example: Prepare a TypoScript Object for Responsive Images

lib.objResponsiveImage {
   default = IMAGE
   default {
       file {
           import.current = 1
           treatIdAsReference = 1
       }

       altText.field = alternative
       titleText.field = title
       params = class="image-embed-item"
       layoutKey = srcset
       layout {

           srcset {
               element = <img src="###SRC###" srcset="###SOURCECOLLECTION###" sizes="100vw" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
               source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
           }

           sourceCollection {
               mobile {
                   maxW = 314
                   srcsetCandidate = 314w
                   dataKey = mobile
               }
           }
       }
   }
}

Assign the Object Using renderObj

renderObj < lib.objResponsiveImage.default
renderObj {

   sourceCollection {
       tablet {
           width = 768
           srcsetCandidate = 768w
           mediaQuery = (max-device-width: 768px)
           dataKey = tablet
       }
   }
}

Render in TYPO3 Fluid

<f:cObject
   typoscriptObjectPath="lib.objResponsiveImage.default"
   data="{file.uid}"
/>

Tips

• Helps create reusable image rendering logic in TypoScript.
• Allows developers to define custom breakpoints and responsive configurations.
• Can be easily integrated into Fluid templates using <f:cObject>.

7. Define cropVariants in TCEFORM

TYPO3 allows developers to define custom crop variants for images, giving editors more flexibility when preparing images for different layouts such as mobile, tablet, or cards. Using TCEFORM configuration, you can create multiple crop presets that editors can select directly in the TYPO3 backend.

This helps maintain consistent image ratios across responsive layouts.

Example: Define Crop Variants in TCEFORM

TCEFORM {
   sys_file_reference.crop.config.cropVariants {
       default {
           title = Alle (Standard)
           selectedRatio = NaN
           allowedAspectRatios {
               NaN {
                   title = Frei
                   value = 0.0
               }

               4:3 {
                   title = 4:3
                   value = 1.333333
               }
           }
       }

       card {
           title = Card
           selectedRatio = 16:9
           allowedAspectRatios {
               16:9 {
                   title = 16:9
                   value = 1.777777778
               }
           }
       }
   }
}

Render the Crop Variant in TYPO3 Fluid

<img
   class="lazy"
   data-src="{f:uri.image(src: file, treatIdAsReference: 1, maxWidth: 768, cropVariant: 'card')}"
   data-srcset="{f:uri.image(src: file, treatIdAsReference: 1, maxWidth: 768, cropVariant: 'card')} 768w,
                {f:uri.image(src: file, treatIdAsReference: 1, maxWidth: 1900, cropVariant: 'card')} 1200"
   data-sizes="..."
   alt="..."
/>

Tips

• Helps editors choose predefined crop ratios directly in the TYPO3 backend.
• Ensures consistent image layouts across responsive breakpoints.
• Works well with srcset, lazy loading, and responsive rendering methods.

8. Using EXT.vhs

The EXT:vhs extension is a popular TYPO3 Fluid extension that provides additional ViewHelpers for advanced template development. It extends TYPO3’s Fluid capabilities and offers convenient helpers for handling media, including responsive images.

Using the <v:media.image> ViewHelper, developers can easily define multiple image sizes through the srcset attribute.

Example: Using EXT:vhs for Responsive Images

<v:media.image
   src="path/to/media.jpg"
   width="123"
   height="123"
   treatIdAsReference="1"
   srcset="314, 768, 990, 1200"
   srcsetDefault="768"
/>

Tips

• Provides additional Fluid ViewHelpers beyond TYPO3 core.
• Simplifies responsive image configuration with srcset.

Widely used by TYPO3 developers for advanced Fluid templating.

9. Using EXT.sms_responsive_images

The EXT:sms_responsive_images extension is a widely used TYPO3 extension that simplifies the creation of responsive images. It provides custom ViewHelpers that generate responsive image markup based on TYPO3’s image cropping and processing capabilities.

This extension allows developers to define image sizes, breakpoints, and lazy loading behavior directly within Fluid templates.

Example: Using EXT:sms_responsive_images

<sms:image image="{image}" srcset="400, 600, 800, 1000" />

<sms:image image="{image}" srcset="1x, 2x" />

<sms:image
   image="{image}"
   sizes="(min-width: 1200px) 600px, (min-width: 900px) 800px, 100vw"
/>

<sms:image
   image="{image}"
   breakpoints="{
       0: {'cropVariant': 'desktop', 'media': '(min-width: 1000px)', 'srcset': '1000, 1200, 1400, 1600'},
       1: {'cropVariant': 'mobile', 'srcset': '400, 600, 800, 1000, 1200, 1400, 1600'}
   }"
/>

<sms:image image="{image}" srcset="400, 600" lazyload="true" />

Tips

• Allows flexible configuration of responsive breakpoints and image sizes.
• Integrates with TYPO3’s image cropping system.
• Supports features like lazy loading and density-based image rendering.

10. Using EXT.fluid_styled_responsive_images

The EXT:fluid_styled_responsive_images extension extends TYPO3’s fluid_styled_content to support responsive image rendering. It allows developers to configure responsive image sources through TypoScript sourceCollection, making it easier to define different image sizes for various screen widths.

This approach integrates directly with TYPO3’s default content elements while adding responsive image support.

Example: Configure Responsive Images with TypoScript

tt_content.textmedia {
   settings {
       responsive_image_rendering {
           layoutKey = srcset

           sourceCollection {
               10 {
                   dataKey = desktop
                   width = 1260m
                   srcset = 1260w
               }

               20 {
                   dataKey = tablet
                   width = 960m
                   srcset = 960w
               }
           }
       }
   }
}

Tips

• Extends fluid_styled_content with responsive image capabilities.
• Uses TypoScript sourceCollection to define breakpoints.
• Useful for projects relying on default TYPO3 content elements.

11. EXT.responsive-images

EXT:responsive-images is another TYPO3 extension that adds responsive image support for Fluid templates. It works together with TYPO3’s MediaViewHelper and allows integrators to define image variants, breakpoints, and image quality settings.

The extension also respects TYPO3 crop variants and can generate different image qualities for various screen sizes.

Example: Using EXT.responsive-images

<r:loadRegister key="IMAGE_VARIANT_KEY" value="default">
   <f:media file="{file}" />
</r:loadRegister>

Responsive Rendering Example

<picture>
   <source media="(max-width: 40em)" srcset="320x180-q65.jpg 1x, 640x360-q40.jpg 2x" />
   <source media="(min-width: 64.0625em)" srcset="1920x1080-q80.jpg 1x" />
   <source media="(min-width: 40.0625em)" srcset="1024x576-q80.jpg 1x, 2048x1152-q40.jpg 2x" />
   <img src="1920x1080.jpg" alt="Example alternative" width="1920" height="1080" />
</picture>

Tips

• Adds responsive image capabilities for Fluid templates.
• Supports crop variants and different JPEG quality settings.
• Allows integrators to define custom image variants for responsive layouts.

12. Using Custom TYPO3 API ImageProcessorCore (PHP)

For advanced TYPO3 projects, developers can implement responsive images using a custom DataProcessor based on TYPO3’s ImageProcessorCore API. This approach allows full control over how images are processed, resized, and rendered across different screen sizes.

By extending the core ImageProcessor, developers can dynamically calculate image dimensions, define responsive breakpoints, and output optimized formats such as WebP and JPEG.

Example: Custom ImageProcessor (PHP)

<?php
declare(strict_types=1);

namespace YourVendor\YourTemplate\DataProcessing;

use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;
use TYPO3\CMS\Frontend\DataProcessing\ImageProcessor as ImageProcessorCore;

class ImageProcessor extends ImageProcessorCore
{
   protected $maxWidths = [
       'full' => 1600,
       'beside' => 800
   ];

   public function process(
       ContentObjectRenderer $cObj,
       array $contentObjectConfiguration,
       array $processorConfiguration,
       array $processedData
   ) {
       $processedData = parent::process($cObj, $contentObjectConfiguration, $processorConfiguration, $processedData);
       return $processedData;
   }
}

Responsive Rendering Example (Fluid Template)

<picture>

<f:if condition="{dimensions.maxWidth} > 1201">
<source srcset="{f:uri.image(image:file, maxWidth: 1601, fileExtension: 'webp')}" type="image/webp">
<source srcset="{f:uri.image(image:file, maxWidth: 1600, fileExtension: 'jpg')}" type="image/jpeg">
</f:if>

<f:if condition="{dimensions.maxWidth} > 769">
<source srcset="{f:uri.image(image:file, maxWidth: 1201, fileExtension: 'webp')}" type="image/webp">
<source srcset="{f:uri.image(image:file, maxWidth: 1200, fileExtension: 'jpg')}" type="image/jpeg">
</f:if>

<img
class="image-embed-item"
title="{file.title}"
alt="{file.description -> f:format.nl2br()}"
src="{f:uri.image(image:file, maxWidth: 1600)}"
width="{dimensions.width}"
height="{dimensions.height}"
loading="{settings.media.lazyLoading}" />

</picture>

Assign the Custom DataProcessor

tt_content.textmedia.dataProcessing {
 20 = YourVendor\YourTemplate\DataProcessing\ImageProcessor
}

Tips

• Provides full control over TYPO3 image processing logic.
• Enables advanced responsive setups with custom breakpoints and formats.
• Ideal for complex TYPO3 projects requiring tailored image rendering

WebP is a modern image format that delivers smaller file sizes with good visual quality, helping improve TYPO3 website performance.

WebP Support in TYPO3 Core

Since TYPO3 v10.3, WebP images can be generated using Fluid ViewHelpers like <f:image>, <f:media>, and <f:uri.image> .

<picture>
   <source srcset="{f:uri.image(image: file, treatIdAsReference: true, fileExtension: 'webp')}" type="image/webp"/>
   <source srcset="{f:uri.image(image: file, treatIdAsReference: true, fileExtension: 'jpg')}" type="image/jpeg"/>
   <f:image alt="{file.alternative}" image="{file}" treatIdAsReference="true"/>
</picture>

Browsers that support WebP load the optimized image, while others fall back to JPEG.

Configuring ImageMagick for WebP Conversion

TYPO3 relies on ImageMagick or GraphicsMagick for image processing.

• Ensure your ImageMagick installation supports WebP conversion
• TYPO3 will generate processed WebP images automatically
• Helps improve compression and page performance

Allowing WebP File Extensions in TYPO3

Enable WebP uploads by allowing the extension in TYPO3 configuration.

$GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] = 'gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg,webp';

Even with TYPO3’s built-in tools, incorrect configurations can reduce performance.

Missing sizes Attribute

• Browsers may load larger images than necessary
• Always define viewport-based sizes like
  (min-width: 1200px) 50vw, 100vw

Incorrect Breakpoints

• Use breakpoints based on actual layout widths
• Test across desktop, tablet, and mobile

Oversized Images

• Avoid serving large desktop images on mobile
• Use TYPO3 image processing to generate multiple sizes

Ignoring Lazy Loading

• Delays image loading until visible
• Improves initial page speed
• Supported natively in TYPO3 Fluid ViewHelpers

Implementing responsive images is essential for delivering fast, modern, and device-friendly TYPO3 websites. With TYPO3’s flexible ecosystem, developers and integrators have multiple options, from core Fluid ViewHelpers and TypoScript configurations to extensions and custom PHP implementations.

Choosing the right method depends on your project requirements, performance goals, and level of customization needed. By combining responsive image techniques with modern formats and optimization practices, TYPO3 websites can deliver better performance, improved user experience, and stronger SEO results.

Explore the approaches shared in this guide and apply the method that best fits your TYPO3 project.