png to webp

src/components/bestoil.tsx

@@ -10,9 +10,9 @@ const MotionStack = motion(Stack);
 
 function Bestoil() {
     const cook = useBreakpointValue({
-        base: "/images/cook_mb.png",
-        sm: "/images/cook_mb.png",
-        md: "/images/cook_pc.png",
+        base: "/images/cook_mb.webp",
+        sm: "/images/cook_mb.webp",
+        md: "/images/cook_pc.webp",
     });
 
     // Create refs for elements we want to animate
@@ -75,7 +75,7 @@ function Bestoil() {
                     animate={isBestOilInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
                     transition={{ duration: 0.8 }}
                 >
-                    <Image src="/images/best5.png"
+                    <Image src="/images/best5.webp"
                         fit='contain'
                         w={{ base: "70%", sm: "80%", md: '350px', lg: '500px' }}
                     />
@@ -88,7 +88,7 @@ function Bestoil() {
                     transition={{ duration: 0.8 }}
                     justifyItems={"center"}
                 >
-                    <Image src="/images/oilchart.png"
+                    <Image src="/images/oilchart.webp"
                         fit='contain'
                         w={{ base: "80%", sm: "90%", md: '350px', lg: '500px' }}
                     />