Image Tools
PDF Tools
Developer ToolsBase64 Images in HTML, CSS and JSON: Best Practices
Inline images can speed up a page or slow it down. Here are clear rules for when Base64 is the right tool.
Base64 turns a picture into plain text so it can live inside HTML, CSS, JSON or an email. Learn what it is, when it helps and when it hurts.
Base64 is a way to write binary data, such as a picture, using only normal letters, numbers and a few symbols. The result is a long piece of text that can be pasted anywhere text is allowed.
Why people use it
- Put a small image directly inside HTML or CSS, so the page needs one request less.
- Send an image inside a JSON message to an API.
- Store a tiny icon or signature in a database text field.
- Embed pictures in email templates.
What a data URI looks like
An image in HTML can be written like this: <img src="data:image/png;base64,iVBORw0KGgo...">. Everything after the comma is the encoded picture, and image/png tells the browser what type it is.
Encode an image
- Open the Base64 Image Converter.
- Choose Image to Base64.
- Select your picture.
- Press Copy and paste the text where you need it.
When not to use it
Base64 makes data about one third larger than the original file. For big photos this is a bad trade: the page gets heavier and the browser cannot cache the picture separately. Use it for small images, usually under a few KB. For large pictures, compress them and link to the file normally.
Next
Need the reverse? Read how to decode Base64 to an image.
Try it now: Base64 Image Encoder / Decoder
Encode an image to Base64 text, or decode it back to a file.
Open Base64 Image Encoder / Decoder