[TASK] Drastically reduce thumbnail image file sizes

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

@@ -98,7 +98,9 @@
 		<f:render section="videoItem" arguments="{
 			feedItem: response.items.0,
 			titleChars: settings.maxTitleChars,
-			descChars: settings.maxDescriptionChars
+			descChars: settings.maxDescriptionChars,
+			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 @@
 						<f:render section="videoItem" arguments="{
 							feedItem: feedItem,
 							titleChars: settings.maxTitleChars,
-							descChars: settings.maxDescriptionChars
+							descChars: settings.maxDescriptionChars,
+							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}">
 		<a class="sg-video-item overflow-hidden text-light sg-video__link position-relative {f:if(condition: '!{hasText} || {isRowsLayout}', then: 'rounded')} {f:if(condition: '{isRowsLayout}', then: 'col-12 col-md-3 shadow', else: 'card-img-top')}" href="{feedItemUrl}" target="_blank" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}" data-additional-url-parameters="{urlParameters}" data-video-type="vimeo">
@@ -139,12 +145,12 @@
 			<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.name}" />
+						<vi:picture class="sg-video__image object-fit-cover h-100 w-100" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnailImageObject}" alt="{feedItem.name}" />
 					</f:then>
 					<f:else>
 						<f:if condition="{feedItem.thumbnail}">
 							<f:then>
-								<vi:picture class="sg-video__image object-fit-cover h-100 w-100" image="{feedItem.thumbnail}" alt="{feedItem.name}" treatIdAsReference="TRUE" />
+								<vi:picture class="sg-video__image object-fit-cover h-100 w-100" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnail}" alt="{feedItem.name}" treatIdAsReference="TRUE" />
 							</f:then>
 							<f:else>
 								<f:if condition="{feedItem.pictures.base_link}">