TYPO3 Core

https://www.w3.org/TR/2013/WD-html-picture-element-20130226/

Example typoscript configuration:

tt_content {
    textmedia =< lib.fluidContent
    textmedia {
        templateName = Textmedia
        dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
            10 {
                references.fieldName = assets
            }
            20 = TYPO3\CMS\Frontend\DataProcessing\PictureSourceProcessor
            20 {
                // Taking into account:
                // - Mediaquery
                // - Container width
                // - Columns
                // ContainerWidth(InText) can be overruled in the content element
                // Keys to use as identifier for mediaQuery
                columns.field = imagecols
                sources {
                        default {
                            containerMaxWidth = {$styles.content.maxW}
                            containerMaxWidth {
                                override.field = container_width
                            }
                            containerMaxWidthInText = {$styles.content.maxWinText}
                            containerMaxWidthInText {
                                override.field = container_width
                            }
                            pixelDensity = 1,2
                        }
                        768 {
                            containerMaxWidth = 300
                            containerMaxWidthInText = 150
                            maxColumns = 4
                            overrideColumnsMap {
                                2 = 1
                            }
                            mediaQuery = (max-device-width: 768px)
                            pixelDensity = 1,2
                        }
                }
                as = pictureSources
            }
        }
    }
}

Output of pictureSourceProcessor

pictureSources {
    768 {
        width = 300
        mediaQuery = (max-device-width: 768px)
        pixelDensity {
         0 = 1
         1 = 2
        }
    }
    default {
        width = 600
        mediaQuery =
        pixelDensity {
          0 = 1
          1 = 2
        }
    }
}

pictureSourceViewHelper

    pictureSourceViewHelper
      - FileInterface $file
      - string $mediaQuery
      - string $width This can be a numeric value representing the fixed width of in pixels. But you can also perform simple calculations by adding "m" or "c" to the value
      - array $pixelDensity
      - string $type Content type, f.i: "image/webp" 

Fluid partial

<picture>
   <f:for each="{pictureSources}" as="source">
     <f:pictureSource mediaQuery="{source.mediaQuery}" width="{source.width}m" pixelDensity="{source.pixelDensity}" image="{file}" />
   </f:for>
  <f:image image="{file}" width="{pictureSources.default.width}m" alt="" />
</picture>

Output

<picture>
   <source media="(max-device-width: 768px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
   <source srcset="small-1.jpg 1x, small-2.jpg 2x">
   <img src="small-1.jpg" alt="">
</picture>