How to Convert an Image to Base64
Base64-encoded images can be embedded directly in HTML and CSS as data URIs, eliminating extra HTTP requests. This technique is useful for small icons, email templates, and single-file HTML documents.
1 Prepare your image
Choose a small image file (PNG, JPEG, or SVG). Base64 encoding increases file size by about 33%, so this works best for images under 10KB.
2 Convert to Base64
Use the Base64 Encode tool to convert the image file to a Base64 string.
3 Create the data URI
Prefix the Base64 string with the correct MIME type: data:image/png;base64, or data:image/jpeg;base64, followed by the encoded string.
4 Use in HTML or CSS
Place the data URI in an img src attribute or as a CSS background-image url().
How It Works
Base64 encoding converts binary image data to ASCII text using 64 characters (A-Z, a-z, 0-9, +, /). The resulting string is about 33% larger than the original binary, but it eliminates an HTTP request. For larger images, serving the file directly with proper caching is more efficient.
Try it yourself
Open Base64 Encode & Decode