Image to Base64 Encoder
Convert an image to a Base64 data URL, CSS background, HTML img tag, or Markdown image.
Written by Anil Gautam · Updated
How much larger is an image in Base64?
Base64 writes every 3 bytes of the file as 4 text characters, so the encoded length is 4 x (file size / 3), with the division rounded up. Data URLs add a prefix naming the file type, and data:image/png;base64, is 22 characters. A 12,000-byte PNG (shown as 11.7 KB) becomes 16,000 Base64 characters, and the button on the Data URL row reads Copy full (16022 chars). The CSS version of the same image is 16,048 characters.
That growth of about a third is the main cost. A data URL also travels inside the page or stylesheet that holds it, so the browser cannot cache it on its own: an icon embedded in the HTML of ten pages is downloaded ten times.
Which of the five outputs should you copy?
Data URL is the full string for anything that expects an image address, such as an img src, a JavaScript variable or a JSON field. CSS background-image is a complete declaration, quotes included, ready to paste inside a rule. HTML img is a whole tag whose alt text is your file name; replace that with a short description of the picture, or leave alt empty for purely decorative images. Markdown image uses the file name as alt text too.
Raw Base64 only is the part after the comma, for APIs and config files that ask for Base64 content and take the file type separately. Each preview box shows the first 400 characters followed by three dots, so always copy with the button; text selected in the box would be cut short. Base64 uses only letters, digits, +, / and =, so the string sits inside JSON or a JavaScript string without escaping.
Is the image uploaded, and what are the limits?
The file is read by your browser's FileReader and never uploaded. One image is handled at a time, and Pick a different image clears the result. The type in the prefix comes from what your system reports for the file, so it reads image/svg+xml for an SVG and image/jpeg for a JPG.
Large photos make unwieldy strings: a 3 MB photo becomes more than 4 million characters, which slows editors and bloats pages. For those, link to the image file and compress it first with Image Compressor. To encode plain text, use Base64 Encode/Decode, and to wrap an image in an SVG file, Image to SVG Converter embeds the same kind of data URL.