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
- Select or drag & drop one or several Image files (PNG, GIF, JPG, TIFF, SVG, WEBP);
- Press Encode button (you will see result below);
- Select output format (Plain Text, Data Url, CSS background, HTML Image Tag, HTML Favicon, HTML Iframe Tag, HTML Hyperlink Tag);
- Copy or Download Base64 data;
- 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>