From eb7cb6b126ee90ec6f4c31141eaf065a9578deb9 Mon Sep 17 00:00:00 2001 From: Dylan Audius Date: Tue, 18 Aug 2026 16:27:46 -0700 Subject: [PATCH] perf(harmony): re-encode oversized rasters embedded in logo icons 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 --- packages/harmony/src/assets/icons/AudiusLogoColor.svg | 2 +- packages/harmony/src/assets/icons/AudiusLogoHorizontalColor.svg | 2 +- .../harmony/src/assets/icons/AudiusLogoHorizontalColorNew.svg | 2 +- packages/harmony/src/assets/icons/LogoCircle.svg | 2 +- packages/harmony/src/assets/icons/Soundwave.svg | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/harmony/src/assets/icons/AudiusLogoColor.svg b/packages/harmony/src/assets/icons/AudiusLogoColor.svg index cbb02a13354..6836156b187 100644 --- a/packages/harmony/src/assets/icons/AudiusLogoColor.svg +++ b/packages/harmony/src/assets/icons/AudiusLogoColor.svg @@ -4,6 +4,6 @@ - + diff --git a/packages/harmony/src/assets/icons/AudiusLogoHorizontalColor.svg b/packages/harmony/src/assets/icons/AudiusLogoHorizontalColor.svg index 42a62e45261..52b7c4060f0 100644 --- a/packages/harmony/src/assets/icons/AudiusLogoHorizontalColor.svg +++ b/packages/harmony/src/assets/icons/AudiusLogoHorizontalColor.svg @@ -1,4 +1,4 @@ Audius Logo - + diff --git a/packages/harmony/src/assets/icons/AudiusLogoHorizontalColorNew.svg b/packages/harmony/src/assets/icons/AudiusLogoHorizontalColorNew.svg index 7d1b4c456eb..9ba737421bf 100644 --- a/packages/harmony/src/assets/icons/AudiusLogoHorizontalColorNew.svg +++ b/packages/harmony/src/assets/icons/AudiusLogoHorizontalColorNew.svg @@ -1,4 +1,4 @@ Audius Logo - + diff --git a/packages/harmony/src/assets/icons/LogoCircle.svg b/packages/harmony/src/assets/icons/LogoCircle.svg index 72b208e894b..427016588aa 100644 --- a/packages/harmony/src/assets/icons/LogoCircle.svg +++ b/packages/harmony/src/assets/icons/LogoCircle.svg @@ -16,6 +16,6 @@ - + diff --git a/packages/harmony/src/assets/icons/Soundwave.svg b/packages/harmony/src/assets/icons/Soundwave.svg index 166ed074165..f55e9856036 100644 --- a/packages/harmony/src/assets/icons/Soundwave.svg +++ b/packages/harmony/src/assets/icons/Soundwave.svg @@ -9,6 +9,6 @@ - +