Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhancement: convert all png to webP #5866

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

Mandeep56Singh
Copy link

Description
This commit do below things:

  • Convert all png to webP
  • resolve path for converted png
  • reduces size of members images

This PR fixes #5854

Notes for Reviewers

  • The impact of commit can mainly be seen in through this video

before: the content block due to having 3mb image to load

Layer5.at.KubeCon.EU.2024.-.Google.Chrome.2024-09-06.00-56-23.mp4

after: the image reduced to less than 100kb while maintaining good quality

Blog.-.Google.Chrome.2024-09-06.00-55-57.mp4
  • nearly 25% size reduction in images from 380 to 288mb

this calculation includes gif,webp,png,jpg,jpeg format
Screenshot (463)

I think the size of images can further reduced if dimension of imags are altered, the image above displayed video has unusaully high resolution 12k * 16k and size of 3mb.
I only altered the dimension of this image to 1440 * 1920 size, resulting in 80kb size while having same quality.
rest of images are just optimized webp

Signed commits

  • [ x] Yes, I signed my commits.

This commit do below things:
- Convert all png to webP
- resolve path for converted png

Signed-off-by: Mandeep56Singh <[email protected]>
@github-actions github-actions bot added project/meshery area/news A noteworthy article, event, happening area/blog New posts or new blog functionality area/community area/learn Related to /learn section area/events area/handbook area/ci labels Sep 6, 2024
@l5io
Copy link
Contributor

l5io commented Sep 6, 2024

🚀 Preview for commit 2dca178 at: https://66db4498d116e51aec1fefc4--layer5.netlify.app

@Ashparshp
Copy link
Contributor

@Mandeep56Singh, Thank you for your contribution! 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
Copy link
Contributor

@Mandeep56Singh, I'm adding this as an agenda item to the meeting minutes. Please join the evening call.

@Mandeep56Singh
Copy link
Author

Mandeep56Singh commented Sep 11, 2024

@Ashparshp is this pull request valid to get merged ? should go with resolving the conflict and updating the branch.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Completely removed and not added?

@leecalcote
Copy link
Member

Thanks for working on this, @Mandeep56Singh 👍

@leecalcote
Copy link
Member

There are some merge conflicts to update.

@Ashparshp
Copy link
Contributor

@Mandeep56Singh,
You've done an excellent job! I am still reviewing the images, and there are a few files left to review to ensure there are no issues. Please bear with me for a bit longer.

@sudhanshutech
Copy link
Member

@Mandeep56Singh merge conflicts

@l5io
Copy link
Contributor

l5io commented Sep 17, 2024

🚀 Preview for commit d0ab98b at: https://66e916e793143aa0ca7dd280--layer5.netlify.app

@Mandeep56Singh
Copy link
Author

Mandeep56Singh commented Sep 17, 2024

thanks guys, for your feedbacks.
I have made some changes kindly review it and please suggest further improvements.
I haven't converted these images to webP

./src/assets/images/service-mesh-icons/open-service-mesh/horizontal/black/openservicemesh-horizontal-black.png
./src/assets/images/service-mesh-icons/open-service-mesh/horizontal/white/openservicemesh-horizontal-white.png
./src/sections/Company/About/images/layer5-community-stats.png
./src/collections/integrations/_images/kanvas-aws-node-termination-designer-dark.png
./src/collections/integrations/_images/kanvas-aws-node-termination-designer-light.png
./src/collections/integrations/_images/kanvas-designer-light.png
./src/collections/integrations/_images/kanvas-visualizer-dark.png
./src/collections/integrations/_images/kanvas-visualizer.png
./src/collections/integrations/_images/kanvas-visualizer-light.png
./src/collections/integrations/_images/kanvas-designer-dark.png
./src/collections/integrations/_images/kanvas-aws-node-termination-visualizer-light.png
./src/collections/integrations/_images/clusterpedia/clusterpedia-visualize-dark.png
./src/collections/integrations/_images/clusterpedia/clusterpedia-visualize-light.png
./src/collections/integrations/_images/clusterpedia/clusterpedia-design-light.png
./src/collections/integrations/_images/clusterpedia/clusterpedia-design-dark.png
./src/collections/integrations/_images/kanvas-designer.png
./src/collections/integrations/_images/kanvas-regain-control.png
./src/collections/integrations/_images/kanvas-aws-node-termination-visualizer-dark.png
./src/collections/blog/2024/09-07-ways-to-contribute/number-one-most-popular-project.png

if this branch has no breaking changes, I will be happy to convert these to webP.

@Ashparshp
Copy link
Contributor

@Mandeep56Singh, I have reviewed this several times, and it’s really confusing to review more than 800 file changes. I'm afraid I might miss something. Could we break the PR into parts, such as by page or by grouping selected items into a subtask format? This way, we can approach it more efficiently and merge it faster. I really appreciate the great work you've done!

@Mandeep56Singh
Copy link
Author

@leecalcote it's quite weird its perfectly working fine in netlify build

Screenshot (474)

Am I missing something ?

@Mandeep56Singh
Copy link
Author

Mandeep56Singh commented Sep 17, 2024

@Ashparshp thanks.
About the suggestion, does this mean I have to the start from scratch but part by part ?
it seems a good idea to me, But my pc isn't able to run layer5 project. so,I am using code spaces It has limited time usage and I am running out of it.
also we can take a quick look at netlify build for breaking changes.
whatever it may be, I would be happy to work with you guys.

@Ashparshp
Copy link
Contributor

@Mandeep56Singh, are you a college student? If yes, please apply for the GitHub Student Developer Pack. It will help you run machines smoothly without limits issues. If not, no worries—I will review all these.

@lekaf974
Copy link

lekaf974 commented Sep 18, 2024

@Ashparshp thanks. About the suggestion, does this mean I have to the start from scratch but part by part ?

I think this would be a better approach since it will be easier for review and also reduce risk of issue

@Mandeep56Singh
Copy link
Author

Mandeep56Singh commented Sep 18, 2024

@Ashparshp Ok, then please divide this into small task, and It would be way good if you also tell me the required image dimension for that task.
for example, we can set some dimensions for members images.
and let's get started.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/blog New posts or new blog functionality area/ci area/community area/events area/handbook area/learn Related to /learn section area/news A noteworthy article, event, happening project/meshery
Development

Successfully merging this pull request may close these issues.

Large Image Sizes and PNG Format Causing Performance Issues.
6 participants