1. Online Base64 Encoders & Decoders
  2. Base64 Encoders
  3. Encode Image to Base64

Encode Image to Base64

The converter helps to encode the Image File to Base64 data and then copy or download the result data in several formats. If you want to decode, use Base64, the Image Decoder.

How to encode Image file to Base64 Data

  1. Select or drag & drop one or several Image files (PNG, GIF, JPG, TIFF, SVG, WEBP);
  2. Press Encode button (you will see the result below);
  3. Select output format (Plain Text, Data URL, CSS background, HTML Image Tag, HTML Favicon, HTML Iframe Tag, HTML Hyperlink Tag);
  4. Copy or Download Base64 data;
  5. Done!

Output Formats

  • Plain Text - Only Base64 data;
  • Data Url - Base64 in data URL format (data:[<MIME-type>][;charset=<encoding>][;base64],<base64 data>)
  • CSS Background - CSS Class with Data Url data in background property.
  • HTML Image Tag - HTML Tag <img> with Data Url data in SRC property.
  • HTML Favicon - HTML Tag <link rel="shortcut icon"/> with Data Url data in HREF property.
  • HTML Hyperlink Tag - HTML Tag <a> with Data Url data in HREF property.
  • HTML IFarme Tag - HTML Tag <iframe> with Data Url data in SRC property.

Output Format Examples for Image (truncated data, for example)

Plain Text:

/9j/4S/+RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEa...

Data Url:

data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEa...

CSS Background:

.base64{background-image: url("data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEa...");}

HTML Image Tag:

<img src="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEa...">

HTML Favicon:

<link rel="shortcut icon" href="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEa..." />

HTML Hyperlink Tag:

<a href="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEa...">Click</a>

HTML IFrame Tag:

<iframe src="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEa..."></iframe>

How to add an Image file to my site (HTML page)

If you want to add an Image to the website, you should encode an Image file and select the formats: 

  • HTML Image Tag;
  • CSS Background;
  • HTML Hyperlink Tag

Example HTML Image Tag:

<img src="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEa...">

Copy and Paste this code to your web page's <body> tag. You can set the addition <img> tag's attributes as width and height - more info about the image tag.

If you want to use an SVG image in the background, use Base64 data in CSS like this code for style .base64:

.base64{background-image: url("data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEa...");}

If you want to download an Image file by HTML Hyperlink Tag, add attribute download="<file-name>.<extension>"

<a href="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEa..." download="image.jpg">Download Image</a>