diff --git a/packages/shared/assets/illustrations/onboarding/balloon.png b/packages/shared/assets/illustrations/onboarding/balloon.png
deleted file mode 100644
index bcb6479bbd..0000000000
Binary files a/packages/shared/assets/illustrations/onboarding/balloon.png and /dev/null differ
diff --git a/packages/shared/assets/illustrations/onboarding/balloon.webp b/packages/shared/assets/illustrations/onboarding/balloon.webp
new file mode 100644
index 0000000000..673b24e706
Binary files /dev/null and b/packages/shared/assets/illustrations/onboarding/balloon.webp differ
diff --git a/packages/shared/assets/illustrations/onboarding/landscape.png b/packages/shared/assets/illustrations/onboarding/landscape.png
deleted file mode 100644
index 8cf5d5ff51..0000000000
Binary files a/packages/shared/assets/illustrations/onboarding/landscape.png and /dev/null differ
diff --git a/packages/shared/assets/illustrations/onboarding/landscape.webp b/packages/shared/assets/illustrations/onboarding/landscape.webp
new file mode 100644
index 0000000000..9538002970
Binary files /dev/null and b/packages/shared/assets/illustrations/onboarding/landscape.webp differ
diff --git a/packages/shared/assets/illustrations/onboarding/portal.png b/packages/shared/assets/illustrations/onboarding/portal.png
deleted file mode 100644
index b7ecfdcad6..0000000000
Binary files a/packages/shared/assets/illustrations/onboarding/portal.png and /dev/null differ
diff --git a/packages/shared/assets/illustrations/onboarding/portal.webp b/packages/shared/assets/illustrations/onboarding/portal.webp
new file mode 100644
index 0000000000..50c7e72f9b
Binary files /dev/null and b/packages/shared/assets/illustrations/onboarding/portal.webp differ
diff --git a/packages/shared/src/components/Illustration.svelte b/packages/shared/src/components/Illustration.svelte
index 9677ea89f5..14b800aea1 100644
--- a/packages/shared/src/components/Illustration.svelte
+++ b/packages/shared/src/components/Illustration.svelte
@@ -60,16 +60,16 @@
 
         // Bloom
         portal: {
-            lightmode: 'onboarding/portal.png',
-            darkmode: 'onboarding/portal.png',
+            lightmode: 'onboarding/portal.webp',
+            darkmode: 'onboarding/portal.webp',
         },
         landscape: {
-            lightmode: 'onboarding/landscape.png',
-            darkmode: 'onboarding/landscape.png',
+            lightmode: 'onboarding/landscape.webp',
+            darkmode: 'onboarding/landscape.webp',
         },
         balloon: {
-            lightmode: 'onboarding/balloon.png',
-            darkmode: 'onboarding/balloon.png',
+            lightmode: 'onboarding/balloon.webp',
+            darkmode: 'onboarding/balloon.webp',
         },
     }
 </script>