Encode image to Base64 encoded string

Base64 encoded image: When using smaller images/icons on a webpage, it can be more efficient to encode the them into Base64 encoded strings and apply these directly to a HTML image tag or css class.

MIME types: The following MIME types are supported by all major browsers and can be encoded here:
  • BMP: image/bmp
  • GIF: image/gif
  • ICO: image/x-icon
  • JPEG: image/jpeg
  • PNG: image/png
  • SVG: image/svg
  • TIFF: image/tiff
The below samples uses
image/jpeg
as MIME type and a
1x1 pixel content
. Remember to replace with your correct MIME type and content.
When copying to clipboard the MIME type will be set based on the file extension.

Usage in HTML:
<img src='data:
image/gif
;base64,
R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
'>

Usage in CSS:
.myimage {
    background-image: url('data:
image/gif
;base64,
R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
');
}
Image file to Base64 encode
Browse…
Base64 encoded image
1.0.12