[FEATURE] add responsive images in default templates

Resources/Private/Partials/TeaserOverview.html

@@ -24,7 +24,12 @@
 		<div class="tx-sgnews-single-header {f:if(condition: newsMetaData.imageObject, then: 'tx-sgnews-single-header-image')}">
 			<f:if condition="{newsMetaData.imageObject}">
 				<div class="tx-sgnews-single-image">
-					<f:image image="{newsMetaData.imageObject}" alt="" />
+					<picture>
+						<source media="(max-width: 1200px)"
+								srcset="{f:uri.image(src: newsMetaData.imageObject.uid, treatIdAsReference: '1', width: '1200c', height: '403c', cropVariant: 'small')}">
+						<f:image image="{newsMetaData.imageObject}" alt="" width="1845c"
+								 height="619c" cropVariant="large"/>
+					</picture>
 				</div>
 			</f:if>
 			<div class="tx-sgnews-single-header-content">

Resources/Private/Templates/SingleView/SingleView.html

@@ -39,7 +39,12 @@
 			<div class="tx-sgnews-single-header {f:if(condition: newsMetaData.imageObject, then: 'tx-sgnews-single-header-image')}">
 				<f:if condition="{newsMetaData.imageObject}">
 					<div class="tx-sgnews-single-image">
-						<f:image image="{newsMetaData.imageObject}" alt="" />
+						<picture>
+							<source media="(max-width: 1200px)"
+									srcset="{f:uri.image(src: newsMetaData.imageObject.uid, treatIdAsReference: '1', width: '1200c', height: '403c', cropVariant: 'small')}">
+							<f:image image="{newsMetaData.imageObject}" alt="" width="1845c"
+									 height="619c" cropVariant="large"/>
+						</picture>
 					</div>
 				</f:if>
 				<div class="tx-sgnews-single-header-content">