Skip to content

Commit 916f75e

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
authored
Merge pull request #7619 from Manishnemade12/fix/kanvas-staticimage-optimization
perf(images): replace Kanvas img tags with StaticImage
2 parents 8cbdf45 + fa535cd commit 916f75e

File tree

3 files changed

+52
-85
lines changed

3 files changed

+52
-85
lines changed

‎src/sections/Kanvas/index.js‎

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React from "react";
2+
import { StaticImage } from "gatsby-plugin-image";
23
import KanvasWrapper from "./kanvas.style";
34
import { Container } from "../../reusecore/Layout";
45
import Features from "../../components/Features-carousel";
56
import KanvasModes from "./kanvas-modes";
67
import Catalog from "./kanvas-catalog";
78
import Platform from "./kanvas-platform";
89
import KanvasBanner from "./kanvas_banner";
9-
import designerImage from "../../assets/images/kanvas/KanvasDesigner.webp";
10-
import visualizerImage from "../../assets/images/kanvas/KanvasVisualizer.webp";
1110
import DesignerFeatures from "./FeaturesSection/Design/DesignerFeatures";
1211
import CollaboratorFeatures from "./FeaturesSection/Collaborate/CollaboratorFeatures";
1312
import VisualizerFeatures from "./FeaturesSection/Visualize/VisualizerFeatures";
@@ -28,9 +27,6 @@ import { ReactComponent as Collab2 } from "./FeaturesSection/Collaborate/images/
2827
import { ReactComponent as Collab3 } from "./FeaturesSection/Collaborate/images/collab3-colorMode.svg";
2928
import { ReactComponent as Collab4 } from "./FeaturesSection/Collaborate/images/collab4-colorMode.svg";
3029

