Big Idea 3 Color Codes/Images/Base64

• 2 min read

Popcorn Hack #1

Which format would you use for an image with a transparent background that needs to stay sharp on any screen?

PNG would be the best format because it supports transparent backgrounds and keeps images sharp without losing quality and is efficient in storing data.

MCQ

B. PNG

Popcorn Hack #2

One downside of Base64 is that it increases the size of the encoded data by approximately 33%, which can lead to higher storage and bandwidth usage compared to the original binary format.

MCQ

B. It increases the size of the data. Base64 encoding increases the size of data, as it converts binary data into text characters.

Homework Hack

  1. What is a hex color code? What are some examples? A hex color code is a six-digit code used in HTML, CSS, and other design tools to represent colors. It uses hexadecimal (base-16) values to define the intensity of red, green, and blue in a color.

Format: #RRGGBB

RR = red (00 to FF)

GG = green (00 to FF)

BB = blue (00 to FF)

Examples:

#FF0000 → red

#00FF00 → green

#0000FF → blue

#FFFFFF → white

#000000 → black

  1. What is Base64 and how is it used with images? Base64 is a method for encoding binary data (like an image) into a text format using only ASCII characters. It’s commonly used to embed image data directly inside web pages or scripts.

When an image is Base64-encoded, it becomes a long string that can be used in an img tag or a data URI.

  1. Why might you use Base64 instead of a regular image file?

You might use Base64 instead of linking to an image file when:

  • You want to embed the image directly in the document without requiring an external file.
  • You’re working in environments with no file system access, like online notebooks (e.g., Google Colab).
  • You want to send images as text, for example, in JSON or XML payloads over a network.

When sharing notebooks with others, Base64 ensures the image stays embedded and doesn’t break due to missing file links.

  1. Insert an image into your Jupyter notebook and explain how it’s stored and displayed.
import base64
from IPython.display import HTML

# Use the real path to the image file
with open("images/2018cb_mcq/mcq1.png", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read()).decode('utf-8')

# Create the HTML tag with the Base64 string
html_code = f'<img src="data:image/png;base64,{encoded_string}" />'

# Display the imag
HTML(html_code)

How It’s Stored and Displayed

The image is read as binary data.

That binary data is converted to a Base64 string, which turns it into text.

The tag uses a data URI (data:image/png;base64,…) to embed the image directly into the notebook.

This method stores the image inline—you don’t need the image file anymore after encoding.

Benefits

The image is fully embedded in the notebook.

Great for sharing notebooks without worrying about missing files.