Convert an image to Base64

When inlining an image as Base64 is worth it

A data URI puts the image inside the page itself, so the browser needs no extra request to show it. That helps for small things:

• Tiny icons and logos of a few kilobytes, where the extra request costs more than the extra bytes.
• Single-file pages and demos that must work as one file, such as a saved report or a bug reproduction.
• Placeholders shown while a larger image loads.
• Markdown and documentation that should carry its images with it.

When it is not

Base64 makes the data about 33% bigger, and an inlined image cannot be cached on its own: it downloads again with every page that contains it. Inside a stylesheet, a large data URI also delays the rendering of everything that depends on that stylesheet. As a rule of thumb, keep inlined images small and serve larger ones as normal files.

Many email clients also do not show images that are inlined as data URIs, so for HTML email, attach the image or link to a hosted copy instead.

Using what you copy

• Data URI: data:image/png;base64,... works in places that take a URL, such as the src of an img or a CSS url().
• HTML: a complete img tag with width, height and the alt text you type. Always write alt text for pictures that carry meaning.
• CSS: a background-image: url("data:..."); line to paste into a rule.
• SVG: these are text already, so they can be smaller as a percent-encoded data URI than as Base64. The Base64 form is still valid and works the same.

To get the picture back out of a data URI, use Base64 to image.