How to Convert an Image to Base64 (and When Not To)

October 17, 2026 • NOFYI Editorial Team

Converting an image to Base64 means turning the binary image file into a long text string that can be placed directly inside HTML or CSS. The result is called a data URI. Instead of linking to a separate image file, the page carries the image data inside the code itself. This can be useful for a tiny icon, but it is a poor choice for a large photograph. This guide explains what Base64 conversion is, how to do it step by step, how to use the result safely, and when not to use it.

Start with the basic idea. A browser normally loads an image by requesting a separate file, such as logo.png. When you convert that image to Base64, you replace the file reference with the encoded text of the image. The browser decodes the text and shows the image. The image still takes up space, but the space is now inside the HTML or CSS file instead of in a separate image file. That trade-off is the key to the whole topic. You save a separate request, but you make the page file larger and harder to cache and maintain.

What Is Base64 and What Is a Data URI

Base64 is a way to represent binary data using only letters, digits, and a few safe symbols. It groups the binary data into chunks and maps each chunk to a text character. Because the output uses only text characters, it can be copied into code, sent in a text-based format, or embedded in a document without the problems that raw binary data would cause. Base64 is not encryption and it is not compression. Anyone who sees the string can decode it back to the original image. It does not hide the image, and it does not make the image smaller. In fact, it makes the data larger.

A data URI is the full string you place in your code. It starts with the word data, followed by the image type, the word base64, a comma, and then the encoded text. A simple example for a PNG looks like this: data:image/png;base64, followed by the encoded characters. In an img tag, you would write the data URI where you would normally write the file path. In CSS, you would write it inside a url() value. The browser reads the prefix to learn what kind of image it is, then decodes the rest. If the prefix is wrong, the image will not display, even if the encoded data is correct.

The size cost is important. Base64 encoding expands data by about 33 percent. That is because every three bytes of binary data become four characters of text. A 3-kilobyte icon becomes about 4 kilobytes as Base64. A 300-kilobyte photograph becomes about 400 kilobytes as Base64. That extra size is carried in every page load, and it cannot be cached separately from the page. For a tiny icon, the extra kilobyte may be acceptable. For a large photograph, the extra cost is hard to justify.

How to Convert an Image to Base64

Use a method you trust and keep the original file. The steps below describe the general process. The exact menu or command depends on the tool you use.

Choose a small image. Pick a tiny icon, a small logo, or a simple graphic that is already only a few kilobytes. Do not start with a photograph or a large banner.
Keep the original. Save a copy of the original image file before you convert it. You will need it if you later decide to use a normal file reference instead.
Convert with a trusted tool. Use an image editor, a converter you trust, or a command-line tool on your own computer to convert the file to Base64. Avoid pasting sensitive images into random online converters, because the image is uploaded to someone else’s server.
Check the output. The result should be one long text string. It should start with the correct image type for your file, such as image/png for a PNG file or image/jpeg for a JPG file. If the type does not match the file, fix it.
Build the data URI. Place the prefix data:image/png;base64, followed by a comma, followed by the encoded string. Use the correct type for your image. Do not add line breaks inside the string.
Test in a browser. Paste the data URI into a test page or a test CSS file, open it in a browser, and confirm the image appears at the right size. Test on a phone as well, because a tiny icon can look blurry if it is scaled up.
Check the page size. Compare the size of the page before and after the change. If the page file grows by more than a small amount, reconsider whether the image should be inlined.
Keep the code readable. A data URI can be hundreds or thousands of characters long. Do not paste a huge string into the middle of a page you need to edit often. If the string is long, the image is probably too large to inline.

If you are a developer, you can also generate the string with a small script or a built-in tool in your editor. The method matters less than the checks: correct image type, correct encoding, a test in a browser, and a page-size check. If any check fails, use a normal image file instead.

Worked Example: A 1×1 PNG

Here is a complete worked example using the smallest possible image: a one-pixel-by-one-pixel transparent PNG. This example is useful for learning, because the string is short enough to read and test. It is not meant as a recommendation to use one-pixel images in production pages.

Step 1: Understand the image. A 1×1 PNG is one transparent pixel. It is tiny, and it is a useful test case because it shows the full data URI pattern without a huge string. In real work, you would use a small icon, not a single pixel, but the steps are the same.

Step 2: The Base64 string. The Base64 encoding of a standard 1×1 transparent PNG is: iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAwMCAO+ip1sAAAAASUVORK5CYII= That string represents the whole image. It is about 88 characters long. It is not a picture you can read by eye. It is a text encoding that a browser can decode.

Step 3: Build the data URI. Combine the prefix and the string, with no spaces and no line breaks. The full data URI is: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAwMCAO+ip1sAAAAASUVORK5CYII= Copy it exactly, including the comma after base64 and the equals sign at the end. The equals sign is padding, and removing it can break decoding in some contexts.

Step 4: Use it in HTML. Place the data URI in the src attribute of an img tag, like this: <img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAwMCAO+ip1sAAAAASUVORK5CYII=” alt=”A single transparent pixel used as a test image” width=”1″ height=”1″> The alt text describes the image for readers who cannot see it. The width and height match the image size, so the browser does not guess.

