Optimise images and icons for high-DPI Retina displays

[Mystery-CLI]

Background

FuTuRe is accessed by a significant proportion of users on high-DPI (Retina and equivalent) displays — including modern iPhones, Android flagship devices, MacBook Pro screens, and 4K desktop monitors. On these displays, standard 1x raster images (PNG, JPG, WebP) appear visually blurry or pixelated because the browser must scale them up to fill the physical pixel density. The application currently serves a single resolution for all raster assets, resulting in visually degraded icons and images on premium devices that users notice immediately.

Problem

The current single-resolution asset pipeline creates several user-facing and technical problems:

• Blurry icons on high-DPI screens. Any raster icon — including the application logo, asset logos (XLM, USDC, etc.), and informational graphics — appears noticeably soft on Retina and equivalent displays.
• Poor first impression on flagship devices. Users on high-end hardware associate visual fidelity with product quality. Blurry assets signal a lack of polish even when the underlying functionality is excellent.
• Inconsistent quality. SVG assets (already resolution-independent) look sharp, while raster assets look blurry. This inconsistency is particularly jarring when both appear on the same screen.
• No srcset or image-set in place. The application does not use srcset on <img> elements or image-set() in CSS backgrounds, so browsers cannot select the appropriate resolution even if multiple were available.
• Missed caching opportunities. By serving 2x images universally, some existing implementations waste bandwidth for 1x screens. A proper responsive image setup serves the correct resolution per device.

Proposed Solution

Export 2x and 3x variants of all raster assets used in the application and reference them using the browser's native responsive image mechanisms:

• For <img> elements: Add srcset attributes specifying the 1x, 2x, and 3x URLs with their respective density descriptors (e.g. srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x").
• For CSS backgrounds: Use the image-set() function to specify per-density URLs, falling back gracefully for browsers that do not support it.
• For icon components: Audit frontend/src/components/ for any raster icons not yet using responsive image techniques and update them.

The export process should be integrated into the build pipeline where possible so that new raster assets added in future automatically receive multi-resolution variants.

Implementation Steps

1. Audit all raster assets in frontend/public/ and frontend/src/assets/ to identify those lacking 2x/3x variants.
2. Export 2x and 3x versions of each asset from source files (Figma, Sketch, or raw source). For assets without source files, use image upscaling software as a temporary measure and note these for redesign.
3. Update all <img> elements referencing raster assets to use srcset.
4. Update CSS background-image declarations to use image-set() with appropriate fallbacks.
5. Add a note to the asset contribution guide stating that new raster assets must be provided at 1x, 2x, and 3x.
6. Verify rendering on a Retina display (or Chrome DevTools device emulation with DPR 2 and 3) before marking complete.

Acceptance Criteria

• All raster image assets are available in 1x, 2x, and 3x resolutions.
• All <img> elements referencing raster assets use srcset with density descriptors.
• All CSS background-image declarations referencing raster assets use image-set().
• Assets render without visible blurring on a display with DPR ≥ 2.
• File sizes for 1x displays are not regressed (1x browsers still load 1x assets).

Notes

SVG assets are already resolution-independent and do not require changes. Where SVG equivalents exist for raster icons, migrating to SVG is preferred over exporting multi-resolution raster variants — note any such candidates discovered during the audit.