⚡ perf: improve login screen performance with .webp image

LerianStudio · Dec 4, 2024 · 2b8c971 · 2b8c971
1 parent afe3a3a
commit 2b8c971
Show file tree

Hide file tree

Showing 13 changed files with 4 additions and 30 deletions.
diff --git a/public/images/floater-icon.svg b/public/images/floater-icon.svg
diff --git a/public/images/geometric-shape.svg b/public/images/geometric-shape.svg
diff --git a/public/images/github-icon.svg b/public/images/github-icon.svg
diff --git a/public/images/hamburguer-left.svg b/public/images/hamburguer-left.svg
diff --git a/public/images/hamburguer-right.svg b/public/images/hamburguer-right.svg
diff --git a/public/images/loading-wallpaper.jpg b/public/images/loading-wallpaper.jpg
diff --git a/public/images/loading-wallpaper.webp b/public/images/loading-wallpaper.webp
diff --git a/public/images/login-wallpaper.jpg b/public/images/login-wallpaper.jpg
diff --git a/public/images/login-wallpaper.webp b/public/images/login-wallpaper.webp
diff --git a/public/images/midaz-login-screen.png b/public/images/midaz-login-screen.png
diff --git a/public/images/midaz-login-screen.webp b/public/images/midaz-login-screen.webp
diff --git a/src/app/(auth-routes)/signin/page.tsx b/src/app/(auth-routes)/signin/page.tsx
@@ -15,8 +15,8 @@ import { LoadingButton } from '@/components/ui/loading-button'
 import { ArrowRight } from 'lucide-react'
 import React from 'react'
 import LoadingScreen from '@/components/loading-screen'
-import MidazLogo from '@/images/midaz-login-screen.png'
-import BackgroundImage from '@/images/login-wallpaper.jpg'
+import MidazLogo from '@/images/midaz-login-screen.webp'
+import BackgroundImage from '@/images/login-wallpaper.webp'
 import {
   Tooltip,
   TooltipContent,
@@ -179,6 +179,7 @@ const SignInPage = () => {
           src={BackgroundImage}
           fill
           sizes="50vw, 100vh"
+          className="object-cover"
         />
         <div className="absolute inset-0 bg-black bg-opacity-50"></div>
         <div className="relative z-10">

diff --git a/src/components/loading-screen.tsx b/src/components/loading-screen.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react'
 import Image from 'next/image'
-import LoadingImage from '@/images/loading-wallpaper.jpg'
+import LoadingImage from '@/images/loading-wallpaper.webp'
 import midazLoading from '@/animations/midaz-loading.json'
 import { Lottie } from '@/lib/lottie'