Asset Optimization Strategies
Relevant source files
The following files were used as context for generating this wiki page:Asset optimization in the branding repository ensures that all logo and icon assets are delivered in the most efficient, accessible, and high-quality formats possible. The system processes editable SVG masters into optimized vector files and multiple raster resolutions to support various platforms, including web, mobile, and desktop environments.
The optimization pipeline relies on Node.js 24+, using svgo for vector minification and sharp for high-performance image processing. The strategy prioritizes outlined lettering over live text to eliminate font dependencies and maintains high-density rendering for sharp raster output.
Sources: README.md:58-62, package.json:11-16
Vector Optimization Pipeline
The vector optimization process cleans and minifies SVG files while preserving visual integrity. The pipeline enforces strict rules on the input files to ensure they are production-ready.
SVG Sanitization and Minification
The system uses a conservative svgo configuration. It removes editor overhead and document metadata without altering coordinate precision or path transforms.
- Metadata Removal: Deletes
doctype, XML processing instructions, and comments. - Attribute Cleanup: Converts styles to attributes and simplifies colors to reduce file size.
- Structural Integrity: The configuration explicitly disables multipass and coordinate rounding to prevent visual distortion.
Sources: scripts/svgo.config.ts:6-21, scripts/generate-assets.ts:109-114
Outline Enforcement
The generate-assets.ts script validates that input SVGs do not contain <text> elements. Using outlined lettering ensures the branding renders correctly on systems where the brand font (Manrope) is not installed.
Sources: scripts/generate-assets.ts:106-107, README.md:31-33
ViewBox Normalization
For favicon generation, the system creates square viewports. The squareSvg function identifies the largest dimension (width or height) and expands the SVG viewport to create a 1:1 aspect ratio while keeping the artwork centered and internal proportions intact.
Sources: scripts/generate-assets.ts:31-48
Rasterization and Multi-Format Generation
The pipeline generates PNG and ICO files from optimized SVGs using specific scaling strategies to ensure high visual quality at small and large sizes.
High-Density Rendering
To avoid aliasing artifacts, the system renders vectors at high resolution before downsampling. It calculates a rendering density that is at least twice the target resolution or a minimum of 144 DPI.
Sources: scripts/generate-assets.ts:145-151
Multi-Resolution ICO Structure
The system generates favicon.ico files containing multiple independent RGBA PNG frames (16x16, 32x32, and 48x48 pixels).
Sources: scripts/generate-assets.ts:51-68, scripts/generate-assets.ts:167-168
Asset Processing Flow
The following diagram illustrates the lifecycle of an asset from the source/ directory to the assets/ and dist/ directories.
This diagram shows the sequential processing of vector assets into optimized distributions.
Sources: scripts/generate-assets.ts:74-188
Configuration and Management
Asset generation is controlled by a central configuration file, which defines the dimensions and variants required for the project.
Global Export Settings
The export.config.json file determines the output directories and the specific resolutions generated by the pipeline.
| Configuration Key | Description | Default/Example |
|---|---|---|
assetsOutput | Directory for optimized SVG files | assets/ |
output | Directory for raster and favicons | dist/ |
iconSizes | Array of pixel sizes for icon PNGs | [128, 256, 512] |
logoWidths | Array of pixel widths for logos | [600, 1200] |
variants | Maps variant names to source paths | light-background, dark-background |
Sources: export.config.json:1-20, scripts/types.ts:1-7
Asset Inventory and Validation
Every execution of the optimization script generates an AssetManifest. This JSON file tracks the exportedAt timestamp and metadata for every generated file, including dimensions and formats.
The script also performs "obsolete file removal." If a size or variant is removed from the configuration, the script identifies and deletes the corresponding files in the output directories to prevent stale assets from being published.
Sources: scripts/generate-assets.ts:184-219, scripts/types.ts:19-22
Variant and Asset Relationships
This diagram defines the data structures used to catalog optimized assets and their relationship to background variants.
Sources: scripts/types.ts:1-22
Typography and Color Consistency
Optimization strategies include maintaining strict adherence to the brand's visual identity during the preview generation process.
Color Palette
The following colors are standardized across all optimized assets and are used in the automated preview generation.
| Element | Hex Color |
|---|---|
| Wallet / Light Wordmark | #000000 |
| Card Body | #0785BC |
| Chip Primary | #FAC965 |
| Chip Divisions | #94712D |
| Background (Dark) | #171C24 |
Sources: README.md:46-53, scripts/create-preview.ts:18-24
Preview Layout Generation
The system generates a preview.png that acts as a reference sheet. It composites various layers including logo treatments, header sizes (28px), and favicon previews on specific background colors to verify visibility across different UI contexts.
Sources: scripts/create-preview.ts:35-55
Conclusion
The asset optimization strategy for FOSSBilling Branding automates the conversion of complex vector artwork into high-performance, font-independent web assets. By combining strict SVG sanitization via svgo with high-density rasterization via sharp, the project ensures that branding remains crisp and consistent across all digital touchpoints while minimizing manual intervention.