Convert Numbers to Image
Render any number or text as a PNG / JPEG with custom font, color, alignment, bold. DPR-aware. Free, offline, client-side.
Render a phone number, code, ID, or any short string as a single-line PNG or JPEG image. DPR-aware rendering for crisp Retina output. Shrink-to-fit auto-reduces font size when the text would overflow; toggle to truncate-with-ellipsis or allow overflow instead.
How to Use Convert Numbers to Image
- Type your input. Most common: a phone number, account ID, code, or short numeric string. The default
12345demonstrates the tool immediately. - Pick typography. System Mono is default - characters align consistently which is what most number-display cases want. For phone numbers, mono looks cleanest; for codes shown in a doc, switch to Georgia or Times.
- Set the font size (12-200 px) and toggle Bold / Italic. The "Shrink to fit" overflow mode will auto-reduce your chosen size if the text doesn't fit the canvas width - the stats line shows the actual final font size.
- Pick alignment. Left is for label-style use. Center (default) for badge / watermark style. Right for right-aligned columns.
- Set canvas dimensions - width 100-2000 px, height 50-1000 px. Default 800×200 fits most use cases. Adjust padding (0-100 px) to keep the text away from edges.
- Pick the overflow mode. Shrink keeps the full text visible by reducing font. Truncate cuts with an ellipsis. Allow overflow keeps your set font and lets the text extend beyond the canvas (will be clipped on render).
- Pick PNG or JPEG. PNG is lossless and best for text. JPEG with quality slider works if you need a smaller file but introduces ringing artifacts around letters below ~80% quality.
- Copy or Download. Copy Image puts the bitmap on your clipboard (PNG fallback if JPEG can't be pasted). Download saves
numbers.pngornumbers.jpg. Reset restores default options without clearing your input.
Frequently Asked Questions
Why use a “numbers to image” tool instead of just typing?
Three main reasons: (1) Anti-scraping – public phone numbers / emails / IDs displayed as images can’t be easily harvested by bots. (2) Visual designs – watermarks, badges, invoice serial numbers. (3) Cross-platform consistency – an image renders identically on every device, while live text depends on the viewer’s font availability.
How does “shrink to fit” work?
Binary search on font size. The tool measures the text at your chosen font size; if it overflows, it tries half the size; if it fits, it tries 75%; and so on until it finds the largest size that fits the canvas width minus padding. Final size shows in the stats line. Always ≥ 12 px (minimum readable).
Why is the preview crisp on Retina displays?
The canvas backing store is scaled by window.devicePixelRatio (capped at 3×). A 800×200 logical image renders into a 1600×400 buffer on a 2× display, then CSS shrinks the displayed size back. So text edges stay sharp instead of looking pixelated. Older tools that ignore DPR produce blurry text on the same Retina machines.
What about transparent backgrounds?
The color picker doesn’t expose an alpha channel – backgrounds are solid color. Workaround: pick a background color that matches your destination surface, then no extra editing needed. For true transparency, generate with white background and use an image editor to remove it.
Can the input contain letters?
Yes – the input field accepts any text. The tool name says “numbers” because that’s the common case, but it renders any string. Useful for short IDs that mix letters and digits (ORD-2024-A5B3).
What’s the maximum image size?
Width 2000 px, height 1000 px (logical). With DPR=3, the actual backing-store is up to 6000×3000 px which is fine for any browser. Larger sizes would risk hitting browser canvas memory limits.
Why are bold and italic separate toggles?
So you can use them independently. Bold alone is common for emphasis. Italic alone is rare but useful for “this number is a variable / reference”. Both together also works (bold italic). Both off is the default.
When should I pick JPEG over PNG?
Almost never for text. PNG is lossless – the text edges stay perfectly sharp. JPEG introduces compression artifacts that show up as ringing/halos around letters, even at 95% quality. Pick JPEG only if file size matters more than visual quality AND the rest of the image is photographic.
Is my data uploaded?
No. All Canvas rendering, font measurement, and image encoding happens in your browser. Open DevTools → Network and confirm zero requests fire after the page loads. Safe for sensitive numbers like account IDs, internal codes, or proprietary serial numbers.
Does it work offline?
Yes. Total bundle is under 22 KB. Once loaded, disconnect and keep generating images. Useful for prepping printable codes or watermarks in air-gapped environments.