Merge branch '621-processed-compressed-image-resource-are-not-used-on-client-device' into 'master'

Resolve "Processed/compressed image resource are not used on client device"

Closes #621

See merge request t3o/t3olayout!575

Resources/Private/Templates/News/News/Detail.html

@@ -297,12 +297,12 @@
 </f:section>
 <f:section name="pictureset">
 	<picture>
-		<source srcset="{f:uri.image(image: file, width: dimensions.width, height: dimensions.height, maxWidth: maxWidth.full, cropVariant: 'default')}" media="(min-width: 1200px)">
-		<source srcset="{f:uri.image(image: file, width: dimensions.width, height: dimensions.height, maxWidth: maxWidth.desktop, cropVariant: 'default')}" media="(min-width: 992px)">
-		<source srcset="{f:uri.image(image: file, width: dimensions.width, height: dimensions.height, maxWidth: maxWidth.tablet, cropVariant: 'tablet')}" media="(min-width: 768px)">
-		<source srcset="{f:uri.image(image: file, width: dimensions.width, height: dimensions.height, maxWidth: maxWidth.phone, cropVariant: 'mobile')}" media="(max-width: 767px)">
+		<source srcset="{f:uri.image(image: file, maxWidth: 1200, cropVariant: 'default')}" media="(min-width: 1200px)">
+		<source srcset="{f:uri.image(image: file, maxWidth: 1200, cropVariant: 'default')}" media="(min-width: 992px)">
+		<source srcset="{f:uri.image(image: file, maxWidth: 992, cropVariant: 'tablet')}" media="(min-width: 768px)">
+		<source srcset="{f:uri.image(image: file, maxWidth: 768, cropVariant: 'mobile')}" media="(max-width: 767px)">
 		<!---Fallback--->
-		<f:image class="img-fluid" image="{file}" width="{dimensions.width}" height="{dimensions.height}" maxWidth="{maxWidth.full}" cropVariant="{default}" alt="{file.alternative}" title="{file.title}" />
+		<f:image class="img-fluid" image="{file}" maxWidth="1200" cropVariant="{default}" alt="{file.alternative}" title="{file.title}" />
 	</picture>
 </f:section>
 </html>