Image to Base64 Converter

Image to Base64 Converter

In this post, I will share a simple script I wrote for converting image to Base64.

The Problem

  • I was working on a project that requires using react.js but currently it does not have a good way to generate self-contained slides. (i.e. if the images you are referencing is on the local computer it would not work.)
  • So I wanted to simply replace all the image references in my jupyter notebook with base64 encodings of that image.
  • This little script would help me on that.

What This Does

  • You just give it a url of the image or a local path of the image and run it.
  • It automatically copies the base64 encoding of the image to the clipboard.
  • Quite neat, huh?

Show Me The Code!

  • You might need to run pip install pyperclip before running this code.
  • If you are encoding a local image, specify the path of local_img and delete the line of urllib.request.urlretrieve(url, local_img).
  • Make sure your file format is consistent throughout the url, local_img, and src(later).
import base64, urllib, pyperclip

url = ""
local_img = "convert.svg"  # Dummy local file name

urllib.request.urlretrieve(url, local_img)  # Save the image to local
with open(local_img, "rb") as img_file:
    base64_ = base64.b64encode(  # Encode to base64

base64_string = base64_.decode('utf-8')  # Otherwise output is enclosed with b''

The Results

Well, it copies a string like this to your clipboard:


Which does not really make sense.

However, once you insert this string into the following HTML label depending on your file type (In this example, svg):

<img src="data:image/svg+xml;base64, YOUR_STRING_HERE">
<img src="data:image/jpg;base64, YOUR_STRING_HERE">
<img src="data:image/png;base64, YOUR_STRING_HERE">  

We should be able to see an image like this:

Cornell Logo

Image to Base64 Converter
Older post

News - RhinoCircular Won Zumtobel Special Prize for Innovation

Newer post

Cornell Tech Zoom Background

Image to Base64 Converter