diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 342d12b..0efae22 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -5,8 +5,8 @@ import Highlight, { defaultProps } from 'prism-react-renderer'
 
 import { Button } from '@/components/Button'
 import { HeroBackground } from '@/components/HeroBackground'
-import blurCyanImage from '@/images/blur-cyan.png'
-import blurIndigoImage from '@/images/blur-indigo.png'
+import blurCyanImage from '@/images/blur-cyan.webp'
+import blurIndigoImage from '@/images/blur-indigo.webp'
 
 const codeLanguage = 'json'
 const code = `{
diff --git a/src/images/blur-cyan.png b/src/images/blur-cyan.png
deleted file mode 100644
index e98d7b9..0000000
Binary files a/src/images/blur-cyan.png and /dev/null differ
diff --git a/src/images/blur-cyan.webp b/src/images/blur-cyan.webp
new file mode 100644
index 0000000..d1f1bb7
Binary files /dev/null and b/src/images/blur-cyan.webp differ
diff --git a/src/images/blur-indigo.png b/src/images/blur-indigo.png
deleted file mode 100644
index 3fc10f9..0000000
Binary files a/src/images/blur-indigo.png and /dev/null differ
diff --git a/src/images/blur-indigo.webp b/src/images/blur-indigo.webp
new file mode 100644
index 0000000..6632beb
Binary files /dev/null and b/src/images/blur-indigo.webp differ