3.6 KiB
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:
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.