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

[YashKamboj]

Current Behavior

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

Change to <StaticImagess> 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.

[Jonathan-Foo]

Hi @YashKamboj, If this issue is still open, could you please assign it to me.

[YashKamboj]

@Jonathan-Foo Go Ahead!!

[Jonathan-Foo]

Hi @YashKamboj , Thank you for assigning me the issue. I was wondering do I have to do the image optimization for just the single img element in the index.js of the Community folder, or all the img elements I might find going through the components(e.g. PictureSlider) that make up the Community page?

[YashKamboj]

@Jonathan-Foo All the images in the community page, and also if we missed some of them related to the community page would be great!

[Jonathan-Foo]

Hi @YashKamboj, When StaticImage's built in styles overwrite the original styles of the converted image elements. Should I use css and try my best to match the original style, or should I just not convert these image elements?

[Jonathan-Foo]

some times the quality of the images(svgs) also become lower

[Nikhil-Ladha]

Avoid SVG's when using the StaticImage component. Use the regular img tag for them

[Jonathan-Foo]

Hi @Nikhil-Ladha, Thank you for clarify. What should I do about the StaticImage's built in styles issue?

[Nikhil-Ladha]

Hi @Nikhil-Ladha, Thank you for clarify. What should I do about the StaticImage's built in styles issue?

Add a className and see if that helps. I guess you are saying this for the slider, if so we have had issues in past using gatsby-plugin on it. So, yeah we can skip that if it doesn't work for you as well. But, do give a try.

[Jonathan-Foo]

Hi @Nikhil-Ladha, I've looked through the community page, as well as related pages(MeshMate, NewComers), but most images use svg and the ones that use .png have already been optimized. I tried my best to optimizing the slider, but the image disappears, even when I use inline styles, add a className or use the StaticImage props(style, imgStyle).

Here's a list of files I looked through: https://docs.google.com/document/d/1WY0w4A_jxIbyW01Lq_eMtc0czj8jub_2UJFLh5VrJJQ/edit?usp=sharing

[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.

[github-actions[bot]]

Checking in... it has been awhile since we've heard from you on this issue. Are you still working on it? Please let us know and please don't hesitate to contact a MeshMate or any other community member for assistance.

---

        Be sure to join the community, if you haven't yet and please leave a :star: star on the project :smile:

[tinniaru3005]

Hey @legendarykamal, can you please assign it to me?

[kamalbuilds]

yes, please go ahead .