Image to Base64: Data URIs, Size Impact, and Back Again

How to use the Image to Base64: Data URIs, Size Impact, and Back Again

1. Choose the imagesChoose up to 20 images, each up to 20 MB. PNG, JPEG, GIF, WebP, AVIF, BMP, ICO, TIFF, HEIC, and SVG are known by their bytes. The page shows a small picture, the type, the size in pixels, and the size of the file.
2. Pick the form that you needA data address goes into the src of an image or the url of a style. The HTML tag and the CSS rule are the same address, wrapped for you. Plain base64 is for an API, a JSON file, or an email. Copy it, or download it as a text file.
3. Check the costUnder each image the page says how many characters the base64 has, and how much more that is than the file. Base64 is about a third bigger, and the page or the style sheet that holds it is bigger by that amount. For an SVG, the address without base64 is usually shorter, and the page shows its length.
4. Go back from base64 to an imageChoose Base64 to image, and paste base64, a data address, or a piece of HTML or CSS that has one. The page shows the image, says what type it is from its bytes, notes anything that it put right, and lets you download it with the correct ending.

What base64 and a data address are

Base64, set out in RFC 4648, writes any bytes with 64 characters: the letters, the digits, plus, and slash, with an equals sign at the end as padding. Every 3 bytes become 4 characters, so the text is a third longer than the file. A data address, from RFC 2397, puts it in a form that a browser reads like a web address: data:image/png;base64, and then the text. It can go anywhere that an address can, such as the src of an image or the url of a style.

The type that comes after data: matters. A browser uses it to decide how to treat the bytes, so a JPEG that is labelled image/png is shown by most browsers, because they look at the bytes, but not by all programs, and an SVG that is labelled as a bitmap is not shown. That is why the page reads the type from the bytes of the file, and uses it in the address, and tells you when the name of the file or the type that your browser gives is different.

The size that it adds, and when to inline

Inlining an image saves one request, and it has costs. The base64 is a third bigger than the file, so a 30 KB image adds 40 KB to the page or the style sheet. The browser cannot keep the image in its cache apart from the document that holds it, so it is downloaded again each time that document is. And text that is a long line of base64 inside a style sheet blocks the rendering of the page until the whole sheet is loaded. For these reasons inlining is usually kept for small images, such as an icon or a one pixel spacer, and not for photographs.

The page does not tell you a number. It shows the cost for each image, as a count of characters and as a percentage, and leaves the choice to you. If the image is used on many pages, a file that is cached is usually the better choice. If it is used once, in a place where a request is expensive, such as an email or a single file, inlining is the way.

SVG without base64

An SVG is text, so it does not have to be written in base64 at all. A data address can hold the text itself, with only the characters that cannot stand in an address written as percent codes: the percent sign, the hash sign, the angle brackets, the double quote, braces, and the characters outside the ASCII range. That is usually much shorter than base64, which makes the text a third longer, and it is easier to read in a style sheet. The page offers it for each SVG, and it is the default.

The page removes the line breaks and the white space between tags, which an SVG does not need, and writes the double quote as %22 and not as another quote, so that an attribute that has a single quote inside it still means what it meant. Text inside the SVG, such as the words of a label, keeps its own spaces. The result was checked to read back to the same text.

What it puts right when you paste base64

Base64 that is pasted is often not exactly base64. Mail programs and tools wrap it in lines of 76 characters, and the line breaks are not part of it. Web addresses use a form with a minus sign and an underscore instead of the plus and the slash, and often leave out the padding. A text copied from an address may have its plus signs as %2B. The page reads all of these, and tells you which it fixed, so that you know the text was not clean. The strict reading, which accepts only the standard alphabet and padding to a length of a multiple of 4, is the one that the tests compare with Python.

A character that is not base64 at all, such as an exclamation mark or an accented letter, is not put right. The page says which character it is and where, in the text that you pasted. If one character is left over at the end, which cannot be a whole byte, it says that the text is cut off or has an extra character.

Telling what the bytes are

Every kind of image file starts with a few bytes that say what it is. A PNG starts with the byte 0x89 and the letters PNG, a JPEG with 0xFF 0xD8 0xFF, a GIF with GIF87a or GIF89a, a WebP with RIFF and WEBP, and the files of AVIF and HEIC have ftyp and a brand. The page reads these, and for the formats that can move, PNG, GIF, and WebP, it also looks inside to say whether the file is an animation. An animation is kept whole in the base64.

When the file name says one thing and the bytes say another, the address uses the bytes. A photo that was saved with the ending .png and is really a JPEG, which is common after an image has been renamed, is written as image/jpeg. If the bytes are not an image at all, the page says what they look like: a PDF, a ZIP archive, or text. HEIC is noted, because most browsers other than Safari do not show it, even from a data address.

How it was tested

The encoder was compared with Python's base64 module for 78 sets of random bytes, from none to 4,096 bytes and every length from 0 to 69, and with Node's Buffer for three random files up to 5 MB, and the text was the same for all. The reader was given 3,000 texts, made at random from the alphabet and from characters that do not belong in it, with and without padding, and cut or changed in places. It accepted and refused exactly the same ones as Python's b64decode with validation on, and gave the same bytes for the 726 that are valid.

Data addresses were read as the URL standard says, and compared with what fetch gives for the same address in Node, in 17 cases with upper case, spaces, parameters, percent codes, a fragment, no type, and no data: the same bytes and the same type every time. The image types were tested with files that Pillow made in nine kinds, including animated PNG, GIF, and WebP, AVIF, and HEIC, and each was told apart, with the animation. The SVG addresses were decoded and compared with the original text. The pages were not tried in every browser, and the pixels of the preview were not compared.

Limits and accuracy

• Images are read in your browser, and a file of more than 20 MB is left out. A very large base64 text is slow to copy, and the page shows only the start of it, though Copy takes all of it.
• The type is read from the first bytes of the file. A file that starts like an image and is damaged further on is still given the type of its start, and the browser may not show it.
• The sizes in pixels come from your browser, which decodes the image. A format that your browser cannot show, such as HEIC outside Safari, has no size or preview.
• A data address cannot be used everywhere. Some systems cut long addresses, email programs may block them, and a Content Security Policy that does not allow data: stops them from working.
• The data address of an SVG without base64 is for the places that take text, such as HTML and CSS. A system that wants a base64 payload needs the base64 form.
• Nothing you choose or paste is saved, so copy the text or download it before you close the page.

Frequently asked questions