Skip to content

AP-028 Optimise oversized logo.svg asset - #561

Open
pratigya245 wants to merge 1 commit into
mainfrom
pratigya245/feature/ap-028-logo-optimization
Open

AP-028 Optimise oversized logo.svg asset#561
pratigya245 wants to merge 1 commit into
mainfrom
pratigya245/feature/ap-028-logo-optimization

Conversation

@pratigya245

Copy link
Copy Markdown
Collaborator

Summary

Optimizes the oversized logo.svg asset used in the Admin Panel sidebar.

Closes AP-028.

The problem

app-frontend/admin-panel/public/logo.svg was 3.9MB — a print-resolution PNG (2480×3508px) wrapped inside an SVG using a pattern/matrix transform, despite only ever being displayed at 36×36px in the sidebar. The transform math was also subtly cropping the logo, cutting off the "SECURE SHIFT" text banner at the bottom.

The fix

  • Extracted the embedded raster image
  • Cropped transparent padding around the actual logo content
  • Downscaled to 280×324 (still well above what's needed for retina display at 36px)
  • Palette-quantized the PNG for further compression
  • Rebuilt the SVG using standard <image> markup instead of the fragile pattern/matrix export artifact

Result

Before After
File size 3.9MB (4,088,062 bytes) 33KB (33,834 bytes)
Reduction 99.2%

As a side effect, the logo now renders in full (previously cropped) if reused anywhere larger than the sidebar icon.

Evidence

logo size

Checklist

  • Identify and diagnose the oversized asset
  • Optimize file size without visible quality loss at display size
  • Verify no other references to logo.svg needed updating

@puniaruj

puniaruj commented Sep 7, 2026

Copy link
Copy Markdown
Collaborator

Nice work on this optimisation. I reviewed the changed asset and verified the before-and-after result.
The main performance objective has been achieved: logo.svg was reduced from 4,088,062 bytes to 33,834 bytes, which is approximately a 99.17% reduction. The underlying raster was reduced from 2480×3508 to 280×324, the complete SecureShift logo is retained, and the existing /logo.svg sidebar reference remains valid. The PR is also focused on the intended asset and the Admin Panel lint workflow is passing.
I have one remaining scope clarification before the final review. The ticket requested replacing the embedded base64 asset with either a proper vector SVG or a right-sized PNG, but the new logo.svg still contains a base64-embedded PNG. It is significantly smaller, so the performance improvement is valid, but it does not fully remove the base64 wrapper described in the task.
The ticket also mentions verifying the favicon/browser-tab usage. The Admin Panel’s public/index.html currently has no favicon reference. Could you either:

  • commit the optimised image as a standalone PNG and update the sidebar/favicon references; or
  • confirm that favicon integration is intentionally covered by AP-015/PR Anglebird/feature/match shared UI #507 and clarify the AP-028 scope accordingly?
    Apart from that scope point, the optimisation itself looks correct and is a substantial improvement. Once it is clarified, I believe this will be ready for Krisha’s final review.

@pratigya245

Copy link
Copy Markdown
Collaborator Author

Nice work on this optimisation. I reviewed the changed asset and verified the before-and-after result. The main performance objective has been achieved: logo.svg was reduced from 4,088,062 bytes to 33,834 bytes, which is approximately a 99.17% reduction. The underlying raster was reduced from 2480×3508 to 280×324, the complete SecureShift logo is retained, and the existing /logo.svg sidebar reference remains valid. The PR is also focused on the intended asset and the Admin Panel lint workflow is passing. I have one remaining scope clarification before the final review. The ticket requested replacing the embedded base64 asset with either a proper vector SVG or a right-sized PNG, but the new logo.svg still contains a base64-embedded PNG. It is significantly smaller, so the performance improvement is valid, but it does not fully remove the base64 wrapper described in the task. The ticket also mentions verifying the favicon/browser-tab usage. The Admin Panel’s public/index.html currently has no favicon reference. Could you either:

  • commit the optimised image as a standalone PNG and update the sidebar/favicon references; or
  • confirm that favicon integration is intentionally covered by AP-015/PR Anglebird/feature/match shared UI #507 and clarify the AP-028 scope accordingly?
    Apart from that scope point, the optimisation itself looks correct and is a substantial improvement. Once it is clarified, I believe this will be ready for Krisha’s final review.

Thanks for the thorough review, Aruj.

On the base64 point, that was a deliberate choice, mainly to avoid touching anything outside the actual problem. The main issue was the 3.9MB asset loading on every sidebar render, so I focused on shrinking that without changing how /logo.svg is referenced elsewhere. A true vector or a split-out PNG would likely mean updating the sidebar import (and possibly other places), which felt like it might be outside what this ticket was asking for. That said, if there's a reason it should still be a proper vector, I'm happy to take another pass — just wanted to explain the reasoning first.

On the favicon — good catch, and I think this one's actually already handled in #507 (AP-015), which adds favicon.ico and the tag. It hasn't merged yet since it's still working through a rebase with Krisha, so I didn't want to duplicate that work here. Does it sound reasonable to keep AP-028 scoped to just the asset-size fix, and let #507 cover the favicon once it lands? Happy to help make sure it's verified when that happens.

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.

2 participants