[Performance] Use gatsby-plugin-image component instead of <img> tag

[sudhanshutech]

Description

Few images due to large size and taking time to render creating bad performance to site . Use gatsby-plugin-image instead because lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive

Expected Behavior

Replace in following page with gatsby-plugin-image instead tag

In the following page:

• Case study

• Layer5 site

• and search in code base with alt="meshery-logo"

And replace those with gatsby image plugin.

Screenshots

Environment:

• Host OS:
• Browser:

---

Contributor Resources and Handbook

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

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[Ashparshp]

@sudhanshutech, considering the build time is already long, using gatsby-plugin-image will increase it further.

[siddharthbaleja7]

@sudhanshutech Can you assign this issue to me?

[Ashparshp]

Thank you @siddharthbaleja7.. assigned to u, please go ahead.

[Ashparshp]

@siddharthbaleja7, Also, we have weekly meetings make sure to join this week to share updates,
Let's discuss this during the website call on Monday at 5:30 PM IST (7:00 AM CT). Please consider adding it as an agenda item to the meeting minutes || meeting link.

[Ashparshp]

@siddharthbaleja7, have you joined the slack?

[AlfiyaSiddique]

@Ashparshp, I'm waiting in queue for this issue. Please consider me if it needs to be reassigned

[Ashparshp]

@siddharthbaleja7, any updates? Should we move to the next? Thank you, @AlfiyaSiddique. If he doesn't respond, I'll assign it to you. Let's wait for a bit.

[siddharthbaleja7]

@Ashparshp Sorry for late reply, currently working on it .