AP-028 Optimise oversized logo.svg asset

[pratigya245]

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

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]

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]

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.

[puniaruj]

Thanks for explaining, Pratigya. Keeping the optimised asset at /logo.svg is a reasonable implementation choice given the verified reduction from 4,088,062 to 33,834 bytes. I don't see a technical reason to require a true vector solely for its format after that improvement.

Keeping favicon integration in AP-015/#507 also makes sense and avoids duplicating work. Please add that scope explanation to this PR description, including the decision to retain the small embedded PNG, so Krisha can reconcile it with the original ticket wording. The favicon requirement should remain tracked through #507 until it is merged and verified.

That resolves my technical concern about the approach. From my first-pass review, the asset-size improvement is ready for Krisha's final assessment, with the scope clarification recorded. Thanks for following up.