Size589 × 452
ThemeMidnight
Longest line51 cols
Narrow columnToo small
A snippet turned into a picture, for a post, a slide, or a page that cannot run a syntax highlighter. Two things separate this from the tools people usually reach for: your code is tokenised and drawn in this page rather than posted to a server, and the output can be SVG — text, selectable, and sharp at any size — rather than only a flat PNG.
Step by step
01Paste the snippet
It is tokenised in the page as you type. Nothing is transmitted, which matters more here than in most tools — a snippet from work often carries an internal name, a table, or a key.
02Frame it
Window chrome and a filename give the image context; line numbers earn their place when the surrounding text refers to a line. Highlight lines to point at one without drawing an arrow.
03Watch the longest line
Width is set by the longest line, and a wider image is scaled down harder wherever it lands. The ledger converts that scaling into the size the code is actually read at.
04Take SVG for documents, PNG for posts
SVG stays sharp and stays text. PNG is what a social platform or an issue tracker will accept, at 1×, 2× or 3×.
Worked example
An image is scaled to the width of the column it lands in. Code has no redundancy to survive that, which a headline does.
Given
The same image in three columns
550px column scaled to 55% → 8.8px unreadable
400px column scaled to 40% → 6.4px a texture
300px column scaled to 30% → 4.8px a grey block
Cut the line to 48 characters and the image halves in
width, so nothing is scaled and the code stays at 16px.The width of a code image is set entirely by its longest line, and the scaling that follows is what destroys legibility — not the code size you chose. Wrapping one long line, or cutting the snippet down to the part you are actually talking about, does far more for readability than any theme or font decision. Aim for under 60 characters and the image will land at full size nearly everywhere.
Before you post it
Most code screenshot tools upload your code
Carbon renders on a server, so every snippet pasted into it is transmitted and processed remotely — and it has had no commits since December 2024. For a snippet carrying an internal endpoint or a table name, where the highlighting happens is not a detail.
SVG is the format nobody offers
A code image in documentation should be SVG: it stays sharp at any zoom, the text can be selected and searched, and it is a few kilobytes rather than a few hundred. Use PNG only where the destination will not take vector, which is most social platforms.
An image of code is not code
Nobody can copy it, search it, or read it with a screen reader, and it will not show a diff. Post the image for the look of a thing and link the real source alongside it — never use one as the only copy of something a reader may need to run.
Width is the only variable that matters
Theme, font and padding are taste. The longest line decides how wide the image is, how hard it gets scaled, and therefore whether it can be read at all. Everything else is downstream of that number.
Export at 2× for a screen
A 1× PNG looks soft on any modern display, because the screen has roughly twice the physical pixels the image supplies. Rendering at 2× and letting the platform scale it down gives crisp type; 3× is for print or a large presentation.
Highlighting here is lexical, not semantic
The tokeniser recognises comments, strings, numbers and keywords by shape rather than by parsing the language, so a keyword used as a property name is coloured like a keyword. At the size a code image is read this is invisible, and it is what keeps the page small enough to load instantly.
The judgement call
The destination decides, and it usually decides for you.
Documentation or a README
SVG
Sharp at every zoom, a fraction of the size, and the text stays selectable and searchable.
A post on X, LinkedIn or Mastodon
PNG at 2×
Social platforms do not accept SVG. 2× keeps type crisp after the platform re-encodes it.
A GitHub issue or pull request comment
PNG at 2×
GitHub renders SVG in Markdown inconsistently and strips styling from it. PNG is the reliable choice there.
A slide deck
SVG
It will be projected large, and vector is the only format that survives that without softening.
A blog post you control
Neither
Use a real code block with a highlighter. It is copyable, searchable, accessible, and smaller than any image.
Placing code on your own background
Transparent SVG
Turn the panel off and the code composites onto whatever surface you put it on.
Reference
FAQ
The Tinapps code to image tool tokenises and renders your snippet entirely in the browser, so the code is never transmitted. This is the main difference from Carbon, which renders server-side — worth knowing when a snippet carries an internal hostname, a table name, or a key.
The Tinapps code to image tool covers the same job with two differences that matter: your code stays in your browser rather than being sent to a server, and it exports SVG as well as PNG. Carbon has also had no commits since December 2024, so its language and theme sets are frozen.
Because the image is wider than the column it landed in and was scaled down to fit. The width comes from the longest line, so a snippet with a 96-character line is scaled to roughly 40% in a typical feed, taking 16px code down to about 6px. Cut or wrap the longest line rather than raising the font size.
SVG for documentation, READMEs and slides, because it stays sharp at any size, weighs a few kilobytes, and keeps the text selectable. PNG for social posts and GitHub comments, which either reject SVG or render it inconsistently — export those at 2× so the type stays crisp.
You can, but it is usually the wrong choice. An image of code cannot be copied, searched, read by a screen reader, or diffed, and it is far larger than the text it depicts. Use a real code block with a highlighter where you control the page, and save images for places that cannot run one.
Seventeen: TypeScript, JavaScript, Python, Rust, Go, Java, C#, C and C++, Ruby, PHP, Swift, Kotlin, Shell, SQL, JSON, YAML and plain text. Highlighting is lexical rather than a full parse, which colours comments, strings, numbers, keywords, types and calls correctly at the size a code image is read.
Your code is tokenised and drawn entirely in your browser and is never uploaded. Choosing a typeface fetches a font file from Google Fonts; the snippet is not sent with it.
Keep going
GitHub social preview
The card for the repository the snippet came from.
OG image generator
The preview image for the post you are embedding the snippet in.
JSON formatter
Format the payload before turning it into a picture.
Image compressor
Bring a 3× export down if a destination has a size limit.