31-
import Avatar1 from "./FeaturesSection/Collaborate/images/avatar1.webp";
32-
import Avatar2 from "./FeaturesSection/Collaborate/images/avatar2.webp";
33-
import Avatar3 from "./FeaturesSection/Collaborate/images/avatar3.webp";
3430
import Kaur from "../../sections/Pricing/reviews/kaur-kallas.webp";
3531
import Ala from "../../sections/Pricing/reviews/ala-eddine-benhassir.jpeg";
3632
import Phillip from "../../sections/Pricing/reviews/phillip-ulberg.jpeg";
@@ -56,12 +52,10 @@ const Kanvas = (props) => {
5652
description:
5753
"Drag-and-drop your cloud native infrastructure using a palette of thousands of versioned Kubernetes components and Cloud services. Collaborate wtih teammates using this self-service engineering platform. Using GitOps? Integrate advanced performance analysis into your pipeline.",
5854
content: (
59-
<img
60-
src={designerImage}
55+
<StaticImage
56+
src="../../assets/images/kanvas/KanvasDesigner.webp"
6157
alt="Designer Mode"
6258
className="designer-img modes-image"
63-
width="100%"
64-
height="auto"
6559
style={{ aspectRatio: "16/9" }}
6660
/>
6761
),
@@ -71,12 +65,10 @@ const Kanvas = (props) => {
7165
description:
7266
"Operator offers an interactive topology of your Kubernetes clusters with live terminal sessions, log streaming and performance testing of your applications. Designs created in Designer mode can be deployed and viewed as running in your environment using Operator.",
7367
content: (
74-
<img
75-
src={visualizerImage}
68+
<StaticImage
69+
src="../../assets/images/kanvas/KanvasVisualizer.webp"
7670
alt="Operator Mode"
7771
className="modes-image"
78-
width="100%"
79-
height="auto"
8072
style={{ aspectRatio: "16/9" }}
8173
/>
8274
),
@@ -165,13 +157,13 @@ const Kanvas = (props) => {
165157
description: "Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.",
166158
imgContent: (
167159
<>
168-
<img
160+
<StaticImage
169161
id="avatar-1"
170-
src={Avatar1}
162+
src="./FeaturesSection/Collaborate/images/avatar1.webp"
171163
alt=""
172-
width="48"
173-
height="48"
174-
style={{ objectFit: "cover" }}
164+
width={48}
165+
height={48}
166+
imgStyle={{ objectFit: "cover" }}
175167
/>
176168
<Collab1 id="collaborate-image1" alt="collaborate-image1" />
177169
</>
@@ -187,13 +179,13 @@ const Kanvas = (props) => {
187179
description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.",
188180
imgContent: (
189181
<>
190-
<img
182+
<StaticImage
191183
id="avatar-2"
192-
src={Avatar2}
184+
src="./FeaturesSection/Collaborate/images/avatar2.webp"
193185
alt="avatar-2"
194-
width="48"
195-
height="48"
196-
style={{ objectFit: "cover" }}
186+
width={48}
187+
height={48}
188+
imgStyle={{ objectFit: "cover" }}
197189
/>
198190
<Collab2 id="collaborate-image2" alt="collaborate-image2" />
199191
</>
@@ -204,13 +196,13 @@ const Kanvas = (props) => {
204196
description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.",
205197
imgContent: (
206198
<>
207-
<img
199+
<StaticImage
208200
id="avatar-3"
209-
src={Avatar3}
201+
src="./FeaturesSection/Collaborate/images/avatar3.webp"
210202
alt="avatar-3"
211-
width="48"
212-
height="48"
213-
style={{ objectFit: "cover" }}
203+
width={48}
204+
height={48}
205+
imgStyle={{ objectFit: "cover" }}
214206
/>
215207
<Collab3 id="collaborate-image3" alt="collaborate-image3" />
216208
</>
@@ -225,13 +217,13 @@ const Kanvas = (props) => {
225217
description: "Kanvas is an end-to-end management platform, here to help teams understand problems, explore options, and build solutions—together.",
226218
imgContent: (
227219
<>
228-
<img
220+
<StaticImage
229221
id="avatar-3"
230-
src={Avatar3}
222+
src="./FeaturesSection/Collaborate/images/avatar3.webp"
231223
alt="avatar-3"
232-
width="48"
233-
height="48"
234-
style={{ objectFit: "cover" }}
224+
width={48}
225+
height={48}
226+
imgStyle={{ objectFit: "cover" }}
235227
/>
236228
<Collab4 id="collaborate-image4" alt="collaborate-image4" />
237229
</>

‎src/sections/Kanvas/kanvas-catalog.js‎

Lines changed: 23 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,6 @@
11
import React from "react";
22
import styled from "styled-components";
3-
import Mutual_tls from "../../assets/images/kanvas/catalog-card-images/mutual-tls.svg";
4-
import Retries from "../../assets/images/kanvas/catalog-card-images/retries.svg";
5-
import Traces from "../../assets/images/kanvas/catalog-card-images/traces.svg";
6-
import Denial from "../../assets/images/kanvas/catalog-card-images/denial.svg";
7-
import Correlate_event from "../../assets/images/kanvas/catalog-card-images/correlate-event.svg";
8-
import Only_wagent from "../../assets/images/kanvas/catalog-card-images/only-wagent.svg";
9-
import Node_agent from "../../assets/images/kanvas/catalog-card-images/node-agent.svg";
10-
import Single_tenant from "../../assets/images/kanvas/catalog-card-images/single-tenant.svg";
11-
import Pre_provison from "../../assets/images/kanvas/catalog-card-images/pre-provision.svg";
12-
import Circuit_breaker from "../../assets/images/kanvas/catalog-card-images/circuit-breaker.svg";
13-
import Retry_deadline from "../../assets/images/kanvas/catalog-card-images/retry-deadline.svg";
14-
import Singleton from "../../assets/images/kanvas/catalog-card-images/singleton.svg";
15-
import Jwt_transformer from "../../assets/images/kanvas/catalog-card-images/jwt.svg";
16-
import Multicluster from "../../assets/images/kanvas/catalog-card-images/multicluster.svg";
17-
import Http_metrics from "../../assets/images/kanvas/catalog-card-images/http.svg";
18-
19-
import Design from "../../assets/images/kanvas/icon-only/kanvas-icon-color.svg";
20-
21-
22-
23-
import Patterns from "../../assets/images/service-mesh-patterns/service-mesh-pattern.svg";
24-
25-
import Models from "../../assets/images/meshery/meshery-logo.svg";
26-
27-
import Opa from "../../assets/images/kanvas/opa.svg";
3+
import { StaticImage } from "gatsby-plugin-image";
284
import { Container } from "../../reusecore/Layout";
295

306
const CatalogWrapper = styled.div`
@@ -121,7 +97,7 @@ box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
12197
grid-template-columns: repeat(2, 1fr);
12298
grid-gap: 1em;
12399
padding: 0.5em;
124-
img{
100+
.gatsby-image-wrapper{
125101
max-width:5.6rem;
126102
display:block;
127103
margin: 0 auto;
@@ -232,7 +208,7 @@ h3.containerCaption {
232208
}
233209
234210
#carousel{
235-
img{
211+
.gatsby-image-wrapper{
236212
transition: all .5s ease;
237213
}
238214
}
@@ -344,7 +320,7 @@ h3.containerCaption {
344320
@media screen and (max-width: 680px) {
345321
346322
.svg-cont{
347-
img {
323+
.gatsby-image-wrapper {
348324
width: 4rem;
349325
}
350326
p{
@@ -448,20 +424,20 @@ const Catalog = () => {
448424
{/* Right Section */}
449425
<section className="services svg-cont">
450426
<div>
451-
<img alt="Kanvas dashboard showing service retries in Kubernetes visualization" src={Patterns} />
427+
<StaticImage alt="Kanvas dashboard showing service retries in Kubernetes visualization" src="../../assets/images/service-mesh-patterns/service-mesh-pattern.svg" placeholder="none" />
452428
<p>Cloud Native Patterns</p>
453429
</div>
454430
<div>
455431

456-
<img src={Design} alt="Design logo" />
432+
<StaticImage src="../../assets/images/kanvas/icon-only/kanvas-icon-color.svg" alt="Design logo" placeholder="none" />
457433
<p>Design</p>
458434
</div>
459435
<div>
460-
<img src={Models} alt="Models logo" />
436+
<StaticImage src="../../assets/images/meshery/meshery-logo.svg" alt="Models logo" placeholder="none" />
461437
<p>Models</p>
462438
</div>
463439
<div>
464-
<img alt="OPA policies management illustration in Kanvas service mesh" src={Opa} />
440+
<StaticImage alt="OPA policies management illustration in Kanvas service mesh" src="../../assets/images/kanvas/opa.svg" placeholder="none" />
465441
<p>OPA Policies</p>
466442
</div>
467443
</section>
@@ -473,49 +449,49 @@ const Catalog = () => {
473449
<div className="container">
474450
<div id="carousel">
475451
<div className="slide one">
476-
<img src={Mutual_tls} alt="Kanvas Mutual TLS security feature for Kubernetes workloads" />
452+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/mutual-tls.svg" alt="Kanvas Mutual TLS security feature for Kubernetes workloads" placeholder="none" />
477453
</div>
478454
<div className="slide two">
479-
<img src={Retries} alt="Kanvas dashboard showing service retries in Kubernetes visualization" />
455+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/retries.svg" alt="Kanvas dashboard showing service retries in Kubernetes visualization" placeholder="none" />
480456
</div>
481457
<div className="slide three">
482-
<img src={Traces} alt="Kanvas tracing visualization for distributed Kubernetes services" />
458+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/traces.svg" alt="Kanvas tracing visualization for distributed Kubernetes services" placeholder="none" />
483459
</div>
484460
<div className="slide four">
485-
<img src={Denial} alt="Access denial control feature in Kanvas service mesh" />
461+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/denial.svg" alt="Access denial control feature in Kanvas service mesh" placeholder="none" />
486462
</div>
487463
<div className="slide five">
488-
<img src={Correlate_event} alt="Event correlation view in Kanvas dashboard" />
464+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/correlate-event.svg" alt="Event correlation view in Kanvas dashboard" placeholder="none" />
489465
</div>
490466
<div className="slide six">
491-
<img src={Only_wagent} alt="Kanvas only agent monitoring feature for clusters" />
467+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/only-wagent.svg" alt="Kanvas only agent monitoring feature for clusters" placeholder="none" />
492468
</div>
493469
<div className="slide seven">
494-
<img src={Node_agent} alt="Kanvas node agent metrics visualization for Kubernetes" />
470+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/node-agent.svg" alt="Kanvas node agent metrics visualization for Kubernetes" placeholder="none" />
495471
</div>
496472
<div className="slide eight">
497-
<img src={Single_tenant} alt="Single tenant Kubernetes deployment dashboard in Kanvas" />
473+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/single-tenant.svg" alt="Single tenant Kubernetes deployment dashboard in Kanvas" placeholder="none" />
498474
</div>
499475
<div className="slide nine">
500-
<img src={Pre_provison} alt="Kanvas pre-provisioning configuration for Kubernetes clusters" />
476+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/pre-provision.svg" alt="Kanvas pre-provisioning configuration for Kubernetes clusters" placeholder="none" />
501477
</div>
502478
<div className="slide ten">
503-
<img src={Circuit_breaker} alt="Circuit breaker monitoring in Kanvas service mesh"/>
479+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/circuit-breaker.svg" alt="Circuit breaker monitoring in Kanvas service mesh" placeholder="none" />
504480
</div>
505481
<div className="slide eleven">
506-
<img src={Retry_deadline} alt="Retry deadline feature in Kanvas observability dashboard" />
482+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/retry-deadline.svg" alt="Retry deadline feature in Kanvas observability dashboard" placeholder="none" />
507483
</div>
508484
<div className="slide twelve">
509-
<img src={Singleton} alt="Singleton service pattern visualization in Kanvas" />
485+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/singleton.svg" alt="Singleton service pattern visualization in Kanvas" placeholder="none" />
510486
</div>
511487
<div className="slide thirteen">
512-
<img src={Jwt_transformer} alt="JWT transformer process view in Kanvas Kubernetes dashboard" />
488+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/jwt.svg" alt="JWT transformer process view in Kanvas Kubernetes dashboard" placeholder="none" />
513489
</div>
514490
<div className="slide fourteen">
515-
<img src={Multicluster} alt="Multi-cluster management view in Kanvas" />
491+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/multicluster.svg" alt="Multi-cluster management view in Kanvas" placeholder="none" />
516492
</div>
517493
<div className="slide fifteen">
518-
<img src={Http_metrics} alt="HTTP metrics monitoring dashboard in Kanvas for Kubernetes" />
494+
<StaticImage src="../../assets/images/kanvas/catalog-card-images/http.svg" alt="HTTP metrics monitoring dashboard in Kanvas for Kubernetes" placeholder="none" />
519495
</div>
520496
</div>
521497
</div>

‎src/sections/Kanvas/kanvas-modes.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useState } from "react";
2+
import { StaticImage } from "gatsby-plugin-image";
23
import styled from "styled-components";
3-
import designerImage from "../../assets/images/kanvas/KanvasDesignerN.webp";
4-
import visualizerImage from "../../assets/images/kanvas/Kanvas-Operator.webp";
54

65
const KanvasModesWrapper = styled.div`
76
margin-top: 0.1rem;
@@ -188,7 +187,7 @@ const KanvasModesWrapper = styled.div`
188187
font-size: 1.44rem;
189188
font-weight: normal;
190189
}
191-
img{
190+
.gatsby-image-wrapper{
192191
width: 30rem;
193192
height: auto;
194193
cursor: pointer;
@@ -270,7 +269,7 @@ const KanvasModes = () => {
270269
</div>
271270
<div className="content">
272271
<h1>Discover and model your cloud native deployments</h1>
273-
<img src={designerImage} alt="Kanvas Designer" onClick={() => setDesignerEnlarged(!designerEnlarged)} className={`designer-img ${designerEnlarged ? "big" : "small"}`} />
272+
<StaticImage src="../../assets/images/kanvas/KanvasDesignerN.webp" alt="Kanvas Designer" onClick={() => setDesignerEnlarged(!designerEnlarged)} className={`designer-img ${designerEnlarged ? "big" : "small"}`} />
274273
<p>
275274
Drag-and-drop your cloud native infrastructure using a palette of thousands of versioned Kubernetes components. Using GitOps? Integrate advanced performance analysis into your pipeline.
276275
</p>
@@ -283,7 +282,7 @@ const KanvasModes = () => {
283282
</div>
284283
<div className="content">
285284
<h1>Apply patterns and manage many Kubernetes clusters</h1>
286-
<img src={visualizerImage} alt="Kanvas Operator" onClick={() => setVizEnlarged(!vizEnlarged)} className={`visualizer-img ${vizEnlarged ? "big" : "small"}`} />
285+
<StaticImage src="../../assets/images/kanvas/Kanvas-Operator.webp" alt="Kanvas Operator" onClick={() => setVizEnlarged(!vizEnlarged)} className={`visualizer-img ${vizEnlarged ? "big" : "small"}`} />
287286
<p>
288287
Deploy designs, apply patterns, manage and operate your deployments in real-time. Bring all your Kubernetes clusters under a common point of management. Interactively connect to terminal sessions or initiate and search log streams from your containers.
289288
</p>

0 commit comments

Comments
 (0)