Convert image to Base64

What is a Base64 data URL?

Base64 writes the bytes of an image as plain text using 64 safe characters. A data URL adds a short prefix with the image type, such as data:image/png;base64, so the image can sit inside HTML, CSS or JSON instead of being a separate file.

How to convert an image to Base64

Open the Image to Base64 tab and drop a JPG, PNG, WebP, GIF or SVG. The full data URL appears straight away. Copy it and paste it into an img src attribute, a CSS background-image url(), or a JSON field. The image bytes are encoded exactly as they are, with no resizing or recompression.

Convert Base64 to an image

Open the Base64 to Image tab and paste a data URL or a raw Base64 string. You get a preview and can download the image file. This is handy for checking what an API response, a database field or an email source actually contains.

When inline images make sense

Base64 text is about 33% larger than the image file, and inline images can't be cached separately by the browser. Use data URLs for small icons, email templates that must not load remote images, and single-file HTML documents. For photos and large graphics, a normal image file keeps pages lighter.

Before you start

Input: JPG, JPEG, PNG, WEBP, GIF, and SVG. Output: Base64. The settings appear before anything runs, so you can check them first. Your original file is never changed.

Pick the size and quality for where the image will end up. Resizing before strong compression usually keeps more visible detail. Keep an untouched original so you can export again later.

Keep the original until you have opened and checked the result. The work happens in this browser tab, so the size you can handle depends on your device's memory, your browser and the file itself.

How to convert image to Base64

1. Open the Image to Base64 tab and drop an image to get its data URL.
2. Copy the data URL into your HTML or CSS.
3. Or open the Base64 to Image tab and paste a string to decode it.
4. Check the preview and download the image.