Skip to content

Perf/image optimization phase#5365

Open
Mahitha-pasupuleti wants to merge 2 commits into
developmentfrom
perf/image-optimization-phase
Open

Perf/image optimization phase#5365
Mahitha-pasupuleti wants to merge 2 commits into
developmentfrom
perf/image-optimization-phase

Conversation

@Mahitha-pasupuleti

Copy link
Copy Markdown

Description

Compressed image assets throughout the repository to reduce the application's overall asset size and improve loading performance. Large PNG files were converted to more efficient formats (WebP or optimized JPG where appropriate), while preserving visual quality based on how each image is displayed within the application.

Images displayed at smaller dimensions were compressed more aggressively, whereas larger or detail-heavy images retained higher quality to maintain readability.

Screenshot 2026-07-03 at 11 54 41 AM

https://docs.google.com/document/d/1lZYJGWGjv8GQxU6nuIWbhIbBmy8S_GNqnJbT_RKD110/edit?tab=t.0#bookmark=id.n4ofx99xkyzb

Related PRs (if any)

None.

Main changes explained

  • Converted large PNG assets to optimized WebP formats where appropriate.
  • Reduced the overall size of image assets in the repository.
  • Applied higher compression to images displayed at smaller sizes in the application.
  • Preserved higher image quality for larger or detail-rich assets to maintain readability.
  • Updated image references where file extensions changed.
  • Verified that optimized images render correctly without noticeable visual degradation.

How to test

  1. Checkout the current branch.

  2. Run:

    npm install
    npm start
  3. Clear browser cache/site data to ensure updated images are loaded.

  4. Navigate through pages containing image assets (dashboard, profile, badges, landing pages, documentation, etc.).

  5. Compare image appearance against the current production/development version.

  6. Verify:

    • Images load successfully.
    • No broken image links.
    • No layout shifts caused by image replacement.
    • Readability of larger images is preserved.
    • Smaller images maintain acceptable visual quality.
  7. Verify the application in both light and dark modes.

Screenshots or videos of changes

Screen.Recording.2026-07-03.at.11.51.19.AM.mov

Note

This PR focuses on asset optimization only. No functional application logic was modified. The goal is to reduce repository size and improve application performance while maintaining the existing user experience.

@netlify

netlify Bot commented Jul 3, 2026

Copy link
Copy Markdown

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 9de1ea3
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a47e992471975000876f3e1
😎 Deploy Preview https://deploy-preview-5365--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@sonarqubecloud

sonarqubecloud Bot commented Jul 3, 2026

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant