Base64 Encoder / Decoder for Designers

Inline small assets into CSS or HTML without an upload step.

Open the Base64 Encoder / Decoder →

What it does for Visual designers and brand teams

• Encode an icon, a logo, or a small sprite into a data URL you can paste directly into a stylesheet or a component prop.
• Decode a data URL you found in someone else's CSS to see exactly which file it was (and at what dimensions).
• A common designer workflow: SVG optimized, base64-inlined into a CSS class for a one-shot landing page that ships as a single file.

How to use it

1. Drop the SVG / PNG / JPG you want to inline, or paste an existing base64 string if you are decoding.
2. Switch mode with one click if you pasted the wrong way around. UTF-8 text and binary files go through the same field.
3. Copy the result. For CSS you usually want the data URL plus the right `background-image` syntax ready to paste.

Other tools Designers reach for

Common questions

When is inlining an image as a data URI worth it?

Rarely, and only for very small assets such as a single icon or a one-pixel spacer. The image travels inside the CSS or HTML, so it cannot be cached separately, it blocks the render of whatever file contains it, and it inflates that file by about a third.

Why did my inline background image stop rendering after I converted it?

The data URI has to declare the right MIME type, and a raw # inside an unencoded SVG is read as the start of the fragment identifier and cuts the URI in two. Encode the file as base64, prefix it with a data: URI that names the media type, and keep the payload free of stray characters.

Can I use a data URI in an email signature or template?

Many email clients strip data URIs and block images by default, so the recipient sees an empty box. Host the file and reference it by URL when the destination is email, and keep inlining for web pages you control.