diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index fa17005fc0ad7..a375efb8a8590 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -41,7 +41,7 @@ function HomepageHeader() {
             Discord
           </Link>
         </div>
-        <img src="/img/immich-screenshots.png" alt="screenshots" width={'70%'} />
+        <img src="/img/immich-screenshots.webp" alt="screenshots" width={'70%'} />
         <div className="flex flex-col sm:flex-row place-items-center place-content-center mt-4 gap-1">
           <div className="h-24">
             <a href="https://play.google.com/store/apps/details?id=app.alextran.immich">
diff --git a/docs/static/img/immich-screenshots.webp b/docs/static/img/immich-screenshots.webp
new file mode 100644
index 0000000000000..62cc036797179
Binary files /dev/null and b/docs/static/img/immich-screenshots.webp differ