Performance audit finding · Severity: Medium · Effort: Easy · Fix risk: Simple · Test safety net: Uncovered
Owner: @MetaMask/predict
File: app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx:108

What is this about?

PredictGTMModal uses app/images/predict-marketing.png as a full-screen background image. The source PNG is 4096 x 3175 px and ~1.85 MB on disk (largest raster asset in app/images), but it is displayed at roughly screen width (width: screenWidth * 1.07 in PredictGTMModal.styles.ts:53). Even on a 3x device (~1290 px wide), a 4096 px-wide bitmap is ~2-3x larger than needed in each dimension, forcing the decoder to allocate and downscale a ~13 megapixel bitmap (~52 MB uncompressed at 4 bytes/px) when the modal opens.

Why it matters

Oversized raster decode causes a memory spike and a noticeable decode hitch the moment the GTM modal is presented (a user-facing, animated surface — animatedStyle at line 104). It also inflates the app bundle. A properly sized asset (target the max display resolution, e.g. ~1290 px wide at 3x) cuts decode memory and bundle size dramatically with no visual change.

Scenario

N/A — see Technical Details.

Design

N/A — internal performance change; no UI/design impact.

Technical Details

Evidence

app/images/predict-marketing.png — sips reports pixelWidth: 4096, pixelHeight: 3175, file size ~1,852,174 bytes.
app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx:108

import PredictMarketingImage from '../../../../../images/predict-marketing.png';
...
<Image source={PredictMarketingImage} style={styles.backgroundImage} />

app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.styles.ts:53

backgroundImage: {
  width: screenWidth * 1.07, // 7% wider for edge coverage
  ...

Fix

Re-export predict-marketing.png at the maximum needed display resolution (e.g. ~1290 px wide for 3x, or provide @2x/@3x variants) and compress (pngquant/oxipng or convert to WebP). This is a pure asset swap — no code change beyond optionally adding density suffixes.

Threat Modeling Framework

N/A — performance-only change; behavior is preserved, no new data flow / trust boundary / attack surface.

Acceptance Criteria

• • Re-run sips -g pixelWidth app/images/predict-marketing.png to confirm the reduced dimensions and check the on-disk size drop.
• Open the GTM modal on a mid-tier Android device and confirm the present animation no longer hitches; compare native memory before/after in the profiler.

References

• File: app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx:108
• Source: MetaMask Mobile performance audit — finding image-predict-gtm-modal-oversized-decode
• Owner (CODEOWNERS / best-effort): @MetaMask/predict
• Status: UNVALIDATED