Convert all png of sections directory to webp

src/sections/Careers/index.js

@@ -4,12 +4,12 @@ import { Container } from "../../reusecore/Layout";
 import { Row } from "../../reusecore/Layout";
 import PageHeader from "../../reusecore/PageHeader";
 import InternshipPage from "./Careers-Internship-grid";
-import Five from "../../sections/Community/Community-pictures/community.png";
+import Five from "../../sections/Community/Community-pictures/community.webp";
 import JoinCommunity from "../Community/Join-community";
 import CareersSectionWrapper from "./careers.style";
 
-const Five_image = "./img/open-source.png";
-const Layer5_culture = "./img/layer5-culture.png";
+const Five_image = "./img/open-source.webp";
+const Layer5_culture = "./img/layer5-culture.webp";
 
 const CareersPage = () => {
   return (

src/sections/CloudNativeDeployments/index.js

@@ -3,7 +3,7 @@ import FeatureHero from "../SolutionHero";
 import whiteboard_svg from "./images/whiteboarding.svg";
 import collaborate_svg from "./images/collaborate.svg";
 import cluster_svg from "./images/cluster.svg";
-import switcher_img from "./images/switcher.png";
+import switcher_img from "./images/switcher.webp";
 import { Container } from "../../reusecore/Layout";
 import FeatureUseCard from "../../components/FeatureUseCard";
 import MultiClusterWrapper from "./deploy.style";

src/sections/Community/Adventures-of-Five/index.js

@@ -4,8 +4,8 @@ const SubscribeSection = loadable(() => import("../../../sections/subscribe/subs
 
 import { AdventuresWrapper } from "./adventures.style.js";
 import AdventuresVol from "../../../components/AdventuresVol/index";
-import vol1Img from "./vol1/meet-five.png";
-import vol2Img from "./vol2/the-adventures-of-five-cover-vol2.png";
+import vol1Img from "./vol1/meet-five.webp";
+import vol2Img from "./vol2/the-adventures-of-five-cover-vol2.webp";
 
 const AdventuresHome = () => {
   return (

src/sections/Community/Handbook/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import { HandbookWrapper } from "./Handbook.style";
 import HandbookCard from "../../../components/HandbookCard/index";
 import AdventuresVol from "../../../components/AdventuresVol/index";
-import vol1Img from "../Adventures-of-Five/vol1/meet-five.png";
+import vol1Img from "../Adventures-of-Five/vol1/meet-five.webp";
 
 const handbookHome = () => {
   return (

src/sections/Community/Newcomers-guide/index.js

@@ -4,16 +4,16 @@ import Button from "../../../reusecore/Button";
 import { Col, Container, Row } from "../../../reusecore/Layout";
 import PageHeader from "../../../reusecore/PageHeader";
 import { NewcomersGuideWrapper } from "./NewcomersPageWrapper.style";
-import CommunityImage4 from "../Community-pictures/community.png";
+import CommunityImage4 from "../Community-pictures/community.webp";
 import TutorialsTable from "./Tutorials-table";
 import NewcomersMap from "./newcomers-map";
 import JoinCommunity from "../Join-community";
 import longArrow from "./long-arrow.svg";
 import { StaticImage } from "gatsby-plugin-image";
 
-const CommunityImage2 = "../Community-pictures/five-finding-issue.png";
+const CommunityImage2 = "../Community-pictures/five-finding-issue.webp";
 const CommunityImage3 = "../../../assets/images/newcomers-page-images/community-collage.webp";
-const FiveWorking = "../Community-pictures/five-working.png";
+const FiveWorking = "../Community-pictures/five-working.webp";
 
 const NewcomersGuide = () => {
   const [hover, setHover] = useState(false);

src/sections/Community/index.js

@@ -8,7 +8,7 @@ import JoinCommunity from "../Community/Join-community";
 import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import { FaUsers } from "@react-icons/all-files/fa/FaUsers";
 import CommunitySectionWrapper from "./community.style";
-import Five from "./Community-pictures/community.png";
+import Five from "./Community-pictures/community.webp";
 import NewcomersMap from "./Newcomers-guide/newcomers-map.js";
 import DiscussCallout from "../../sections/Discuss-Callout";
 import { ReactComponent as MeshmateIcon } from "../../assets/images/meshmate/meshmate-stack-colorMode.svg";
@@ -21,7 +21,7 @@ import AdventuresCallout from "../Adventures-Callout";
 // import PictureSlider from "./slider";
 
 const CommunityMember = "./Community-pictures/five.svg";
-const Picture = "./Community-pictures/join-the-community.png";
+const Picture = "./Community-pictures/join-the-community.webp";
 
 const CommunityPage = () => {
 

src/sections/Company/About/index.js

@@ -11,8 +11,8 @@ import location from "./images/location.svg";
 import WhoWeAre from "../WhoWeAre";
 import FiveIcon from "../../../assets/images/layer5/5 icon/svg/light/5-light-bg.svg";
 import { Link } from "gatsby";
-import Layer5Projects from "./images/layer5-projects.png";
-import communityStat from "./images/layer5-community-stats.png";
+import Layer5Projects from "./images/layer5-projects.webp";
+import communityStat from "./images/layer5-community-stats.webp";
 
 const About = () => {
   const Community_meetup = "./images/Community_meetup.webp";

src/sections/Developer-Infrastructure/features.js

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { Link } from "gatsby";
 import orchestration_svg from "./images/orchestration.svg";
-import whiteboard from "./images/whiteboard-1e9f33293030bc98a01945af9740863f.png";
+import whiteboard from "./images/whiteboard-1e9f33293030bc98a01945af9740863f.webp";
 import { Container, Row, Col } from "../../reusecore/Layout";
 
 const FeatureWrapper = styled.div`

src/sections/Developer-Infrastructure/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import FeatureHero from "../SolutionHero";
 import kubernetes_svg from "./images/kubernetes.svg";
 import config_svg from "./images/config.svg";
-import cluster_svg from "./images/cluster.png";
+import cluster_svg from "./images/cluster.webp";
 import collaborate_svg from "./images/collaborate.svg";
 import { Container } from "../../reusecore/Layout";
 import FeatureUseCard from "../../components/FeatureUseCard";

src/sections/Playground/playground-CTA.js

@@ -3,8 +3,8 @@ import styled from "styled-components";
 import Button from "../../reusecore/Button";
 import { Container } from "../../reusecore/Layout";
 import MesheryTitle from "./images/meshery-title.svg";
-import playgroundbgCTA from "./images/playground-bg-CTA.png";
-import smalldots from "./images/small-dots.png";
+import playgroundbgCTA from "./images/playground-bg-CTA.webp";
+import smalldots from "./images/small-dots.webp";
 import MesheryIcon from "../../assets/images/meshery/icon-only/meshery-logo.webp";
 
 const DockerExtensionCTAWrapper = styled.div`

src/sections/Pricing/review-slider.js

@@ -17,7 +17,7 @@ import Ala from "./reviews/ala-eddine-benhassir.jpeg";
 import Alex from "./reviews/alex-hokanson.jpeg";
 import Patrick from "./reviews/patrick-steinig.jpeg";
 import Hein from "./reviews/hein.webp";
-import Anusha from "./reviews/anusha.png";
+import Anusha from "./reviews/anusha.webp";
 
 const settings = {
   dots: false,

src/sections/kubernetes-multi-cluster/index.js

@@ -1,8 +1,8 @@
 import React from "react";
 import SolutionHero from "../SolutionHero";
-import cluster_img from "./images/cluster.png";
-import deploy_img from "./images/deploy.png";
-import config_img from "./images/config.png";
+import cluster_img from "./images/cluster.webp";
+import deploy_img from "./images/deploy.webp";
+import config_img from "./images/config.webp";
 import { Container } from "../../reusecore/Layout";
 import FeatureUseCard from "../../components/FeatureUseCard";
 import MultiClusterWrapper from "./kube.style";