Skip to main content
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:
<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.