[Performance] Image Optimization <img> to <StaticImages> in the Meshery page

[YashKamboj]

Current Behavior

The .png and .jpg images cause a lot of performance issues Desired Situation

Change to for image optimization in the handbook section. eg https://github.com/layer5io/layer5/pull/2597 StaticImagePlugin

[Optional] Alternatives

[Optional] Additional context

---

Contributor Resources

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• See contributing instructions
• See Layer5 site designs in this Figma project. Join the Layer5 Community for access.

[Pavel-2004]

Hi, I would also like to help with this

[YashKamboj]

@Pavel-2004 Go Ahead!!

[YashKamboj]

@Pavel-2004 Update on the issue?, do you need any help with this issue?

[Jonathan-Foo]

Hi @YashKamboj, I would like to give it a try if @Pavel-2004 no longer wants too.

[Jonathan-Foo]

Hi @YashKamboj any updates?

[deveshXm]

Hi @YashKamboj if no one is working on this issue then can you please assign this issue to me.

[leecalcote]

@Jonathan-Foo’s comment must have been missed accidentally. Congrats on your graduation from frrecodecamp, @Jonathan-Foo 👍

[Jonathan-Foo]

That's all good, and thank you @leecalcote

[deveshXm]

i wanted to ask that do i need to replace the img with staticImages for all the components in "src/sections/Meshery". Also am i at the right Meshery folder. Just wanted to confirm this.

[Jonathan-Foo]

Hi @deveshXm, Yes you have to replace img elements you find with Gatsby's StaticImage component, but don't do it if the image source is an .svg, because it will lower the quality. Yep, you are in the right folder.

[deveshXm]

@Jonathan-Foo I checked out your PR on issue #3014 and i saw that you used constants or props for in eg: src={label1} for staticImages . However , after i pasted the whole url of image it was working perfectly fine. And also the staticImages were not working for GIFs so i am not changing their tags.

[siddheshJungade]

I would like to git it a try for this issue?

[deveshXm]

@siddheshJungade i am already working on it

[toukirkhan]

Assign me

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[avikt18]

hey @leecalcote I can work on this :smile:

[avikt18]

@leecalcote kindly review the PR :smile:

[leecalcote]

@avikt18, I'll entrust my review to @GaganpreetKaurKalsi.