Responsive images in TYPO3

With the srcset attribute of the <img>tag, images can be referenced in different sizes and loaded depending on the screen resolution. This results in images being delivered only in the maximum size in which they are needed. This significantly optimizes the pagespeed of a web page.The images in the resolutions are automatically generated on the server.

 

What to do to use the src attribute in TYPO3?

Most TYPO3 websites use the static system extension fluid_styled_content to display in the frontend, that is why we describe the procedure using this (template) extension (for other approaches, proceed analogously).

1. Copy the fluid_styled_content extension

Copy the files from the subdirectory typo3src/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering/ of your TYPO3 installation to a new directory (e. g. fileadmin/fluid_styled_content/Resources/Private/Partials/Media/Rendering/). So, in any case, do not work directly in the extension folder, as a later update would overwrite all your changes.

2. New path specifications in the constant editor

In order for this template extension to be included, a setting in the constant editor is necessary. Please switch to the constant editor of your template and write the following 3 fields, the path to your "copied" template into the category CONTENT.

3.Change image.html

The file /fileadmin/fluid_styled_content/Resources/Private/Partials/Media/Rendering/index.html is responsible for rendering an image.

The following entry needs to be added to this file::

<img src="{f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1200)}"
srcset="{f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 368)} 368w,
{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"     
                 alt="{file.alternative}"
                 title="{file.title}"                
                 width="{dimensions.width}"
                 height="{dimensions.height}"/>

What happens?

You can now upload the images normally in Fileadmin and include them as content elements. TYPO3 then outputs the srcset attribute in the frontend with reference to the different resolutions.

 

In the source code it looks like this:

 

The original file is located at:

 

/fileadmin/introduction/images/streets/adrian-207619.jpg

The browser loads at a display resolution:

  • of max. 368 pixels the file csm_adrian-207619_bce72f35d3.jpg
  • from 369 to 768 pixels the file csm_adrian-207619_e58f25fdf5.jpg
  • etc.

The files are generated dynamically by TYPO3 in the maximum required size and provided in the cache (recognizable by the path "_processed_"). The editor does not have to worry about anything!

.

With a simple network analysis, you can quickly see the optimization gains:

So in this example, a much smaller image (61.0KB) is loaded for smartphones (up to 368 pixels) than for example for tablets with up to 768 pixels (254KB).  The original file for desktops is even over 306KB.

One more little tip in the end:

 

Optimize images for the web before uploading. You can do this, for example, using free software like irfanview or a web-based service like TinyPNG.