Large Image Sizes and PNG Format Causing Performance Issues.

[Ashparshp]

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.

• See contributing instructions
• See Layer5 site designs in this Figma project.

[Mandeep56Singh]

@Ashparshp I would like to work on this

[Ashparshp]

Thank you @Mandeep56Singh, please go ahead.

[Mandeep56Singh]

@Ashparshp while running make site command
my build got stuck .

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]

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

[Mandeep56Singh]

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

[Ashparshp]

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

[Ashparshp]

Otherwise use GitHub Codespace.

[Ashparshp]

@Mandeep56Singh, Solved the setup?

[Mandeep56Singh]

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

[Mandeep56Singh]

@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]

@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]

@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]

@sudhanshutech, take a look please!!

[Ashparshp]

@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!