Blog/April 28, 2026·2 min read

Convert image to Base64 online - encode and embed images in HTML or CSS

How to encode a PNG, JPG, or WebP image to a Base64 string in your browser. Use cases for embedding images directly in HTML, CSS, and JSON without a separate file.

A Base64-encoded image is a plain text representation of an image file. Instead of referencing an external file with a src URL, you embed the image data directly as a string. This is useful in several development and integration scenarios where a separate file reference is inconvenient.

Open Image to Base64 on toolit, drop your image, and copy the resulting string. You can also go the other direction - paste a Base64 string into Base64 to image to decode it back to a viewable file.

When to use Base64 image encoding

Embedding images in HTML email Email clients block external image URLs when a user has "load images" turned off. Embedding the image as a Base64 data URL inside the src attribute means the image is always present in the email body without an external request. This is the most common real-world use case.

Inline images in CSS Small icons, backgrounds, and decorative assets can be embedded directly in a stylesheet using url("data:image/png;base64,..."). This eliminates an extra HTTP request for each small asset - useful for loading-critical UI elements like spinners or tiny icons.

Data payloads in JSON or APIs Some APIs accept image data as a Base64 string inside a JSON payload rather than as a multipart file upload. Encoding your image first and pasting the string into the request body is the standard approach for these integrations.

Self-contained HTML files If you need a single .html file that includes all its assets - for offline use, archiving, or sending as an attachment - Base64-encoding images lets you bundle everything into one file without a separate images folder.

What is the downside?

Base64 encoding increases file size by approximately 33 percent compared to the original binary file. This is because binary data is re-expressed using only 64 printable characters, which requires more bytes to represent the same information. For large photos this adds up quickly, so Base64 is best kept for small assets - icons, thumbnails, logos - rather than full-size photographs.

Decode Base64 back to an image

If you receive a Base64 string and need to see what image it represents, paste it into Base64 to image on toolit. The tool decodes and previews the image instantly, and lets you download the result as a regular image file.

More posts