Когда-то я уже писал о том что такое адаптивные изображения для сайта и как их реализовывать при помощи TYPO3.
t3dev.ru/o-kompanii/blog/adaptivnye-izobrazhenija-na-saite-pri-pomoshchi-atributa-srcset
В новых версиях системы это немного изменилось и вместе с тем упростилось.
1. Подклчючаем свой рендеринг fluid_styled_content при помощи следующего TypoScript кода
lib.contentElement {
templateRootPaths {
200 = EXT:tmpl/Resources/Private/Content/Templates/
}
partialRootPaths {
200 = EXT:tmpl/Resources/Private/Content/Partials/
}
layoutRootPaths {
200 = EXT:tmpl/Resources/Private/Content/Layouts/
}
}
2. Меняем содержимое стандартного файла Resources/Private/Content/Partials/Media/Rendering/Image.html на следующий
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:media class="image-embed-item lazy"
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'}"
/>
</html>
Готово