Using image data URLs
Normally a web page loads each image as a separate file. Base64 lets you turn an image into a string of text and put it directly inside your HTML, CSS or JSON instead. The browser decodes it on the spot, so the image needs no extra HTTP request. This tool reads the file in your browser and never uploads it.
Which format should I copy?
- Data URI: the full
data:image/png;base64,…string. Works anywhere a URL does, such as ansrcattribute or a CSSurl(). - Base64 only: just the encoded data with no prefix. Use it when an API or JSON field asks for the Base64 content and stores the file type separately.
- CSS background: a ready-made
background-imagedeclaration. - HTML img tag: an
<img>element with width and height set to the image's real dimensions, which stops the layout jumping while the page loads. Fill in thealttext to describe the image.
When it is worth it
Base64 makes data about 33% larger, and an inlined image cannot be cached on its own: it is downloaded again every time the file that contains it changes. That makes it a good fit for small things like icons, simple logos, loading spinners and tiny background patterns, roughly under 10 KB. It is also handy for single-file HTML emails or reports, and for sending an image inside a JSON payload. For photos and anything large, a normal image file is faster.
SVG is a special case
SVG files are already text, so they can go into a data URI without Base64 at all, just URL-encoded. The result is usually smaller and still readable. When you load an SVG, this tool offers that version too. Inline <svg> markup in HTML is another option if you need to style the image with CSS.