Step 5: Test it. Open the test page in a browser. The image is one transparent pixel, so it may be invisible on a white background. That is expected. To confirm it works, you can temporarily set the width and height to a larger size in a test, or check that the browser shows no broken-image icon. Then restore the correct size. If you see a broken-image icon, check the prefix, the comma, the encoded string, and the quotation marks around the src value.

Step 6: Measure the cost. The original 1×1 PNG is a few dozen bytes. The Base64 string is longer than the original file. The data URI adds the prefix as well. For this tiny test image, the difference is small in absolute terms, but the pattern is the same for larger images: the encoded version is about 33 percent larger than the binary file, plus the prefix. That is why the method only makes sense for very small images, where the absolute extra size is tiny.

This example shows the full workflow in miniature. You start with an image, encode it, build the data URI, use it in code, test it, and measure the cost. When you apply the same workflow to a real icon, the only difference is that the string will be longer. If the string becomes so long that it is hard to manage, the image is too large to inline.

When to Use a Data URI

A data URI makes sense in a narrow set of cases. It can be useful for a tiny icon that appears on every page, such as a small bullet, a favicon-sized mark, or a simple decorative element that is only a few kilobytes. In that case, inlining can reduce a separate request, and the extra size is small. It can also be useful for a small image in a single-file document, such as a standalone HTML file that must work without separate image files. In that case, the convenience of a single file may outweigh the size cost.

A data URI can also be useful when an image is generated dynamically and is not stored as a file, or when you need to embed a small image in an email template that does not reliably load external images. Even in those cases, test the result. Some email clients block or limit data URIs, and some content security policies restrict them. A data URI is not a universal solution. It is a trade-off that works best when the image is tiny, the use is limited, and you have tested the result.

When Not to Use Base64

Do not inline large images. That is the most important rule. Do not convert a photograph, a hero image, a banner, a gallery image, or any image larger than a few kilobytes into Base64 for a normal web page. A large data URI makes the HTML or CSS file much larger, slows the first load, prevents the browser from caching the image separately from the page, and makes the code hard to read and maintain. A normal image file is better, because the browser can cache it, load it in parallel, and reuse it across pages. If the same image appears on many pages, a separate file is cached once. A data URI is downloaded again with every page that contains it.

Do not inline images that change often. If a logo, a banner, or a product image is updated, a separate file can be replaced once. A data URI must be found and replaced in every file that contains it, which is error-prone. Do not use Base64 to hide an image. Base64 is easy to decode, so it does not protect the image or its content. Do not use Base64 for sensitive images, and do not paste a sensitive image into an online converter you do not trust. Do not use a data URI as a substitute for proper image optimization. If an image is too large, resize it, compress it, and choose the right format first. Converting a large image to Base64 makes the problem worse, not better.

Also, be careful with content security policy and performance tooling. Some security policies block data URIs, and some performance tools flag large inline images. If your site uses a strict content security policy, test the data URI with that policy in place. If your site uses a content delivery network or an image optimization service, a separate image file will work better with those tools than an inline string.

Limitations

Base64 has clear limits. First, it increases size by about 33 percent, plus the data URI prefix. Second, it prevents separate caching. The browser cannot cache the image on its own, so it must download the whole page again to get the same image. Third, it makes code harder to read and edit. A long string in the middle of HTML or CSS is easy to break with an accidental line break or a missing quote. Fourth, it does not work everywhere. Some older browsers, email clients, and tools do not support data URIs, or they limit their size. Fifth, it does not improve image quality. If the original image is blurry or low quality, the Base64 version will be the same image, only larger as text.

Finally, Base64 is not a security feature. It does not encrypt, hide, or protect the image. Anyone can decode the string and recover the original image. Do not use it to obscure content, and do not assume that a data URI is private because it looks like random text. Treat a data URI the same way you would treat the original image file.

Frequently Asked Questions

Does Base64 make an image smaller?

No. Base64 makes the data about 33 percent larger, plus the data URI prefix. It is not compression. If you need a smaller image, resize it, compress it, or choose a more efficient format. Only use Base64 when the image is already tiny and the convenience of inlining outweighs the size cost.

Can I convert a JPG to Base64?

Yes. The process is the same, but the data URI prefix must match the file type. For a JPG, use data:image/jpeg;base64, followed by a comma and the encoded string. For a PNG, use data:image/png;base64. If the prefix does not match the file type, the browser may not display the image.

Is Base64 safe to use in CSS?

Yes, for small images, if your security policy allows it. In CSS, you would write background-image: url(data:image/png;base64, followed by the string and a closing parenthesis). Test the result, and check that the CSS file does not become so large that it slows the page. For larger images, link to a separate file instead.

Should I inline every icon on my site?

No. Inline only very small icons that are used in a limited way and that you have tested. For most icons, a separate file, an SVG file, or an icon font or sprite is easier to maintain and cache. If you inline many icons, the page file becomes large, and updating an icon becomes harder. Use inlining sparingly, not as a default.

To decide, ask three questions. Is the image tiny, only a few kilobytes? Will it be used in only one place or in a single-file document? Have you tested the data URI in a browser and checked the page size? If the answer to all three is yes, a data URI may be reasonable. If any answer is no, use a normal image file. That simple check will keep your pages fast, maintainable, and easy to cache.