> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sitecopilot.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Assets Pipeline

This page explains how to manage theme assets (images, fonts) and how to prepare them for production (hashing, CDN, cache headers).

## Source pipeline

1. Export assets from Figma (FireJet export) or collect originals into `themes/<theme>/assets/source/`.
2. Optimize images (resize, compress): use `sharp`, `imagemin`, or similar in your build pipeline.
3. Generate web fonts or include variable fonts; keep `woff2` for modern browsers and `woff` as fallback.

## Build & publish

* During the theme build, copy optimized assets to `dist/assets/` and compute content hashes (e.g., `logo.abc123.png`).
* Upload `dist/assets/` to your storage backend (S3, Backblaze, or a CDN origin).
* Set `Cache-Control: max-age=31536000, immutable` for hashed assets.

## Referencing assets in templates

* Use template helpers to render the public URL for an asset. Example helper usage in a template:

```html theme={null}
<img src="{{ asset_url('logo.png') }}" alt="Site logo" />
```

* If you use hashed filenames, `asset_url` should look up the current manifest (e.g., `assets-manifest.json`) created during the build.

## CDN & invalidation

* Push assets to CDN (CloudFront, Cloudflare, BunnyCDN).
* When deploying new assets, prefer versioned/hashed filenames to avoid needing invalidations; otherwise perform cache purges.

## Security & performance

* Serve assets via HTTPS and enable HSTS.
* Avoid embedding large base64 assets in HTML; prefer separate files with HTTP caching.
* Use responsive `srcset` for images to serve appropriate sizes per device.