⚡️(frontend) replace onboarding assets with webm and webp

Webp and webm are more efficient formats
than gif and png, so we replace the
onboarding assets with these formats to improve
performance and decrease file size.

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to
 ### Changed
 
 - ♿️(frontend) use semantic `<dl>` structure in document info card #2379
+- ⚡️(frontend) replace onboarding assets with webm and webp #2569
 - 💄(frontend) use the same highlight color for cells and moves #2575
 - ⚡️(backend) optimize media_auth endpoint
 

src/frontend/apps/impress/src/features/help/hooks/useOnboardingSteps.tsx

@@ -43,16 +43,18 @@ export const useOnboardingSteps = () => {
           'Move, duplicate, and transform your texts, headings, lists, images without breaking your layout.',
         ),
         content: (
-          <Image
+          <video
             src={t('src_img_onboarding_step_1', {
               desc: 'URL of onboarding step 1 preview image',
-              defaultValue: '/assets/on-boarding/step_1_EN.gif',
+              defaultValue: '/assets/on-boarding/step_1_EN.webm',
             })}
-            alt={t('Compose your doc easily')}
+            aria-label={t('Compose your doc easily')}
             width={350}
             height={350}
-            priority
-            unoptimized
+            autoPlay
+            loop
+            muted
+            playsInline
           />
         ),
       },
@@ -72,16 +74,18 @@ export const useOnboardingSteps = () => {
           'Apply styles, structure, and emphasis in one click—keep documents clean, consistent, and easy to scan.',
         ),
         content: (
-          <Image
+          <video
             src={t('src_img_onboarding_step_2', {
               desc: 'URL of onboarding step 2 preview image',
-              defaultValue: '/assets/on-boarding/step_2_EN.gif',
+              defaultValue: '/assets/on-boarding/step_2_EN.webm',
             })}
-            alt={t('Format your content with the toolbar')}
+            aria-label={t('Format your content with the toolbar')}
             width={350}
             height={350}
-            priority
-            unoptimized
+            autoPlay
+            loop
+            muted
+            playsInline
           />
         ),
       },
@@ -104,7 +108,7 @@ export const useOnboardingSteps = () => {
           <Image
             src={t('src_img_onboarding_step_3', {
               desc: 'URL of onboarding step 3 preview image',
-              defaultValue: '/assets/on-boarding/step_3_EN.png',
+              defaultValue: '/assets/on-boarding/step_3_EN.webp',
             })}
             alt={t('Share and collaborate with ease')}
             width={350}
@@ -146,7 +150,7 @@ export const useOnboardingSteps = () => {
           <Image
             src={t('src_img_onboarding_step_4', {
               desc: 'URL of onboarding step 4 preview image',
-              defaultValue: '/assets/on-boarding/step_4_EN.png',
+              defaultValue: '/assets/on-boarding/step_4_EN.webp',
             })}
             alt={t('Draw inspiration from the content library')}
             width={350}

src/frontend/apps/impress/src/i18n/translations.json

@@ -1685,10 +1685,10 @@
       "new window": "nouvelle fenêtre",
       "pdf": "pdf",
       "slide": "diapositive",
-      "src_img_onboarding_step_1": "/assets/on-boarding/step_1_FR.gif",
-      "src_img_onboarding_step_2": "/assets/on-boarding/step_2_FR.gif",
-      "src_img_onboarding_step_3": "/assets/on-boarding/step_3_FR.png",
-      "src_img_onboarding_step_4": "/assets/on-boarding/step_4_FR.png",
+      "src_img_onboarding_step_1": "/assets/on-boarding/step_1_FR.webm",
+      "src_img_onboarding_step_2": "/assets/on-boarding/step_2_FR.webm",
+      "src_img_onboarding_step_3": "/assets/on-boarding/step_3_FR.webp",
+      "src_img_onboarding_step_4": "/assets/on-boarding/step_4_FR.webp",
       "{{action}}, current role: {{role}}": "{{action}}, rôle actuel : {{role}}",
       "{{count}} document found_many": "{{count}} documents trouvés",
       "{{count}} document found_one": "{{count}} document trouvé",