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

CHANGELOG.md

@@ -12,15 +12,16 @@ and this project adheres to
 - 🌐(i18n) rename cn_CN to zh_CN, add eo_PL and zh_TW locales #2486
 - ✨(backend) conditional email notification in server to server api #2554
 
+### Changed
+
+- ♿️(frontend) use semantic `<dl>` structure in document info card #2379
+- ⚡️(frontend) replace onboarding assets with webm and webp #2569
+
 ### Fixed
 
 - 🐛(frontend) redirect homepage to login when homepage feat is disabled #2521
 - 🐛(backend) ignore CSPs for API docs in development
 
-### Changed
-
-- ♿️(frontend) use semantic `<dl>` structure in document info card #2379
-
 ## [v5.4.1] - 2026-07-09
 
 ### Changed

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é",