Base64 Images: What They Are, How to Use Them, and When It's Worth It

What is Base64?

Base64 is an encoding system that turns binary data — like the bytes that make up an image — into a sequence of plain-text characters. The name comes from the fact that the system uses 64 distinct characters (uppercase letters, lowercase letters, digits, + and /) to represent any type of data.

In practice, this means any image file can be converted into a long text string like this one:

This format is called a Data URI (or data URL). Instead of pointing to an external file, the URL carries the image's own content encoded as text. The browser reads this string and renders the image directly, with no additional HTTP request.

How a Data URI is structured

Every image Data URI follows the same pattern:

The components are:

• data: — the fixed prefix that identifies the scheme
• [MIME type] — the image format, such as image/png, image/jpeg, image/svg+xml or image/gif
• ;base64, — indicates the content is Base64-encoded
• [encoded data] — the long string with the image's binary content converted into text

It's important to note that Base64 encoding increases data size by roughly 33%. A 3 KB image becomes a string of about 4 KB. This cost exists because the system needs more characters to represent the same bytes.

How to use Base64 in HTML

To display a Base64 image directly in HTML, just place the Data URI in the src attribute of the <img> tag:

The browser treats this element exactly like a normal image. You can apply CSS, set width and height, and use it in any context where an <img> would be accepted.

How to use Base64 in CSS

In CSS, the Data URI is mainly used in background-image properties:

This technique is especially common for small SVG icons that need to be colored dynamically via CSS, or for background images that are part of reusable components in libraries.

When to use Base64 — and when to avoid it

The decision between using Base64 or an external file mainly depends on the image's size and the context of use. The table below summarizes the most common scenarios:

Situation	Recommendation	Reason
Small icons and sprites (< 2 KB)	✅ Base64 recommended	Eliminates an HTTP request with no noticeable impact on size
Favicons embedded in CSS	✅ Base64 recommended	Convenient and with no external file dependency
Loading placeholders and skeletons	✅ Base64 recommended	Loads instantly with the HTML, with no flash of content
HTML emails	✅ Base64 recommended	Many email clients block external images
Content images (photos, banners)	❌ Avoid	Increases HTML weight and prevents browser caching
Images larger than 5 KB	❌ Avoid	The size penalty (+33%) hurts load time
Images reused across multiple pages	❌ Avoid	An external file gets cached; Base64 is downloaded again on every page

Advantages of Base64 for images

When used in the right context, Base64 brings real benefits:

• Zero additional HTTP requests — the image is embedded right in the HTML or CSS, which reduces load latency for critical above-the-fold images.
• Works offline and in emails — since it doesn't depend on an external server, the image displays even without a connection (in offline apps) or in email clients that block external content.
• Full portability — a single HTML file with Base64 images can be sent or archived without losing any visual reference.
• Atomic loading — the image appears exactly when the HTML element is rendered, with no extra delay, ideal for avoiding layout flash in interface icons.

Disadvantages and limitations

Base64 also has costs that need to be weighed carefully:

• 33% larger size — converting to text invariably increases the volume of data transferred. For large images, this means extra kilobytes with no benefit at all.
• No browser caching — images in external files are cached by the browser and reused across pages. Base64 embedded in HTML gets downloaded again on every visit, since it's tied to the document.
• Harder to maintain — replacing an image in the code requires re-converting the file and pasting a new long string into the HTML or CSS, which is tedious and error-prone.
• Hurts code readability — long Base64 strings inside CSS or HTML make the file hard to read and review.
• Doesn't compress efficiently with gzip — gzip and Brotli compress repetitive text well, but Base64 strings have high entropy and don't benefit much from compression, unlike a binary image file.

Base64 and site performance (PageSpeed)

Base64's impact on performance depends directly on what's being encoded. For small icons, eliminating an HTTP request can improve perceived Time to First Byte and reduce the number of parallel connections needed. This can positively reflect on Core Web Vitals metrics, especially LCP (Largest Contentful Paint), when the page's main element is an embedded icon.

On the other hand, embedding large images in Base64 directly increases the weight of the HTML document, delaying the start of rendering. Google PageSpeed Insights tends to penalize pages with excessively heavy HTML. For photos and banners, the right path is always an optimized external file.

If you need to optimize images for the web, the first step is to compress and convert to the most efficient format. ImageTools' Image Compressor does this directly in the browser, without sending your files to any server.

How to convert an image to Base64

There are several ways to generate a Base64 string from an image:

• Online tools — the fastest way for one-off use. ImageTools offers the Image to Base64 tool, which converts any image in the browser and delivers ready-to-copy code.
• Terminal (Linux/macOS) — the base64 image.png command generates the encoded string. To generate the full Data URI: echo "data:image/png;base64,$(base64 -w 0 image.png)".
• JavaScript in the browser — using the FileReader API, you can convert any file selected by the user to Base64 asynchronously.
• Webpack and bundlers — tools like Webpack, Vite and Rollup have plugins that automatically convert small files to inline Base64 during the build, following a configurable size limit.

Frequently Asked Questions