Via: http://brightfocus.de/tech-blog/article/2016/09/22/typo3-7-responsive-images-part-2/

responsiveimages.ts

tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}
# Clear default source collection
tt_content.image.20.1.sourceCollection >
# Define image sizes that should be provided for each content image
tt_content.image.20.1.sourceCollection {
    # For high-column layouts on big screens
    tiny {
        width = 160
        maxW < .width
        srcsetCandidate = 160w
    }
    # For small low-dpi devices or column layouts
    extrasmall {
        width = 320
        maxW < .width
        srcsetCandidate = 320w
    }
    # For medium low-dpi devices (e. g. iPad)
    small {
        width = 460
        maxW < .width
        srcsetCandidate = 460w
    }
    # For big low-dpi devices (e. g. desktop computers)
    default {
        width = 600
        maxW < .width
        srcsetCandidate = 600w
    }
    # For small high-dpi devices (e. g. iPhone 6)
    medium {
        width = 780
        maxW < .width
        srcsetCandidate = 780w
    }
    # For medium high-dpi devices (e. g. iPad Retina)
    large {
        width = 920
        maxW < .width
        srcsetCandidate = 920w
    }
    # For small high-dpi devices (e. g. iPhone 6+)
    extralarge {
        width = 1100
        maxW < .width
        srcsetCandidate = 1100w
    }
    # For big high-dpi devices (e. g. Mac Retina)
    huge {
        width = 1920
        maxW < .width
        srcsetCandidate = 1920w
    }
    # For 4k resolution
    4k {
        width = 3840
        maxW < .width
        srcsetCandidate = 3840w
    }
}
# Define different responsive layout for each column layout
# (adjust "sizes" attribute to match image widths)
tt_content.image.20.1.layout {
    defaultSmall = tt_content.image.20.1.sourceCollection.medium
    # Default layout for 1 col
    srcset {
        element.wrap = <img class="img-responsive" srcset="###SOURCECOLLECTION###" sizes="|"###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###>
        element = (min-width: 1200px) 1170px, (min-width: 992px) 970px,(min-width: 768px) 750px, calc(100vw - 30px)
    }

    # Layout for 2-column images
    srcset2col < .srcset
    srcset2col.element = (min-width: 1200px) calc(1170px / 2), (min-width: 992px) calc(970px / 2), (min-width: 768px) calc(750px / 2), calc(100vw - 30px)

    # Layout for Images with full Size (e.g. Lightbox / Fotoalbum)
    srcsetFull < .srcset
    srcsetFull.element = 100vw

    # Layout for Slider Images (Images are in 3:2 Format -> therefore our image width has to be 3/2 of the slider height (80 % of viewport height))
    srcsetSlider < .srcset
    srcsetSlider.element = calc(3 * 80vh / 2)

    # Layout for CategoryImages (3 column)
    srcsetCat < .srcset
    srcsetCat.element = (min-width: 1200px) calc(1170px / 3), (min-width: 992px) calc(970px / 3),(min-width: 768px) calc(750px / 3), (min-width: 551px) calc((100vw - 30px)/ 2), calc(100vw - 30px)
}
# Clear default layout key
tt_content.image.20.1.layoutKey >
# Decide which responsive layout should be used in each case
tt_content.image.20.1.layoutKey {
    cObject = CASE
    cObject {
        # First use content type to differentiate
        key.field = CType

        # Use specific srcset layout for each column layout
        default = CASE
        default {
            key.field = imagecols

            default = TEXT
            default.value = srcset
            2 = TEXT
            2.value = srcset2col
        }

        # For textpic content, images are already at 50% width, so
        # different layouts will be used
        textpic = CASE
        textpic {
            key.field = imagecols

            default = TEXT
            default.value = srcset2col
        }
        }
}
lib.responsiveImage = IMAGE
lib.responsiveImage {
  default = IMAGE
  default{
    file {
        import.current = 1
        treatIdAsReference = 1
    }
    sourceCollection < tt_content.image.20.1.sourceCollection
    layout < tt_content.image.20.1.layout
    layoutKey = srcset
  }
  2Col < .default
  2Col{
    layoutKey = srcset2col
  }
  cat < .default
  cat{
    layoutKey = srcsetCat
  }
  slider <.default
  slider{
    layoutKey = srcsetSlider
  }
  full <.default
  full{
    layoutKey = srcsetFull
  }
}
tt_content.textmedia.settings.responsive_image_rendering.layoutKey = srcset // This is the default
tt_content.textmedia.settings.responsive_image_rendering.sourceCollection < tt_content.image.20.1.sourceCollection
styles.content.imgtext = tt_content.image.20.1