changed <img /> to <StaticImage /> to improve performance

Signed-off-by: Yaten Dhingra <[email protected]>
layer5io · Oct 16, 2024 · 1f961d0 · 1f961d0
1 parent 49d628f
commit 1f961d0
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/src/components/Case-study-banner/index.js b/src/components/Case-study-banner/index.js
@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import MesheryLogo from "../../assets/images/meshery/icon-only/meshery-logo-light.svg";
-import SpireLogo from "../../collections/integrations/spire/icons/color/spire-color.svg";
-import MesheryAndSpire from "../../collections/resources/case-study/hpes-adoption-of-meshery-and-kanvas/meshery-and-hpe.svg";
+import { StaticImage } from "gatsby-plugin-image";
 
 
 const BannerWrapper = styled.div`
@@ -43,6 +41,14 @@ const BannerWrapper = styled.div`
 
 }
 
+.left-img > .gatsby-image-wrapper {
+  border-radius: 50%;
+  width: 50%;
+  overflow: hidden;
+  height: auto;
+  object-fit: contain;
+}
+
 .desc {
   display: flex;
   background:${props => props.theme.bannerDescriptionGradient};
@@ -215,12 +221,12 @@ const CaseStudyBanner = () => {
               <h2>Discover how HPE uses Meshery to manage SPIRE</h2>
             </div>
             <div className="meshery-and-spire">
-              <img src={MesheryAndSpire} alt="meshery-and-spire" />
+              <StaticImage src="../../collections/resources/case-study/hpes-adoption-of-meshery-and-kanvas/meshery-and-hpe.svg" />
             </div>
           </div>
           <div className="large-screen">
             <div className={`left-img ${hover ? "scale-on-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
-              <img src={MesheryLogo} alt="meshery-logo" />
+              <StaticImage src="../../assets/images/meshery/icon-only/meshery-logo-light.svg" /* style={{ borderRadius: "50%" }} */ />
             </div>
             <div className={`desc ${hover ? "desc-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
               <h2>Discover how HPE uses Meshery to manage SPIRE</h2>
@@ -229,7 +235,7 @@ const CaseStudyBanner = () => {
               </div>
             </div>
             <div className={`right-img ${hover ? "scale-on-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
-              <img src={SpireLogo} alt="spire-logo" />
+              <StaticImage src="../../collections/integrations/spire/icons/color/spire-color.svg" />
             </div>
           </div>
         </BannerWrapper>