Image Info / Base64

The Image Info / Base64 tool does two things. It reads the file name, size, type and pixel dimensions of an image you choose, and it converts the image into a Base64-encoded data URL that you can embed directly in a web page, a stylesheet or a JSON file instead of keeping a separate image file. It does not compress, crop or modify the image, and it does not read EXIF metadata such as shooting time or camera model. Base64 is only a text representation, and it makes the data larger, so it suits very small icons rather than large pictures.

How to use it

1. Click the dashed box 'Click to upload an image' and pick a picture in the file dialog. The chooser filters for image files that your browser can recognise.
2. Once it has loaded, the page shows a preview (shrunk to at most 240 pixels tall, not full size) and four cells: 'File name', 'Size', 'Type' and 'Dimensions'. Dimensions appear as width × height in pixels.
3. Next to the Base64 heading are two copy buttons. 'CSS background:' copies the whole CSS line background-image: url(…); and 'Raw encoding:' copies the complete data URL, the long text that starts with data:image/…;base64,.
4. The read-only box below shows the full Base64 text. You can't edit it there. To use a different image, click the upload box and choose another file.

A worked example (actually computed)

We built a real 1×1 pixel red PNG, which is 69 bytes. Uploading it shows Size as '0.1 KB' (69 divided by 1024, to one decimal place), Type as image/png, Dimensions as 1 × 1, and a data URL of data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC, which is 114 characters long. The size rule: Base64 encodes every 3 bytes as 4 characters, so the text is about four thirds the size of the file, plus a prefix of 22 characters for data:image/png;base64,. For a 30,000-byte file (shown as 29.3 KB), the Base64 part is 40,000 characters and the whole data URL is 40,022 characters. These figures were calculated, not estimated.

What it supports and where it stops

• Size is shown in KB with one decimal place below 1 MB, and in MB with two decimals from 1 MB upward; a file under about 0.05 KB shows as 0.0 KB.
• Type is taken straight from the browser. When the browser cannot determine the type, it shows 'Unknown'.
• Dimensions are pixel width and height, not print size, and no DPI is shown. If the browser can't decode the image, an alert says 'Failed to read the image, please try a different one'.
• There is no size limit, but a very large image (several megabytes or more) produces extremely long text, and the text box and copy action get slow and the page may stall. Base64 is not suitable for large images; use it for small icons and small pictures.
• The data URL always contains the image in its original format. The tool does not convert formats (for example PNG to JPG) and does not decode Base64 back into an image file.
• One image at a time. There is no batch mode and no option to copy an <img> tag.
• EXIF, GPS and colour-profile metadata are not read.

FAQ: When is a Base64 image a good idea?

For very small images: icons inside CSS, a logo in an email template, or cases where everything must live in a single HTML or JSON file with no extra request. The data grows by about a third and can't be cached separately by the browser, so for large images Base64 usually costs more than it saves.

FAQ: What is the difference between the two copy buttons?

'Raw encoding' copies the complete data URL, which can go straight into an <img> src attribute or a CSS url(). 'CSS background' wraps it in background-image: url(…); so it can be pasted directly into a stylesheet. If special characters or parentheses in your data URL confuse your CSS, wrap the url() content in quotes by hand.

FAQ: Why do the dimensions differ from what my system shows?

The tool reports the pixel size after the browser has decoded the image. Most browsers apply the rotation stored in a photo, so a portrait photo from a phone can have its width and height swapped compared with the raw sensor size that some software displays.

FAQ: Can I turn Base64 back into an image?

This tool doesn't do that. A data URL can, however, be pasted into the browser's address bar or used as an image src, and the browser will display it as a picture.

Privacy and processing

The image is read and converted locally by your browser. The code makes no network requests, so the picture is not uploaded to a server and not stored. The preview and the encoded text disappear when you close or reload the page.