Responsive Images and TYPO3: http://somethingphp.com/responsive-images-typo3/

PageTS.ts2

TCEFORM.tt_content {
	# Disable fields that specify/change image dimensions
	imagewidth.disabled = 1
	imageheight.disabled = 1
	section_frame.disabled = 1

	# Limit column selection
	imagecols.keepItems = 1, 2, 3, 4
	imagecols.types.textpic.keepItems = 1, 2
}

ResponsiveImages.ts2

# 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)
	normal {
		width = 600
		maxW < .width
		srcsetCandidate = 600w
	}
	# For small high-dpi devices (e. g. iPhone 6)
	medium {
		width = 780
		maxW < .width
		srcsetCandidate = 780w
		# Works since TYPO3 7.5
		quality = 60
	}
	# For medium high-dpi devices (e. g. iPad Retina)
	large {
		width = 920
		maxW < .width
		srcsetCandidate = 920w
		# Works since TYPO3 7.5
		quality = 60
	}
	# For small high-dpi devices (e. g. iPhone 6+)
	extralarge {
		width = 1100
		maxW < .width
		srcsetCandidate = 1100w
		# Works since TYPO3 7.5
		quality = 60
	}
	# For big high-dpi devices (e. g. Mac Retina)
	huge {
		width = 1200
		maxW < .width
		srcsetCandidate = 1200w
		# Works since TYPO3 7.5
		quality = 60
	}
}

# Define different responsive layout for each column layout
# (adjust "sizes" attribute to match image widths)
tt_content.image.20.1.layout {
	# Default layout for 1-column images
	srcset {
		element.wrap = <img src="###SRC###" srcset="###SRC### ###WIDTH###w,###SOURCECOLLECTION###" sizes="|"###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###>
		element = (min-width: 1020px) 600px, (min-width: 740px) 460px, calc(100vw - 20px)
	}

	# Layout for 2-column images
	srcset2col < .srcset
	srcset2col.element = (min-width: 1020px) 288px, (min-width: 740px) 221px, (min-width: 480px) 50vw, calc(100vw - 20px)

	# Layout for 3-column images
	srcset3col < .srcset
	srcset3col.element = (min-width: 1020px) 186px, (min-width: 740px) 143px, (min-width: 480px) 33vw, calc(100vw - 20px)

	# Layout for 4-column images
	srcset4col < .srcset
	srcset4col.element = (min-width: 1020px) 132px, (min-width: 740px) 221px, (min-width: 480px) 50vw, calc(100vw - 20px)
}

# 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
			3 = TEXT
			3.value = srcset3col
			4 = TEXT
			4.value = srcset4col
		}

		# 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
			2 = TEXT
			2.value = srcset4col
		}
	}
}

Hallo Simon
THX for the scrip. Works fine in Typo3 6.2 together with Bootstrap and Google Chrome browser.
Unfortunately for Firefox, IE anf Safari I ´ve to rectify a little bit. The 2,3,4 images in column are collaping.
I am not sure, but it could be belong to the standrad css_style_content or bootstrap.
http://www.capoeira-muenchen.de/login-bereich/webmaster-inhalte/