# Stickers

Drop sticker images into this folder. They'll be picked up automatically by the editor's Stickers tab on the next page load — there's no manifest to update and no constants file to edit.

## Filename convention

```
<category>__<sticker_name>.<ext>
```

The **category** comes before the double underscore. The **sticker name** comes after, with single underscores separating words.

A few examples:

| Filename                         | Category | Display name      |
| -------------------------------- | -------- | ----------------- |
| `hearts__pink_heart.png`         | Hearts   | Pink Heart        |
| `hearts__beating_heart.png`      | Hearts   | Beating Heart     |
| `paws__small_paw_print.png`      | Paws     | Small Paw Print   |
| `bones__dog_bone.png`            | Bones    | Dog Bone          |
| `pets__golden_retriever.png`     | Pets     | Golden Retriever  |
| `stars__sparkle.png`             | Stars    | Sparkle           |

The category and each word in the sticker name are title-cased when displayed (`pink_heart` → `Pink Heart`). Lowercase your filenames; capitalization is added automatically.

## Supported formats

- `.png` (recommended — transparency supported)
- `.webp` (transparency supported)
- `.jpg` / `.jpeg`
- `.svg`

PNG with transparency is the best choice for print-quality stickers. JPEG is fine for opaque art but doesn't blend onto colored shirts as cleanly.

## Sizing

There's no fixed size requirement. The editor places each sticker at 80×80 design units on add (the user can resize from there), and the print export renders the canvas at 4500×4500 pixels — so the sticker is scaled to roughly 1200×1200 px in the final print.

That math has consequences for source image size:

- **Small sources (under ~100px)** scale up heavily for print. A 47×47 PNG, for example, is upscaled ~25× to reach print resolution, which produces visible pixel-art / bitmap artifacts. If you *want* that look (deliberate retro / pixel sprites), it's fine. If you want crisp print output, source images should be larger.
- **For crisp print output**, aim for at least **600×600 px** sources (matches the print-scale target with room to spare). 1024×1024 is comfortable headroom; beyond ~2048×2048 you're wasting bandwidth without any visible gain.
- **Vector (SVG) sources** sidestep the issue entirely — they scale cleanly to any size. Recommended where the artwork allows it.

The editor preserves aspect ratio on add (the sticker scales to fit an 80×80 box, not stretched to fill it).

## Categories

Categories are derived from filenames — there's no fixed list. Adding a file with a new category prefix automatically adds the category pill to the Stickers tab. Removing the last file in a category removes the pill.

If you want a specific display order for categories, prefix them with a digit (e.g. `1-hearts__pink.png`, `2-stars__sparkle.png`); the leading digit + dash is stripped from the display name but used for sorting. Without prefixes, categories are listed alphabetically.

## A note on file size

Images here are bundled into the Vite `public/` directory and served as static assets. They are NOT processed by the build, so file size translates 1:1 to network cost. If your source images are heavy, run them through `pngquant` or `cwebp` before dropping them in:

```sh
pngquant --quality 75-90 --strip --output optimized.png input.png
cwebp -q 85 input.png -o output.webp
```

## Lazy loading

Sticker thumbnails use `<img loading="lazy">`, so only the stickers visible (or near-visible) in the panel are fetched. A library of 200+ stickers won't block the initial page load.