changed png image files to webp format

Signed-off-by: jason2000-cpu <jasonmwangi2000@gmail.com>

Author: jason2000-cpu

src/assets/images/adventure-five/layer_five.png

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Button from "../../reusecore/Button";
 import { ReactComponent as CloseIcon } from "./closeIcon.svg";
-import popupImageSmall from "./power-of-meshery-small.png";
+import popupImageSmall from "./power-of-meshery-small.webp";
 import CornerPopupWrapper from "./popup.style";
 
 const CornerPopup = () => {

src/assets/images/adventure-five/layer_five.webp

@@ -15,5 +15,5 @@ export default ArchitectureDiagramPage;
 export const Head = () => {
   return <SEO title="Design Architecture Diagram | Layer5"
     description="Create architecture diagram for AWS, GCP or Kubernetes"
-    image="/images/solutions-collaborate.png" />;
+    image="/images/solutions-collaborate.webp" />;
 };

src/assets/images/blog/five-and-friends.webp

@@ -11,7 +11,7 @@ export const Head = () => {
     <SEO
       title="Cloud Native Deployments by Diagram"
       description="Design and Deploy your Kubernetes-based, cloud native deployments"
-      image="/images/solutions-diagram.png"
+      image="/images/solutions-diagram.webp"
     />
   );
 };

src/components/Corner-popup/index.js

@@ -4,7 +4,7 @@ import { Col } from "../../reusecore/Layout";
 import SectionTitle from "../../reusecore/SectionTitle";
 import AdventuresWrapper from "./discuss.style";
 
-const Adventure = "../../assets/images/adventure-five/layer_five.png";
+const Adventure = "../../assets/images/adventure-five/layer_five.webp";
 
 
 const AdventuresCallout = () => {

src/components/Corner-popup/power-of-meshery-small.webp

@@ -1,7 +1,7 @@
 import React from "react";
 import WhiteboardWrapper from "./whiteboard.style";
 import { Container } from "../../reusecore/Layout";
-import whiteboard_svg from "../../assets/images/whiteboard/whiteboard.png";
+import whiteboard_svg from "../../assets/images/whiteboard/whiteboard.svg";
 import Partners from "../Home/Partners-home";
 import SeeYou from "../SeeYou";
 import FeatureHero from "../FeatureHero";

src/pages/solutions/architecture-diagram/index.js

@@ -10,7 +10,7 @@ import { HiOutlineChevronDown } from "@react-icons/all-files/hi/HiOutlineChevron
 
 const Discuss = "../../../assets/images/discuss/layer5-discuss-white.webp";
 const FiveandFriendsAdventures =
-  "../../../assets/images/blog/five-and-friends.png";
+  "../../../assets/images/blog/five-and-friends.webp";
 
 const Sidebar = ({ pageContext }) => {
   const data = useStaticQuery(