Pick an image and copy it as a Base64 string, a data: URI, a CSS background or an <img> tag. Or paste Base64 to see and download the image. Free, and your file never leaves your browser.
No file yet.
Base64 makes a file about 33% bigger, and an inlined image can't be cached separately from the page. So inline only small things: icons, tiny logos, placeholders, and images inside HTML emails, single-file reports or JSON payloads. For anything over a few KB, a normal image URL is faster. This tool shows the encoded size so you can judge.
The Shotmint API renders any URL or HTML in real Chromium and returns a PNG, JPEG or WebP. Pipe it through base64 to get a data URI for an email, a report or an AI model that takes images as Base64:
echo "data:image/png;base64,$(curl -s "https://shotmint.creasework.com/v1/screenshot?url=https://example.com&width=1200&height=630" -H "X-API-Key: YOUR_KEY" | base64 | tr -d '\n')" > shot.txt
In Node, the same thing is Buffer.from(await res.arrayBuffer()).toString('base64'). Each render is 1 credit. €5 buys 2,000 with no subscription, and credits never expire.
Get 100 free renders Read the docs
Is my image uploaded? No. The browser reads the file locally and encodes it. Nothing is sent to a server.
What is the difference between Base64 and a data URI? Base64 is just the encoded bytes. A data URI adds the type in front (data:image/png;base64,) so browsers can use it anywhere a URL goes: src, url() in CSS, or the address bar.
Do data URIs work in email? Many webmail clients, including Gmail, block data: images. For email, attach the image with a Content-ID (cid:) or host it at a URL.
Should SVG be Base64? Not always. For CSS, a URL-encoded SVG (data:image/svg+xml,%3Csvg...) is usually shorter than Base64. To turn an SVG into a PNG first, use the SVG to PNG converter.
Related: SVG to PNG converter, color palette extractor, HTML to image, favicon generator, website thumbnail generator.