perf: use webp images in website

consolelabs · Dec 28, 2023 · aefb4f4 · aefb4f4
1 parent 33714b8
commit aefb4f4
Show file tree

Hide file tree

Showing 11 changed files with 6 additions and 11 deletions.
diff --git a/components/Hero/Hero.tsx b/components/Hero/Hero.tsx
@@ -29,8 +29,7 @@ export const Hero = ({
       <div
         style={{
           backgroundImage:
-            heroImgUrl ??
-            'image-set(url("/img/hero-banner.png") 2x, url("/img/hero-banner.webp") 1x)',
+            heroImgUrl ?? 'image-set(url("/img/hero-banner.webp") 1x)',
         }}
         className="h-full w-full bg-cover bg-center absolute top-0 -right-24"
       />

diff --git a/components/ImageWithFallback/ImageWithFallback.tsx b/components/ImageWithFallback/ImageWithFallback.tsx
@@ -15,7 +15,7 @@ export const ImageWithFallback = (props: ImageWithFallbackProps) => {
     <>
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
-        srcSet={`${fallbackImgUrl} 767px, ${src} 768px"`}
+        srcSet={`${fallbackImgUrl ?? src} 767px, ${src} 768px"`}
         sizes="(max-width: 767px) 767px, 768px"
         src={src}
         alt={alt}

diff --git a/components/Logo/Logo.tsx b/components/Logo/Logo.tsx
@@ -8,7 +8,7 @@ export const Logo = (props: Partial<ImageWithFallbackProps>) => {
 
   return (
     <ImageWithFallback
-      src={src ?? '/img/logo-with-text.png'}
+      src={src ?? '/img/logo-with-text.webp'}
       fallbackImgUrl={fallbackImgUrl ?? '/img/logo-with-text.webp'}
       width={130}
       height={40}

diff --git a/components/pages/home/DesignGuideView/DesignGuide.tsx b/components/pages/home/DesignGuideView/DesignGuide.tsx
@@ -18,8 +18,7 @@ export const DesignGuide = ({ className }: { className?: string }) => {
 
         <div className="flex flex-col sm:flex-row gap-4 md:gap-8 md:pb-8">
           <DesignGuideCardItem
-            imgUrl="/img/select.png"
-            fallbackImgUrl="/img/select.webp"
+            imgUrl="/img/select.webp"
             alt="Documentation"
             title={
               <div className="flex gap-2 items-center">
@@ -42,8 +41,7 @@ export const DesignGuide = ({ className }: { className?: string }) => {
           />
 
           <DesignGuideCardItem
-            imgUrl="/img/paperplane.png"
-            fallbackImgUrl="/img/paperplane.webp"
+            imgUrl="/img/paperplane.webp"
             alt="Support"
             title={
               <div className="flex gap-2 items-center">

diff --git a/components/pages/home/RichComponentsView/Modal.tsx b/components/pages/home/RichComponentsView/Modal.tsx
@@ -35,8 +35,7 @@ export const ModalShowcase = () => {
       <ModalContent className="space-y-2 text-center !p-4">
         <div className="mb-8">
           <ImageWithFallback
-            src="/img/macbook.png"
-            fallbackImgUrl="/img/macbook.webp"
+            src="/img/macbook.webp"
             alt="Macbook"
             width={350}
             height={200}

diff --git a/components/pages/home/RoadmapView/Roadmap.tsx b/components/pages/home/RoadmapView/Roadmap.tsx
@@ -59,7 +59,6 @@ export const Roadmap = ({ className }: { className?: string }) => {
                   {item?.isMajorChange ? (
                     <ImageWithFallback
                       src="/img/logo.png"
-                      fallbackImgUrl="/img/logo.png"
                       className="absolute bottom-[unset] sm:-bottom-[18px] -left-[19px] sm:-left-[19px] box-content border-2 bg-[#E88B88] border-[#E88B88] rounded-full"
                       height={32}
                       width={32}

diff --git a/public/img/hero-banner.png b/public/img/hero-banner.png
diff --git a/public/img/logo-with-text.png b/public/img/logo-with-text.png
diff --git a/public/img/macbook.png b/public/img/macbook.png
diff --git a/public/img/paperplane.png b/public/img/paperplane.png
diff --git a/public/img/select.png b/public/img/select.png