Image to Base64: when to use a Data URL
Convert small images into text for HTML or CSS, and decide when a separate image file is a better choice.
Encoding is not compression
Base64 represents binary data as text. It does not compress an image or convert it to another image format. A JPEG remains a JPEG after encoding; its pixel dimensions and original content do not improve. Base64 text is typically about one third larger than the original bytes, before adding the media type and protocol prefix. Embedding a large photograph solely for convenience can make a page unnecessarily heavy.
Three output modes
Data URL mode includes a prefix such as data:image/png;base64, followed by the encoded content. It can be used as an HTML image src. Raw Base64 mode includes only the encoded portion, for APIs that explicitly require it. Do not send a Data URL prefix to an API expecting raw Base64. CSS background mode produces a background declaration to place inside an existing selector; it is not a complete stylesheet.
Choose a small icon, check its name, size and preview, then select an output mode and copy the result. Open the destination page to confirm that the image displays. If an API rejects the value, first check whether it expects a file upload, a Data URL or raw Base64. These are different input formats.
File size and performance
The page accepts supported images up to 10 MB. That limit describes what the tool allows, not what will make a lightweight page. The browser may hold the original file, the encoded string and the displayed result at the same time. Larger files use more memory. Separate files are often easier to manage for galleries, multiple images and resources that should be cached independently.
If the same image appears on several pages, embedding it can repeat the data in every page. A separate image file can be reused from the browser cache. Consider a normal image path when you need responsive sizes, lazy loading or easy replacement later.
When the image does not display
Check that the MIME type prefix matches the file, then make sure copying did not truncate the string or introduce extra quotes. A site's Content Security Policy may block data: images even when the encoding is correct. SVG files can refer to external resources; encoding the SVG does not automatically bundle those dependencies. Avoid processing or embedding active content from an unknown source.
Keep the original image
The tool reads the file to generate its encoding without modifying the original. The encoded data still contains the original image bytes, potentially including metadata. Base64 does not remove location or camera information. Before publishing, check the image content, metadata and usage rights. Keep an original copy so you can resize, compress or correct the format later.