Build & Distribution

Production build files, asset breakdown, distribution options, and optimization tips.

Main Build Files

Imigi provides two build formats for different use cases.

UMD Build (dist-umd/) — Recommended for CDN/Script Tag

File	Size	Description
imigi.umd.js	1.15 MB	Main library (minified)
style.css	65 KB	Styles

Total code size: ~1.2 MB (~300–400 KB gzipped)

Use this build for:

• Direct <script> tag inclusion
• CDN distribution
• Non-bundled projects

<link rel="stylesheet" href="imigi/style.css">
<script src="imigi/imigi.umd.js"></script>
<script>
  Imigi.init({ selector: '#editor' });
</script>

ES Module Build (dist/) — For Bundlers

File	Size	Description
imigi.es.js	1.74 MB	ES Module (tree-shakeable)
style.css	65 KB	Styles

Use this build for:

• Webpack, Vite, Rollup projects
• Tree-shaking optimization
• Modern JavaScript projects

import Imigi from 'imigi';
import 'imigi/style.css';

Imigi.init({ selector: '#editor' });

Assets

Assets are loaded on-demand based on which tools are used. Users only download what they need.

Fonts (21 files)

Located in dist/fonts/.

Font	File
Aleo	aleo-v4-latin-ext_latin-700.woff2
Amatic SC	amatic-sc-v16-latin-ext_latin-regular.woff2
Bungee Inline	bungee-inline-v6-latin-ext_latin-regular.woff2
Carter One	carter-one-v12-latin-regular.woff2
Codystar	codystar-v10-latin-ext_latin-regular.woff2
Corinthia	corinthia-v7-latin-ext_latin-700.woff2
Fira Sans	fira-sans-v11-latin-ext_latin_cyrillic-regular.woff2
Fuzzy Bubbles	fuzzy-bubbles-v3-latin-700.woff2
Krona One	krona-one-v9-latin-ext_latin-regular.woff2
Kumar One Outline	kumar-one-outline-v8-latin-ext_latin-regular.woff2
Lobster Two	lobster-two-v13-latin-regular.woff2
Molle	molle-v11-latin-ext_latin-italic.woff2
Monoton	monoton-v10-latin-regular.woff2
Nixie One	nixie-one-v11-latin-regular.woff2
Open Sans	open-sans-v27-latin-ext_latin-regular.woff2
Permanent Marker	permanent-marker-v10-latin-regular.woff2
Roboto Slab	roboto-slab-v16-latin-ext_latin-500.woff2
Sancreek	sancreek-v13-latin-ext_latin-regular.woff2
Stint Ultra Expanded	stint-ultra-expanded-v10-latin-regular.woff2
TrashHand	TrashHand.ttf
VT323	vt323-v12-latin-ext_latin-regular.woff2

Filter Previews (27 files)

Thumbnail images for the filter selection UI. Located in dist/images/filter/.

Filter	File
Original	original.jpg
Grayscale	grayscale.jpg
Black & White	blackWhite.jpg
Sepia	sepia.jpg
Vintage	vintage.jpg
Polaroid	polaroid.jpg
Kodachrome	kodachrome.jpg
Technicolor	technicolor.jpg
Brownie	brownie.jpg
Sharpen	sharpen.jpg
Blur	blur.jpg
Emboss	emboss.jpg
Invert	invert.jpg
Brightness	brightness.jpg
Gamma	gamma.jpg
Noise	noise.jpg
Pixelate	pixelate.jpg
Remove Color	removeColor.jpg
Blend Color	blendColor.jpg

Frames (~100 files)

Decorative frame images for the frame tool. Located in dist/images/frames/.

Frame	Files
basic	thumbnail.png
art1	9 images (corners + sides)
art2	9 images
ebony	9 images
grunge1	9 images
grunge2	9 images
oak	9 images
pine	9 images
rainbow	9 images
walnut	9 images

Stickers (472 SVG files)

Emoji and shape stickers organized by category. Located in dist/images/stickers/.

Category	Count
Emoticons	~50
Doodles	~30
Shapes	~20
Arrows	~15
Other categories	~357

Brush Textures (14 files)

Brush pattern images for the drawing tool. Located in dist/images/brushes/.

Brush	Variants
circle	black, white
diamond	black, white
hline	black, white
pencil	black, white
spray	black, white
square	black, white
vline	black, white

Minimal Distribution

For a minimal installation, you only need the core files:

dist-umd/
├── imigi.umd.js    (1.15 MB)
└── style.css       (65 KB)

Total: ~1.2 MB (ungzipped)

Assets are optional and loaded on-demand. If you don't use certain features, you can omit their assets:

Feature Not Used	Assets You Can Omit
Text tool	fonts/ folder
Filter tool	images/filter/ folder
Frame tool	images/frames/ folder
Stickers tool	images/stickers/ folder
Draw tool	images/brushes/ folder

Full Distribution Size

Build	Size
dist-umd/	24 MB
dist/	29 MB

File Count Summary

Type	Count
JavaScript	1
CSS	1
PNG images	256
JPG images	27
SVG images	472
Font files	21
Total	~780

Build Commands

# Build ES Module (dist/)
npm run build

# Build UMD (dist-umd/)
npm run build:umd

# Build both
npm run build && npm run build:umd

CDN Usage

Host Imigi on a CDN for fast global delivery. Use the basePath option so the editor knows where to find on-demand assets.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.example.com/imigi/1.0.0/style.css">
</head>
<body>
  <div id="editor"></div>

  <script src="https://cdn.example.com/imigi/1.0.0/imigi.umd.js"></script>
  <script>
    Imigi.init({
      selector: '#editor',
      // Assets will be loaded from the same CDN path
      basePath: 'https://cdn.example.com/imigi/1.0.0/',
    });
  </script>
</body>
</html>

Optimization Tips

1. Gzip / Brotli Compression

Enable server compression to significantly reduce transfer size:

File	Original	Gzipped	Brotli
imigi.umd.js	1.15 MB	~350 KB	~280 KB
style.css	65 KB	~12 KB	~10 KB

2. Lazy Load Assets

Assets are loaded on-demand by default. Users only download what they use. No extra configuration is required.

3. Disable Unused Tools

Disable tools you don't need to prevent their assets from loading:

Imigi.init({
  selector: '#editor',
  tools: {
    crop: { enabled: true },
    filter: { enabled: false },     // Won't load filter thumbnails
    stickers: { enabled: false },   // Won't load sticker SVGs
  },
});

4. Self-Host Critical Assets

Host frequently-used assets on your own CDN for better caching control:

Imigi.init({
  selector: '#editor',
  basePath: '/assets/imigi/',
});