TYPO3 8 "responsive" Images

sys_file_reference.php

<?php
defined('TYPO3_MODE') or die();

// typo3conf/ext/extname/Configuration/TCA/Overrides/sys_file_reference.php
// different "viewports" for picture element (art direction)

$GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config'] = array(
    'type' => 'imageManipulation',
    // 'allowedExtensions' => 'jpg',
    // 'ratios' => array(
    //     '1.7777777777777777' => '16:9',
    //     '1.3333333333333333' => '4:3',
    //     '0.71428571428571' => '5:7',
    //     '1' => '1:1',
    //     'NaN' => 'Free',
    // ),
    'cropVariants' => array(
      'mobile' => array(
        'title' => 'LLL:EXT:extname/Resources/Private/Language/locallang.xlf:imageManipulation.mobile',
        'allowedAspectRatios' => array(
          'NaN' => array(
            'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free',
            'value' => 0.0
          )
        )
      ),
      'desktop' => array(
        'title' => 'LLL:EXT:extname/Resources/Private/Language/locallang.xlf:imageManipulation.desktop',
        'allowedAspectRatios' => array(
          'NaN' => array(
            'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free',
            'value' => 0.0
          )
        )
      )
    )
);

template.html

<f:comment>Using srcset</f:comment>
<f:if condition="{data.image}">
  <img src="{f:uri.image(image: data.image.0, treatIdAsReference:'1')}"
    alt="{data.image.0.alternative}" class="keyvisual"
    srcset="{f:uri.image(image: data.image.0, treatIdAsReference:'1', width: '300')} 300w,
    {f:uri.image(image: data.image.0, treatIdAsReference:'1', width: '570')} 570w,
    {f:uri.image(image: data.image.0, treatIdAsReference:'1', width: '650')} 650w"
    sizes="(max-width: 375px) 300px, (max-width: 720px) 570px, (max-width: 850px) 300px, (max-width: 1630px) 570px, 650px">
</f:if>