perf(ui-samples): serve mobile sample cards through next/image

src/blocks/UISamples/components/UISamplesMobile/UISamplesMobile.scss

@@ -14,5 +14,9 @@ $block: '.#{variables.$ns}ui-samples-mobile';
 
     &__card {
         pointer-events: none;
+        // next/image emits intrinsic width/height attributes, so without this the card lays
+        // out at the source image's natural width (2216px) instead of the container width.
+        width: 100%;
+        height: auto;
     }
 }

src/blocks/UISamples/components/UISamplesMobile/UISamplesMobile.tsx

@@ -1,3 +1,4 @@
+import Image, {type StaticImageData} from 'next/image';
 import React from 'react';
 import {block} from 'src/utils';
 
@@ -8,20 +9,24 @@ import './UISamplesMobile.scss';
 const b = block('ui-samples-mobile');
 
 type UISampleCardProps = {
-    imageSrc: string;
+    image: StaticImageData;
+    alt: string;
 };
 
-const UISampleCard: React.FC<UISampleCardProps> = ({imageSrc}) => {
-    return <img className={b('card')} src={imageSrc} loading="lazy" />;
+const UISampleCard: React.FC<UISampleCardProps> = ({image, alt}) => {
+    // next/image rather than a plain <img>: the source files are up to 2212px wide while the
+    // cards render at roughly viewport width, so the originals wasted around 1 MB on mobile.
+    // This resizes per device and serves WebP/AVIF.
+    return <Image className={b('card')} src={image} alt={alt} sizes="100vw" loading="lazy" />;
 };
 
 export const UISamplesMobile: React.FC = () => {
     const samples = useSampleComponents();
 
     return (
         <div className={b()}>
-            {samples.map(({type, imagePreviewSrc}) => (
-                <UISampleCard key={type} imageSrc={imagePreviewSrc} />
+            {samples.map(({type, imagePreview, title}) => (
+                <UISampleCard key={type} image={imagePreview} alt={title} />
             ))}
         </div>
     );

src/blocks/UISamples/samples.ts

@@ -35,50 +35,50 @@ export const useSampleComponents = () => {
         () => [
             {
                 type: SampleComponent.Dashboard,
-                imagePreviewSrc: dashboardImage.src,
+                imagePreview: dashboardImage,
                 Component: LazyDashboardPreview2,
                 title: t('ui_samples_dashboard_tab'),
                 breadCrumbsItems: ['Dashboard'],
                 blank: true,
             },
             {
                 type: SampleComponent.HotelBooking,
-                imagePreviewSrc: hotelBookingImage.src,
+                imagePreview: hotelBookingImage,
                 Component: LazyApartmentCardPreview,
                 title: t('ui_samples_apartment_tab'),
                 blank: true,
             },
             {
                 type: SampleComponent.Listing,
-                imagePreviewSrc: listingImage.src,
+                imagePreview: listingImage,
                 Component: LazyTablePreview,
                 title: t('ui_samples_table_tab'),
                 breadCrumbsItems: ['Table'],
             },
             {
                 type: SampleComponent.TaskTracker,
-                imagePreviewSrc: taskTrackerImage.src,
+                imagePreview: taskTrackerImage,
                 Component: LazyTasksPreview,
                 title: t('ui_samples_task_tracker_tab'),
                 blank: true,
             },
             {
                 type: SampleComponent.Kubernetes,
-                imagePreviewSrc: kubernetesImage.src,
+                imagePreview: kubernetesImage,
                 Component: LazyKubernetesPreview,
                 title: t('ui_samples_kubernetes_tab'),
                 blank: true,
             },
             {
                 type: SampleComponent.Osn,
-                imagePreviewSrc: osnImage.src,
+                imagePreview: osnImage,
                 Component: LazyOsnPreview,
                 title: t('ui_samples_osn_tab'),
                 blank: true,
             },
             {
                 type: SampleComponent.Mail,
-                imagePreviewSrc: mailImage.src,
+                imagePreview: mailImage,
                 Component: LazyMailPreview,
                 title: t('ui_samples_mail_tab'),
                 blank: true,