Convert Text to WebP

The drop-down lists 12 common fonts: 3 system stacks (sans-serif, serif, monospace) and 9 named fonts (Arial, Georgia, Times New Roman, Courier New, Verdana, Tahoma, Trebuchet MS, Impact, Comic Sans MS). System stacks always work because they pick whatever the OS has installed. Named fonts work only if the rendering machine has them – on a stripped Linux server, “Arial” might fall back to a generic sans-serif. For full control over typography, stick with the system stacks.

Yes – every label corresponds to a working control: font family drop-down, size slider (12-200 px), weight (normal/bold), text color picker, background color picker, transparency toggle, padding slider, alignment (left/center/right), line spacing multiplier, auto-fit toggle, manual W/H inputs, output format (4 options), quality slider. No “depending on the tool” hedging – they’re all there and they all work.

Lossy uses VP8 compression with the quality slider – smaller files but pixel-perfect detail is sacrificed. Lossless uses VP8L compression – keeps every pixel exact but files are bigger. For text-on-solid-background images (common output of this tool), lossless typically wins because text needs sharp edges and the file stays small. For text over photos, lossy compresses better.

The tool detects this at startup and shows an info toast warning you. Generate calls request WebP from the canvas; if the browser silently produces PNG instead, the output stats line shows “actual format = png” and the toast warns “Browser doesn’t support WebP encoding”. Affects very old Safari (pre-2020) and some niche browsers – Chrome, Firefox, Edge, modern Safari all support it natively.

Manual W/H locks the canvas to whatever you typed. If your text is wider than that, the right side gets clipped. Auto-fit (default) measures the actual text and sizes the canvas to match plus padding, so this can’t happen. Use manual mode when you need a specific output dimension (Twitter card, Open Graph image, fixed banner) and pre-size your text accordingly.

For each line, it asks Canvas’s measureText() for the rendered width at the current font spec, takes the maximum across all lines, adds 2× padding for horizontal margin. Vertical = line count × (font size × line-spacing) + 2× padding. Result is rounded up to the next pixel and capped at 4096 px in each dimension. The exact measurement matches what would be rendered.

JPEG has no alpha channel, so transparency is silently composited onto white. The stats line warns “JPEG has no alpha – composited on white” when this happens. For real transparency, pick WebP or PNG. Both support transparent backgrounds correctly.

4096 × 4096 px in each dimension. Beyond that, mobile Safari can crash and desktop browsers slow down significantly. Hit the cap and you get a specific error pointing to the limit. For most use cases (social graphics, banners, thumbnails) you’ll be well under it – Twitter cards are 1200 × 630, Facebook OG images are 1200 × 630, YouTube thumbnails are 1280 × 720, all well within bounds.

No. All rendering happens in your browser using Canvas toBlob(). Open DevTools → Network and confirm zero requests fire – even when you Generate or Download. Safe for proprietary brand text, watermark content, or anything you’d rather not send to a third-party converter.

Yes. Total bundle is about 25 KB. Load once, disconnect, keep generating. The rendering is pure Canvas API – no web fonts to fetch (system stacks work without network), no analytics, no remote calls. Useful for working on planes or anywhere a cloud-based image generator wouldn’t reach.