Image to Base64
Choose a picture to get a ready-to-paste data URI and the raw Base64 string, plus how much bigger it becomes.
Este conteúdo está em inglês.
Drag an image here or choose one
Preview
Exemplos resolvidos
Encoding a PNG icon
A PNG icon uploaded
data:image/png;base64,iVBORw0KGgo followed by the rest of the encoded picture.
Every PNG starts with the same signature, so its encoding always begins with iVBORw0KGgo.
Encoding a JPEG photo
A JPEG photo uploaded
data:image/jpeg;base64,/9j/ followed by the rest of the encoded picture.
JPEG files begin with the same signature bytes, so the encoding begins with /9j/ after the data prefix.
Sobre Image to Base64
Base64 turns a picture file into plain text that can be pasted into code. A data URI adds a short prefix, so the text can be used directly as the source of an image tag or inside a style sheet, with no separate file to host. It is a common way to include small icons in HTML emails, single-file pages, JSON and API requests. It is useful whenever a tool or format only accepts text and you still need to include a picture.
Choose a picture and you get the full data URI and the raw Base64 string, each with its own copy button, plus one-click copies as an HTML image tag and a CSS background rule. A table shows the original size, the length of the text and the overhead. Base64 is about a third larger than the file it came from, which is worth knowing before you decide how big an image to inline. Everything is generated the moment you choose the file, and a small preview confirms you picked the right image.
Como usar Image to Base64
- Choose a picture or drag it onto the box.
- Read the size and overhead figures.
- Copy the data URI, the raw Base64, or a ready-made HTML or CSS snippet.
- Paste it into your page, style sheet or API request.
Usos comuns
- Inlining a small logo in an HTML email
- Embedding an icon in a single-file web page
- Sending an image inside a JSON request
- Adding a background image to a style sheet without another file
Perguntas frequentes
What is the difference between a data URI and raw Base64?
Raw Base64 is just the encoded text of the file. A data URI wraps that text in a prefix that names the file type, such as data:image/png;base64, so a browser knows what it is. Use the data URI in HTML and CSS, and the raw text for APIs.
How much bigger does Base64 make an image?
About 33 percent bigger, because every three bytes of the file become four text characters. The table shows the exact overhead for your file. Text in a page also cannot be cached separately, so it works best for small images.
How large an image should I inline?
As a rule of thumb, keep inlined images under about 10 KB, such as small icons and logos. Bigger pictures are better served as normal files, which can be cached and loaded in parallel. The page gives a hint once your file goes over 20 KB.
Does the conversion change my picture?
No. The bytes of your file are encoded exactly as they are, without resizing or recompressing, so decoding the text gives back an identical file. If you want a smaller result, compress or resize the image first and convert the smaller version.
Which image types are supported?
PNG, JPG, WebP, GIF, SVG, BMP, ICO and AVIF files up to 10 MB. The type is detected from the start of the file rather than its name, so a wrongly named file still gets the correct prefix. Other kinds of file are refused with a message.