perf(harmony): re-encode oversized rasters embedded in logo icons - #14565
Open
dylanjeffers wants to merge 1 commit into
Open
perf(harmony): re-encode oversized rasters embedded in logo icons#14565dylanjeffers wants to merge 1 commit into
dylanjeffers wants to merge 1 commit into
Conversation
Five of the 253 icons in harmony/src/assets/icons carry a base64 raster embedded by the Figma export rather than vector paths, at resolutions far beyond anything they render at. LogoCircle.svg was the worst: a 653x653 JPEG inside a 24x24 icon, 142 KB for something drawn at 24 CSS pixels. It is used for the AUDIO token icon, so it loads on the app shell. The rasters cannot simply be stripped -- they carry the artwork (the purple gradient), and the vector paths in the same file draw only the white mark. Removing the raster renders an empty circle. So each was re-encoded at roughly 4x its declared CSS size, which is retina plus headroom: AudiusLogoColor.svg 351.1 KB -> 26.6 KB LogoCircle.svg 142.0 KB -> 6.6 KB Soundwave.svg 65.7 KB -> 4.6 KB AudiusLogoHorizontalColorNew.svg 43.4 KB -> 32.2 KB AudiusLogoHorizontalColor.svg 34.0 KB -> 27.4 KB Each was rendered before and after at 120px and compared; they are visually identical. No markup or path data changed, only the embedded image payload. A lint rule rejecting `base64` under assets/icons would stop these recurring. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
1 of 4 in a stack reducing the web entry chunk. Independent of the others — safe to merge on its own.
What
Five of the 253 icons in
harmony/src/assets/iconscarry a base64 raster embedded by the Figma export rather than vector paths, at resolutions far beyond anything they render at.LogoCircle.svgwas the worst: a 653×653 JPEG inside a 24×24 icon — 142 KB for something drawn at 24 CSS pixels. It's the AUDIO token icon, so it loads on the app shell.~538 KB of source removed.
Why not just strip the rasters
That was my first attempt. The raster is the artwork — the purple gradient — and the vector paths in the same file draw only the white mark. Stripping it renders an empty circle. So each raster was re-encoded at roughly 4× its declared CSS size (retina plus headroom) instead.
Verification
Every icon rendered before and after at 120px and compared — visually identical. No markup or path data changed, only the embedded image payload.
Suggested follow-up
A lint rule rejecting
base64underassets/iconswould stop these recurring.🤖 Generated with Claude Code