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

Encode Image to Base64

The converter helps to encode Image File to Base64 data then to copy or download a result data in several formats. If you want decode use Base64 to 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 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 bacground 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 roperty.
  • 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 Image file to my site (HTML page)

If you want add Image in web site, you should encode Image file and select formats: 

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

Example HTML Image Tag:

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

Copy Paste this code to <body> tag of your web page. You can set addition <img> tag's attributes are width, height. More info about img tag.

If you want use SVG image in 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 download 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>