Solving Large Image Sizes and PNG Format Causing Performance Issues. #5854

[jason2000-cpu]

Description

This PR fixes #
Large Image Sizes and PNG Format Causing Performance Issues. #5854

Below are the steps I took:

• Identified all .png images in the whole project
• Converted .png image to .webp file format
• Replaced all the instances where the .png images are used with the now .webp images
• Deleted all the already converted .png image files

Notes for Reviewers

• Previous Site performance

• Current Site Performance

There was a slight increase in performance and Search Engine Optimization

Signed commits

• Yes, I signed my commits.

[l5io]

🚀 Preview for commit e35abe9 at: https://68fb74d457f0ee4e643b7f2b--layer5.netlify.app

[Rajesh-Nagarajan-11]

@jason2000-cpu Could you please share which pages were updated? That would help make the review process easier.

[saurabhraghuvanshii]

@jason2000-cpu you forgot to remove this five-and-friends.png

[saurabhraghuvanshii]

@jason2000-cpu https://github.com/layer5io/layer5/blob/master/src/assets/images/gitops/service-mesh-performance-profile.png same

[jason2000-cpu]

@Rajesh-Nagarajan-11 Here are the exact files changed

Content / Blog

src/collections/blog/2024/11-05-what-is-the-kanvas-catalog/post.mdx

Components

src/components/Corner-popup/index.js

Pages

src/pages/community/adventures-of-five-and-friends/index.js

src/pages/solutions/architecture-diagram/index.js

src/pages/solutions/cloud-native-deployments-by-diagram/index.js

src/pages/solutions/developer-defined-infrastructure/index.js

src/pages/solutions/devrel-platform-for-kubernetes-and-cloud-native-content/index.js

src/pages/solutions/gitops/index.js

src/pages/solutions/gitops/performance-management.js

src/pages/solutions/gitops/snapshot.js

src/pages/solutions/kubernetes-multi-cluster-operation/index.js

src/pages/solutions/platform-engineering/index.js

Sections

src/sections/Adventures-Callout/index.js

src/sections/ArchitectureDiagram/index.js

src/sections/Blog/Blog-sidebar/index.js

src/sections/Careers/Careers-Programs-grid/index.js

src/sections/Careers/index.js

src/sections/CloudNativeDeployments/index.js

src/sections/Comments/index.js

src/sections/Community/Adventures-of-Five/index.js

src/sections/Community/Handbook/index.js

src/sections/Community/Handbook/recognition.js

src/sections/Community/Handbook/repo-data.js

src/sections/Community/Members-grid/index.js

src/sections/Community/Newcomers-guide/Tutorials-table/index.js

src/sections/Community/Newcomers-guide/index.js

src/sections/Community/index.js

src/sections/Company/About/index.js

src/sections/Company/Brand/Brand-components/brand-guide.js

src/sections/Company/Brand/Brand-components/social-backgrounds.js

src/sections/Company/Brand/Brand-components/stickfigures.js

src/sections/Developer-Infrastructure/features.js

src/sections/Developer-Infrastructure/index.js

src/sections/Devrel-platform/content.js

[jason2000-cpu]

@jason2000-cpu https://github.com/layer5io/layer5/blob/master/src/assets/images/gitops/service-mesh-performance-profile.png same

Thank you. Let me have a look on them

[saurabhraghuvanshii]

@jason2000-cpu https://github.com/layer5io/layer5/blob/master/src/assets/images/kanvas/KanvasDesigner.png same

[saurabhraghuvanshii]

@jason2000-cpu https://github.com/layer5io/layer5/blob/master/src/components/Corner-popup/power-of-meshery-small.png

[saurabhraghuvanshii]

@jason2000-cpu I’d encourage you to remove the duplicate images there are around 10 or more duplicates. You can use the existing ones from the common assets/images directory instead.

[jason2000-cpu]

@jason2000-cpu I’d encourage you to remove the duplicate images there are around 10 or more duplicates. You can use the existing ones from the common assets/images directory instead.

@saurabhraghuvanshii Done

[l5io]

🚀 Preview for commit b609d7e at: https://68fbc42dd4cc724a6f1a29f9--layer5.netlify.app

[saurabhraghuvanshii]

@jason2000-cpu @Rajesh-Nagarajan-11 it is working fine I test it, and if any thing break we can improve in new Prs, and @jason2000-cpu please keep Pr small for easy review.

[saurabhraghuvanshii]

@jason2000-cpu Thanks for this, I appreciate your hard work

[jason2000-cpu]

@jason2000-cpu @Rajesh-Nagarajan-11 it is working fine I test it, and if any thing break we can improve in new Prs, and @jason2000-cpu please keep Pr small for easy review.
I totally understand, It's my first time contributing to open source projects. Thank you for the feedback

[l5io]

🚀 Preview for commit 5f2d208 at: https://68fbc881366de6669c09ec6f--layer5.netlify.app