[TASK] Drastically reduce thumbnail image file sizes

Resources/Private/Templates/Bootstrap5/Youtube/Index.html

@@ -95,7 +95,9 @@
 			titleChars: settings.maxTitleChars,
 			descChars: settings.maxDescriptionChars,
 			feedIterator: 0,
-			contentUid: contentUid
+			contentUid: contentUid,
+			width: '830c',
+			height: '467'
 		}" />
 	</div>
 	<div class="col-12 col-md-3 position-relative d-flex justify-content-center d-md-block">
@@ -109,7 +111,9 @@
 							titleChars: settings.maxTitleChars,
 							descChars: settings.maxDescriptionChars,
 							feedIterator: feedIterator.index,
-							contentUid: contentUid
+							contentUid: contentUid,
+							width: '600c',
+							height: '338'
 						}" />
 					</div>
 				</f:if>
@@ -127,6 +131,8 @@
 	<f:variable name="hasText"><f:if condition="{settings.showTitle} || {settings.showDescription}">1</f:if></f:variable>
 	<f:variable name="hasDescription"><f:if condition="{settings.showDescription} && {feedItem.description}">1</f:if></f:variable>
 	<f:variable name="itemClasses"><f:if condition="{isRowsLayout}"><f:then>hstack flex-wrap gap-4 gap-sm-6 align-items-start</f:then><f:else>card shadow-small border-top h-100</f:else></f:if></f:variable>
+	<f:variable name="thumbnailWidth"><f:if condition="{width}"><f:then>{width}</f:then><f:else>1200c</f:else></f:if></f:variable>
+	<f:variable name="thumbnailHeight"><f:if condition="{height}"><f:then>{height}</f:then><f:else>675</f:else></f:if></f:variable>
 
 	<div class="sg-video__item {itemClasses}">
 		<f:if condition="{feedItem.thumbnail}">
@@ -140,10 +146,10 @@
 				<div class="overflow-hidden">
 					<f:if condition="{feedItem.thumbnailImageObject}">
 						<f:then>
-							<vi:picture class="sg-video__image object-fit-cover h-100 w-100" image="{feedItem.thumbnailImageObject}" alt="{feedItem.title}" />
+							<vi:picture class="sg-video__image object-fit-cover h-100 w-100" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnailImageObject}" alt="{feedItem.title}" />
 						</f:then>
 						<f:else>
-							<vi:picture class="sg-video__image object-fit-cover h-100 w-100" image="{feedItem.thumbnail}" alt="{feedItem.title}" treatIdAsReference="TRUE" />
+							<vi:picture class="sg-video__image object-fit-cover h-100 w-100" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnail}" alt="{feedItem.title}" treatIdAsReference="TRUE" />
 						</f:else>
 					</f:if>
 				</div>