⚡️(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

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