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

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

Open
4 tasks
Ashparshp opened this issue Aug 31, 2024 · 14 comments · May be fixed by #5866
Open
4 tasks

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

Ashparshp opened this issue Aug 31, 2024 · 14 comments · May be fixed by #5866
Assignees
Labels
help wanted Extra attention is needed kind/enhancement New feature or request

Comments

@Ashparshp
Copy link
Contributor

Current Behavior
The current images used in the project are of heavy size, and many are in PNG format. This is causing performance issues, especially with page loading times. To improve performance, we need to:

Desired Behavior

Convert the PNG images to the WebP format, which offers better compression and smaller file sizes.
Reduce the size of other heavy images without compromising too much on quality.
Tasks:

  • Identify all PNG images in the project.
  • Convert PNG images to WebP format.
  • Reduce the size of large images while maintaining acceptable quality.
  • Test the website to ensure that the images load correctly and that performance is improved.

Contributor Resources

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

@Ashparshp Ashparshp added kind/enhancement New feature or request help wanted Extra attention is needed labels Aug 31, 2024
@Mandeep56Singh
Copy link

@Ashparshp I would like to work on this

@Ashparshp
Copy link
Contributor Author

Thank you @Mandeep56Singh, please go ahead.

@Mandeep56Singh
Copy link

Mandeep56Singh commented Aug 31, 2024

@Ashparshp while running make site command
my build got stuck .
Screenshot (449)

my system
windows 11
system type : 64-bit operating system, x64-based processor
processor 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz 2.40 GHz

I have searched about this issue, a lot of people having x64 have this issue.
do you have any idea how to resolve it ?

@Ashparshp
Copy link
Contributor Author

@Mandeep56Singh, It happens. Try running make site in the terminal, not in the integrated VS Code terminal.

@Mandeep56Singh
Copy link

Mandeep56Singh commented Aug 31, 2024

no luck, I tried windows terminal as well as bash
which os are you using , linux ?

@Ashparshp
Copy link
Contributor Author

It takes some time, please wait for it. It works fine in windows.

@Ashparshp
Copy link
Contributor Author

Otherwise use GitHub Codespace.

@Ashparshp
Copy link
Contributor Author

@Mandeep56Singh, Solved the setup?

@Mandeep56Singh
Copy link

Sorry bro, I am having my MST's but I will resolve this issue.
I will do update you tomorrow.
Thanks.

@Mandeep56Singh
Copy link

@Ashparshp about codespaces sometimes it works sometimes not,
however I thought I would first finish the job then find a way to run it
here how I am approaching this issue

  • I would first optimized the png,
  • then would convert it to webp
  • then further optimization.

however for maximum compression, we can reduce image dimension. most of image have dimension exceeding 1920 * 1080
if we reduce their dimension it would be very low size image.
like converting a 1920 * 1080 to 800 * 400 would lead to 85% size reduction resulting to greater higher loading speed in website
if I have the info what the required maximum for image I can test it.
I am step 1 now.
I would appreciate your response.

@Ashparshp
Copy link
Contributor Author

@Mandeep56Singh, a few things to keep in mind:
For the members' profiles, we can use low-quality images, but in certain sections, we need to maintain a higher quality.
Also, some WebP images have large file sizes that can be reduced.

Feel free to go ahead and raise a PR and we'll discuss about the PR, in Monday website call..

@Mandeep56Singh
Copy link

@Ashparshp right now, we have two different format but same image in
src\assets\images\service-mesh-icons\open-service-mesh\horizontal\black\openservicemesh-horizontal-black.svg
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.svg
src\assets\images\service-mesh-icons\open-service-mesh\horizontal\white\openservicemesh-horizontal-white.png

the png is of very size resolution 18K * 5K
should I proceed on deleting the png since we can use svgs

@Ashparshp
Copy link
Contributor Author

@sudhanshutech, take a look please!!

@Ashparshp
Copy link
Contributor Author

@Mandeep56Singh, for now we can avoid this deletion, and you can ask further in the Monday website call. Please join us if you can.

Please go ahead and raise a PR for the rest!

@Mandeep56Singh Mandeep56Singh linked a pull request Sep 6, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed kind/enhancement New feature or request
Development

Successfully merging a pull request may close this issue.

2 participants