Image Tools
Image to Base64 · 1 tools
This category currently holds one tool: a converter between image files and Base64 data URLs. It is the smallest category on the site, and the tool answers a question that comes up in every front-end project — when does inlining an image into the HTML or CSS actually help?
The short answer is: for small icons and generated images, and almost never for photographs. A data URL participates in the document it lives in, so it cannot be cached separately, it inflates the HTML by roughly a third, and it blocks rendering until the document carrying it has been downloaded.
When should I inline an image?
- Inline it when the asset is small (a few hundred bytes to about 2 KB), used on exactly one page, and keeping the request count down matters — a favicon, a spinner, a tiny logo, a generated placeholder.
- Keep it as a file when it is used on more than one page, when it should be cached independently, or when it is larger than a couple of kilobytes. The extra request is cheaper than the extra bytes on every page load.
- Watch the format: Base64 does not compress, so the encoded size is about 4/3 of the original. JPEG and WebP are already compressed, so their data URLs are large; SVG inlines comparatively well because it is text.
All tools in this category
Guides in this category
FAQ
Why does Base64 make my image bigger?
Because 64 printable characters are used to carry 6 bits each, while the original file stores 8 bits per byte. Every 3 bytes become 4 characters, an increase of exactly one third, plus padding. Base64 also does not compress, so the growth is on top of the original size.
Will a data URL image be cached?
Not on its own. The browser caches the HTML or CSS document that contains it, so the encoded bytes are re-downloaded every time that document is. A separate image file, by contrast, is fetched once and reused across pages and visits.
Which image formats can be converted?
Anything the browser can decode — PNG, JPEG, WebP, GIF, SVG, BMP and AVIF in current browsers. The conversion happens locally and the file is never uploaded, so the practical limit is your available memory rather than a server-side size cap.